CSS란 무엇인가

docs.scrimba.com

잘 만들어진 웹사이트를 열고 CSS를 제거하면, 흰색 배경에 검은 텍스트로만 된 긴 열이 남습니다. 모든 제목, 모든 문단, 모든 링크가 순서대로 쌓여있고 아무런 스타일도 없습니다. 그 평범한 열이 바로 HTML입니다. 페이지를 설계된 모습으로 만드는 모든 것, 색상, 간격, 글꼴, 열과 카드, 네비게이션 바는 모두 CSS입니다. 이 장은 그 두 번째 언어가 무엇인지, 그리고 첫 번째 언어와 함께 어떻게 작동하는지에 관한 것입니다.

CSS 적용 전후의 페이지

CSS는 **캐스캐이딩 스타일시트**의 약자입니다. 중요한 부분은 스타일입니다. CSS는 페이지의 모습을 설명하는 방법입니다. 당신의 HTML은 "이것은 제목이고, 이것은 문단이고, 이것은 버튼이다"라고 말합니다. 그러면 CSS는 "제목을 크고 진한 파란색으로 만들고, 버튼에 패딩과 둥근 모서리를 추가해"라고 말합니다.

HTML을 방의 내용, 가구와 배치로 생각하고, CSS를 페인트, 조명, 배열로 생각해보세요. 같은 방이지만, 하나는 텅 비어있고 하나는 당신이 있고 싶은 곳입니다. CSS는 HTML의 특정 부분을 가리키고 모습을 바꾸는 별도의 규칙들로 작성합니다.

CSS는 웹 페이지의 표현 계층입니다. HTML은 구조와 의미를 제공하고, CSS는 그 구조를 읽고 색상, 타이포그래피, 간격, 크기, 레이아웃을 포함하여 어떻게 렌더링되어야 하는지 설명합니다. 둘은 별도로 작성되도록 설계되어 있으므로, 동일한 HTML을 CSS를 바꿈으로써 완전히 다시 스타일링할 수 있고, 하나의 스타일시트로 수천 개의 페이지를 한 번에 스타일링할 수 있습니다.

그 분리가 핵심입니다. 콘텐츠가 HTML에 있고 표현이 CSS에 있을 때, 마크업을 건드리지 않고 사이트를 다시 디자인할 수 있고, 모든 페이지를 편집하는 대신 하나의 공유 스타일시트를 변경할 수 있습니다. 첫 번째 규칙부터 둘을 분리하는 것은 가치 있는 습관입니다.

CSS는 표현 계층이며, 브라우저는 렌더링의 별도 단계로 적용합니다. 마크업에서 DOM (문서 객체 모델, 브라우저가 마크업에서 만드는 요소의 살아있는 트리)으로 HTML을 파싱하고, 규칙의 집합으로 CSS를 파싱한 다음, 규칙을 요소와 일치시켜 각 요소의 최종 스타일을 계산합니다. 당신의 CSS는 절대 DOM 트리를 변경하지 않습니다. 그것을 장식할 뿐입니다.

이 단계적 모델이 실제로, 원칙상뿐만 아니라 관심사의 분리가 유지되는 이유입니다. 의미가 전적으로 HTML에 있는 페이지는 우아하게 저하됩니다. CSS가 로드되지 않으면 콘텐츠는 여전히 있고 여전히 순서대로 되어 있습니다. 구조와 표현이 얽혀있지 않기 때문입니다. HTML을 전혀 변경하지 않고도 동일한 마크업이 밝은 테마와 어두운 테마를 가질 수 있거나, 인쇄 레이아웃과 화면 레이아웃을 가질 수 있는 이유이기도 합니다. 표현은 당신이 첨부하는 계층이지, 콘텐츠에 구워진 속성이 아닙니다.

h1 {
  color: navy;
  font-size: 2rem;
}

