가장 기초적인 부분인데 그냥 넘어가는 경우가 많다. 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법. 점수가 높은 선언이 우선 점수가 같으면 가장 마지막에 선언한 태그가 우선 Hello world! 점수로 우선순위를 나타내보자. Hello world! !important > inline > ID > Class > 태그 > 전체 > body body라는 태그에 속성을 적용하면 상속되기 때문에 점수를 계산하지 않는다. [예제] .list li.item {} .list li:hover {} .box::before {} #submit span {} header .menu li:nth-child(2) {} h1 {} :not(.box)..

2021.03.18 요소를 퍼센트로하여 적응형이나 반응형에서도 자유롭게 쓸 수 있는 템플릿이다. 이해를 확실히 하고자 다시 정리하게 되었다. 본 기법은 다양하게 응용할 수 있다. 원본 문서에서는 li 요소 갯수에 따라 블록 안의 배경색을 다양하게 매기는 것을 예시로 들었다. flexbox를 사용할 수 없는 환경이라 가정한다. 다음 코드에서는 float: left 를 사용하여 li 요소들을 띄운 상태이다. li { float: left; } /* li가 하나일 때 */ li:first-child:nth-last-child(1) { width: 100%; } /* li가 두개일 때 */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~..