Frontend/CSS

Pseudo classess & Pseudo elements

배경 지식 element : content 전체를 의미 selector:pseudo-class 특정한 상황이 되면 selector에 자동으로 추가되는 클래스. 물론 내부적으로만 동작하기 때문에 문서상으로는 보이지 않는다. Example a:hover {font-weight:bold;} 마우스를 올려 놓으면 selector a에 hover class가 내부적으로 추가된다. 이 때 위의 CSS 코드에 의해 font-weight:bold 가 적용된다. selector::pseudo-element 특정한 상황이 되면 selector 내부의 특정 부분에 자동으로 추가되는 element. 물론 내부적으로만 동작하기 때문에 문서상으로는 보이지 않는다. Example p::first-letter {font-size:3..

Combinators

descendant selector a b {color:red;} - a의 자손인 b에게 color:red를 적용 child selector a > b {color:red;} a의 자식인 b에게 color:red를 적용 adjacent sibling selector a + b {color:red;} a의 맞동생(맞후임 느낌)인 b에게 color:red를 적용 general sibling selector a ~ b {color:red;} a의 동생인 b에게 color:red를 적용