그린그린티라떼

.main-nav__item a { text-decoration: none; color: #0e4f1f; } .main-nav__item a:hover { color: white; } .main-nav__item a::after { content: ' after'; color: pink; } navbar에 들어있는 a태그만 style 변경해줄 때 이런 식으로 주면 깔끔하다.

여백 상쇄? 두 요소의 여백이 겹칠 때 더 큰 여백으로 대체되는 것 예) 첫번째 div의 padding-bottom, 두번째 div의 padding-top의 경우 둘 중 더 큰 쪽의 padding을 적용하고 나머지 padding은 상쇄된다. 축약 프로퍼티로 작업(short property) border: 2px dashed orange 순서는 상관 없다(속성이 다르기 때문) 줄이지 않았으면 border-width: 2px border-style: dashed | solid border-color: orange 이렇게 작성해야된다. margin: 5px 10px 5px 10px(위 오른쪽 아래 왼쪽) margin: 5px 10px 로 축약 가능 margin: 10px 10px 10px 10px margin..

~ General Sibling h2 ~ p { color: red; } p요소가 h2요소 다음에 와야 함, 하지만 바로 위치해야되는 것은 아님 > Child div ~ p { color: red; } div의 직속 자식이 p태그에만 해당 스타일을 적용시킨다. div div article p 순으로 내려간다면 가장 안쪽의 p는 스타일이 적용되지 않는다. (아무런 기호 없이) Descendant div p { color: red; } div태그 아래의 모든 자식에 p가 있기만 하면 된다. div div article p 순으로 내려간다면 가장 안쪽 p도 스타일이 적용된다.

➕ Adjacent Sibling h2 + p { color: red; } Not applied CSS applied Not applied CSS applied CSS applied된 부분의 글씨만 빨간색으로 바뀐다.

Cascading - multiple rules can apply to the same element 여러 스타일이 같은 요소에 적용될 수 있음 Specificity? 위로 갈수록 더 높은 순위(인라인이 가장 우선 시 되지만 사용 권장X) Resolve conflicts arising from multiple rules Inline Styles ∨ #ID selectors ∨ .class, :pseudo-class and [attribute] selectors ∨ and ::pseudo-element selectors