이것은 하나의 CSS 규칙입니다. 페이지의 모든 <h1> 제목을 찾아서 진한 파란색으로 만들고 더 크게 합니다. HTML은 정확히 그대로 유지됩니다. 오직 모습만 변합니다.

JunoCSS 적용 전후의 페이지 HTML은 콘텐츠, CSS는 모습입니다. 당신의 페이지의 특정 부분을 가리키고 모습을 변경하는 규칙들을 작성합니다. 예를 들어 제목을 크고 파란색으로 만드는 것처럼요. 페이지 자체는 변하지 않고, 보여지는 방식만 변합니다. 그것이 전체 개념입니다.

JunoCSS 적용 전후의 페이지 CSS는 표현, HTML은 구조이며, 의도적으로 분리됩니다. CSS를 다시 스타일링하면 동일한 마크업이 완전히 다르게 보입니다. 하나의 스타일시트를 공유하면 모든 페이지를 스타일링합니다. 첫 번째 규칙부터 콘텐츠와 표현을 분리하는 습관을 기르세요.

JunoCSS 적용 전후의 페이지 브라우저는 HTML을 DOM으로 파싱하고, CSS를 규칙으로 파싱한 다음, 각 요소에 대한 스타일을 계산합니다. 당신의 CSS는 트리를 장식하며, 절대 재작성하지 않습니다. 그 단계적 모델이 CSS가 로드되지 않을 때도 의미가 HTML에 있는 페이지가 여전히 작동하는 이유입니다. 표현은 당신이 첨부하는 계층이지, 콘텐츠에 구워진 것이 아닙니다.

CSS가 HTML을 가리키는 방법

CSS는 페이지의 올바른 부분을 찾을 수 있을 때만 유용합니다. 그것은 **선택자**로 합니다. 선택자는 규칙의 시작 부분에서 무엇을 스타일링할지 명시합니다. 위의 규칙에서 h1은 선택자이며, "모든 h1 제목"을 의미합니다.

일반적으로 HTML에서 요소에 class를 지정하고 CSS에서 그 클래스를 가리켜서 요소를 대상으로 합니다. 클래스는 당신이 선택하는 레이블입니다.

<button class="buy-button">지금 구매</button>

.buy-button {
  background-color: teal;
  color: white;
}

.buy-button 선택자는 그 클래스를 가진 요소를 찾아서 스타일을 적용합니다. 나중에 많은 종류의 선택자를 만나겠지만, 클래스가 가장 자주 사용하는 선택자입니다.

CSS 규칙에는 두 부분이 있습니다. 어떤 요소를 일치시킬지 말하는 선택자와 어떻게 스타일링할지 말하는 선언 블록입니다. 선택자는 CSS가 DOM으로 들어가서 스타일을 적용할 요소를 선택하는 방법입니다. 요소 타입(h1), 클래스(.buy-button), id, 관계 등으로 선택할 수 있습니다.

<button class="buy-button">지금 구매</button>

.buy-button {
  background-color: teal;
  color: white;
}

실제로는 요소 타입이나 id보다 클래스로 훨씬 더 많이 스타일을 지정합니다. 클래스는 재사용 가능하고 내장된 특이성 문제가 없기 때문입니다. 선택자 장에서 전체 범위와 각 선택자가 올바른 도구인 시기를 다룹니다.

선택자는 CSS의 쿼리 언어입니다. 각 선택자는 브라우저가 모든 요소에 대해 테스트하여 어떤 규칙이 적용되는지 결정하는 패턴입니다. 그 일치는 무료가 아니며, **특이성**과 상호작용합니다. 특이성은 여러 규칙이 동일한 요소에 동일한 속성을 설정할 때 타이를 깨기 위해 브라우저가 선택자에 할당하는 무게입니다. 클래스는 요소 타입보다 무게가 더 높습니다. id는 클래스보다 무게가 더 높습니다. 인라인 스타일은 더욱 무게가 높습니다.

