목록공부/CSS (2)
주니어 개발자가 되기위해 자기자신에게 가스라이팅 하기
css에서 많이쓰이는 단위인 rem ❗ 이름이 비슷한 em과는 무엇이 다를지 알아보자 이 둘은 상대단위에 속한다. 1. 상대단위 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이 ex) 대표적인 CSS의 상대 단위 em, rem % vw, vh 🔁반대 - 절대단위 ex) px, in... 2. em 부모 요소의 크기에 영향을 받아서 크기가 변함 최상위 요소에서는 보통 1em = 16px이다 부모요소에 따라 em값이 변화 ex) 3. rem 최상위 요소인 html요소에 크기영향을 받아서 크기가 변함 html요소를 건드리지 않았을때 1rem = 16px이다. html에서 font-size를 px로 지정시 1rem의 크기를 바꿀 수 있다. ex)
background-image에서 사용하는 그라데이션의 사용법을 알아보자! 선형, 원형 두가지의 종류가 있다. 1. 선형 그라데이션(linear-gradient) linear-gradient(방향/각도, 색깔1/색깔지분율, 색깔2 /색깔지분율/투명, ...) ex) - 방향/각도 to left top 180deg - 색깔/지분율/투명도 red green 80% transparent (마지막색에 사용가능) 실제사용예시 🔽 background-image: linear-gradient(to left bottom, red 70%, blue 80%, rgba(0, 0, 0, 0.5)); 2. 원형 그라데이션(radial-gradient) radial-gradient(원의종류/방향/지름/각도, 색깔1/색깔지분율, ..