CSS (10) 썸네일형 리스트형 [CSS] Responsive CSS 단위, EM과 REM의 차이 절대적인 단위 px 반응형 웹사이트 제작 시 절대 단위인 px을 사용할 경우 컨테이너의 사이즈가 변경되어도 콘텐츠가 고정된 값으로 유지되고, 사용자가 브라우저에서 폰트 사이즈 설정을 변경해도 전혀 반응하지 않는다. 그래서 반응형 웹에서의 px 사용은 적절하지 않다. 상대적인 단위_em, rem, vw, vh, % EM relative to parent element 타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위 지금 폰트 사이즈를 나타내는 단위 Parent Child .parent { font-size: 4em; /* 4em= 400% */ } .child { font-size: 0.5em; /* 0.5em= 50% */ } em은 부모 font-size에 상대적으로 계산되어 크기가 결정된.. [CSS] :root 가상 클래스로 CSS 변수 다루기 Html로 골격을 잡고 CSS로 디자인을 할 때, 폰트 크기나 폰트 컬러 등 여러 부분에 웹페이지의 통일성을 위해서 하나의 같은 변수를 여러 번 사용하는 경우가 많다. 수정을 해야할 때, 요소들을 하나하나 찾아서 수정을 해야 하는데 요소의 수가 많으면 시간이 걸릴 뿐 아니라 정확성도 보장할 수 없다. 이럴 때 :root 가상 클래스를 사용하게 되면 유지보수를 손쉽게 할 수 있다. 그러면 가상 클래스는 무엇이고, :root 가상 클래스는 어떻게 사용하는 것일까? 가상 클래스(pseudo-class)란? Id 선택자나 class 선택자로 사용할 수 없는 요소들을 선택하는 선택 자다. 가상 클래스(pseudo-class)는 요소의 속성 값, 상태, 상대적 위치 등을 이용하여 요소를 선택할 수 있다. Ex) :.. 이전 1 2 다음