.buy-button {
  background-color: teal;
  color: white;
}

실제 결과는 어떻게 선택하는가가 단순한 대상 선택이 아닌 설계 결정이라는 것입니다. id와 깊게 중첩된 선택자로 모든 것을 선택하면 특이성이 증가하여 나중의 규칙이 재정의하기 어려워집니다. 이것이 스타일시트가 굳어지는 방식입니다. 평탄하고 클래스 기반의 선택자는 특이성을 낮고 예측 가능하게 유지합니다. 이것이 거의 모든 확장 가능한 CSS 접근 방식이 클래스를 기반으로 구축되는 이유입니다. 선택자 장에서 특이성을 제대로 다룹니다.

JunoCSS가 HTML을 가리키는 방법 선택자는 무엇을 스타일링할지 말하는 규칙의 부분입니다. 시작할 때 가장 친화적인 것은 클래스입니다. HTML의 요소에 class="name"을 넣은 다음, CSS에서 .name을 스타일링합니다. 다른 종류는 아직 걱정하지 마세요. 클래스만으로도 먼 길을 갈 수 있습니다.

JunoCSS가 HTML을 가리키는 방법 모든 규칙은 DOM의 요소를 일치시키는 선택자로 시작하며, 타입, 클래스, id, 관계별로 일치시킬 수 있습니다. 기본적으로 클래스를 사용하세요. 클래스는 재사용 가능하고 특이성을 관리하기 쉽게 유지합니다. 선택자 장에 전체 도구 상자가 있습니다.

JunoCSS가 HTML을 가리키는 방법 선택자는 쿼리 언어이며, 각 선택자는 규칙이 충돌할 때 승자를 결정하는 특이성 무게를 가집니다. id가 클래스를 이기고, 클래스가 타입을 이기고, 인라인이 모두를 이깁니다. 선택하는 방법은 유지보수 결정이므로, 특이성이 스타일시트를 굳어지게 하지 않도록 평탄하고 클래스 기반으로 유지하세요. 특이성은 선택자 장에서 전체적으로 다뤄집니다.

"캐스캐이딩"의 의미

캐스캐이딩 스타일시트의 첫 번째 단어는 사람들이 건너뛰는 것이지만, 많은 것을 설명합니다. 하나의 요소에 여러 개의 규칙이 적용될 수 있으며, 서로 모순될 수 있습니다. 어쩌면 하나의 규칙은 문단이 회색이라고 하고 다른 규칙은 이 특정 문단이 검은색이라고 합니다. **캐스캐이드**는 브라우저가 어느 것이 이길지 결정하는 규칙의 집합입니다.

대부분의 경우 한 가지로 귀결됩니다. 두 규칙이 동등하게 구체적이면, 나중에 작성된 것이 이깁니다. 아직 전체 그림이 필요하지 않습니다. 스타일이 예상한 대로 나타나지 않으면, CSS가 깨진 것이 아니라 다른 규칙이 그것을 이겼기 때문이라는 것을 알아두세요.

캐스캐이드는 여러 규칙이 동일한 요소를 대상으로 하고 동일한 속성을 설정할 때 충돌을 해결하는 알고리즘입니다. 여러 가지를 순서대로 따집니다. 규칙이 어디서 왔는지, 선택자가 얼마나 구체적인지, 그리고 최종 타이브레이커로서 소스 순서(나중이 이김)입니다. 두 규칙이 동등하게 구체적이면, 마지막으로 선언된 것이 이깁니다.

이것이 대부분의 "내 CSS가 왜 작동하지 않는가" 순간 뒤의 메커니즘입니다. 스타일은 적용되고 있습니다. 더 높은 순위의 규칙에 의해 재정의되고 있습니다. 캐스캐이드를 올바르게 읽고 변경을 강제하기 위해 더 많은 규칙을 더미로 쌓는 것이 아니라, CSS와 싸우는 것과 CSS를 지휘하는 것을 구분하는 습관 중 하나입니다. CSS 작동 방식 장에서 전체 해결 순서를 설명합니다.

