CSS (3) 썸네일형 리스트형 TailwindCSS란? 핵심(Core Concept) 정리 - 1 이번에 사이드 프로젝트에서 TailwindCSS를 사용하게 되었습니다. 그래서 학습할겸 TailwindCSS의 Core Concepts에 대해 정리해보고자 합니다. TailwindCSS란? TailwindCSS란 최근에 각광받고 있는 CSS 라이브러리입니다. TailwindCSS는 미리 정의된 여러가지 유틸성 클래스들을 결합하여 스타일을 정의하는데요, 이 때문에 TailwindCSS는 스스로를 utility-first CSS Framework라고 지칭합니다. 이러한 방식은 각 엘리멘트에 적합한 의미론적인 클래스 명을 부여하는 기존 CSS의 Semantic class names의 스타일과는 사뭇 다릅니다. 그럼 이러한 방식이 어떠한 장점이 있는지에 대해서 알아보겠습니다. Utility First Funda.. CSS 특정성 (Specificity) 들어가며 지난 글에서 알아본 Cascade의 가장 중요한 부분중 하나인 특정성에 대해 더 자세히 알아보도록 하겠습니다. 특정성에 대해서 이해를 하게 되면 CSS 우선순위에 대해서 확실하게 파악할 수 있을 것입니다. 특정성 점수 각각의 CSS rule의 선택자는 특정성 점수를 가지게 되며, 점수가 가장 높은 CSS rule이 요소에 적요됩니다. 특정성 점수는 선택자의 종류에 따라 점수가 부여되며, 여러 선택자가 중첩되어 있는 경우, 모든 점수를 합한 총합이 최종 점수가 됩니다. 각 선택자의 점수 Universal selector(*): 0점 * { color: red; } element, pseudo-element selector: 1점 div { color: red; } ::selection { colo.. CSS 적용 규칙(Cascade)에 대해서 Cascade CSS는 알다시피 Cascading Stylesheets의 약자입니다. 여기서 Cascading이란 폭포처럼 아래로 흐르는 것을 의미합니다. 즉, CSS 스타일은 하위의 요소에 스타일이 상속되거나, 이를 덮어씌울 수 있다는 것을 의미합니다. 그렇다면 어느 경우에 덮어씌워지는지, 혹은 어떤 스타일이 우선순위를 가지는지는 어떻게 결정할까요? 이러한 문제를 해결하는 알고리즘이 바로 Cascade입니다. Cascade 알고리즘은 4가지 단계로 나눌 수 있습니다. 위치 및 표시 순서 특정성(Specificity) 출처(Origin) 중요도(Importance) 위치 및 표시 순서 우선 CSS를 HTML 페이지에 적용하는 방법은 3가지가 있다는 사실을 짚고 넘어가도록 하겠습니다. 첫 번째로는 tag로.. 이전 1 다음