캐스캐이드는 CSS의 충돌 해결 알고리즘이며, 그 순서를 알면 대부분의 스타일링 버그를 신비로움에서 조회로 바꿀 수 있습니다. 경쟁하는 선언을 출처와 중요도(작성자 스타일 대 브라우저 기본값 대 !important), 그 다음 특이성(선택자의 무게), 그 다음 소스 순서(나중의 규칙이 최종 타이를 이김)로 해결합니다.

프로덕션 규모에서 이것이 중요한 이유는 당신이 작성하는 모든 재정의가 그 순위의 이동이기 때문입니다. !important나 id에 손을 뻗어서 충돌을 이기는 것은 동일한 요소를 건드려야 하는 모든 향후 규칙의 바를 올립니다. 그 업스케일은 복합되어 안전하게 변경할 수 없는 스타일시트가 됩니다. 지속 가능한 수정은 거의 항상 여기에서 특이성을 올리는 것이 아니라 다른 곳에서 낮추는 것입니다. 최신 CSS는 캐스캐이드 계층과 같이 특이성 군비 경쟁 없이 캐스캐이드 제어를 제공하는 도구를 추가합니다. CSS 조직화 및 확장 장에서 다룹니다. 전체 해결 순서는 CSS 작동 방식을 참조하세요.

Juno캐스캐이딩의 의미 캐스캐이딩은 하나 이상의 규칙이 동일한 요소를 치고, 캐스캐이드가 어느 것이 이길지 결정한다는 의미입니다. 일상적인 버전: 두 규칙이 동등하게 구체적이면, 나중의 것이 이깁니다. 따라서 스타일이 나타나지 않으면, 다른 규칙이 그것을 이겼을 수도 있습니다. 이것을 신비로운 것으로 멈추기까지 오래 걸렸습니다.

Juno캐스캐이딩의 의미 캐스캐이드는 출처, 그 다음 특이성, 그 다음 소스 순서로 충돌을 해결하며, 동등한 타이에서 나중의 규칙이 이깁니다. 대부분의 "내 CSS가 작동하지 않는다"는 순간은 버그가 아니라 재정의입니다. 규칙이 왜 졌는지 읽는 법을 배우고 더 많은 규칙을 강제로 쌓지 말면, CSS가 더 이상 싸움처럼 느껴지지 않습니다.

Juno캐스캐이딩의 의미 충돌은 출처와 중요도로, 그 다음 특이성으로, 그 다음 소스 순서로 해결됩니다. 당신이 작성하는 모든 재정의는 그 순위의 이동이므로, !important나 id로 승리하는 것은 그 이후의 모든 규칙에 대한 바를 올립니다. 지속 가능한 수정은 여기서 특이성을 올리는 것이 아니라 다른 곳에서 낮추는 것입니다. 캐스캐이드 계층은 군비 경쟁 없이 제어를 제공합니다.

CSS의 다음 단계

CSS는 핵심적으로 작은 언어입니다. 선택자와 몇 가지 속성-값 쌍이지만, 먼 길을 갑니다. 요소를 대상으로 하고 속성을 설정할 수 있으면, 이 핸드북의 나머지는 알아야 할 속성들과 그 위에 구축된 시스템들에 관한 것입니다. 간격과 크기를 제어하는 박스 모델, 그 다음 색상과 타입, 그 다음 전체 페이지를 배열하는 레이아웃 도구인 flexbox와 grid입니다.

다음 장인 CSS 작동 방식에서는 이 장에서 소개한 메커니즘에 대해 구체적으로 설명합니다. 페이지에 CSS를 첨부하는 세 가지 방법, 규칙의 정확한 해부학, 캐스캐이드와 상속이 모든 요소의 최종 모습을 어떻게 결정하는지입니다.