How CSS works under the hood

상세히 살펴본 CSS 동작 방법

CSS 언어의 문법은 몇 시간 내에 배울 수 있을 정도로 단순하며, 입문자들도 수많은 CSS 관련 스니펫을 복사하여 멋진 웹 사이트를 만들 수 있고, 심지어 디자이너 또한 CSS를 작성할 수 있습니다. 많은 !important 사용 또는 원하는 스타일을 위한 인라인 스타일을 사용하기 전까지 원하는 대로 동작할 것입니다.

 

사람들은 종종 무시할 수 있을 정도로 이미 완벽하게 동작한다고 여겨지는 HTML/CSS 보다 JavaScript와 같은 보편적인 언어를 더 깊게 배우는 경향이 있습니다.

 

게다가 CSS 아키텍처, 명시도와 상속에 관한 확고한 이해는 예측 가능한 스타일을 통해 코드를 덜 작성할 수 있게 도와줄 것입니다. CSS의 본질적인 힘은 여러 자원의 스타일을 특정하고 최종 스타일을 자동적으로 계산할 수 있다는 사실에 달려있습니다.

 

이 글의 목표는 어떻게 CSS가 HTML에 적용되고 문제가 해결이 되는지 제어할 수 있는 CSS의 가장 기본이 되는 핵심 개념 — 폭포수 , 명시도 , 상속 — 에 대한 당신의 이해를 높이는 데 있습니다.

 

주어진 HTML 요소에 대한 CSS 속성이 최종적으로 계산되는 실제 과정은 몇 가지 단계를 거친 매우 복잡한 결과물입니다:

 

1. 수집

이 단계에선, 주어진 요소에 대한 모든 스타일 선언이 사용자 에이전트, 작성자 또는 사용자와 같은 여러 자원들로 부터 수집됩니다.

 

이러한 선언은 이 문서에 현재 적용이 되고 문법적으로 유효한 스타일시트인지 확인하기 위해 반드시 모든 종류의 필터링과 유효성 검사를 거쳐야 합니다.

 

2. 폭포수

이것은 CSS의 이름인 폭포수 스타일 시트를 통해 알 수 있는 핵심 개념입니다. author 원본으로서 개발자에게 큰 영향력을 주는 유일한 단계이기 때문에 이 단계에 대한 확고한 이해는 반드시 필요합니다.

 

이 단계는 이전 단계인 collecting 으로부터 선언된 정리되지 않은 항목을 받고, 다음 기준에 따라 우선 순위 descending 으로 정렬합니다:

 

원본과 중요도: 원본 (사용자 에이전트, 사용자, 작성자, 트랜지션, 애니메이션) 선언과 !important 주석의 조합을 기반으로 합니다. 상황에 따라 !important 를 사용하는 건 장점과 단점이 있기에, 조금만 사용합니다.

 

• 트랜지션
• 사용자 에이전트 + !important
• 사용자 + !important
• 작성자 + !important
• 애니메이션
• 작성자
• 사용자
• 사용자 에이전트

 

명시도: 다음과 같이 주어진 요소의 값을 통해 계산된 선택자의 명시도 (가장 높은 명시도를 가진 선언이 적용됩니다 ) 를 기반으로 합니다.

 

• 인라인 스타일 (1000)
• 아이디 선택자 (100)
• 클래스 선택자, 속성 선택자, 그리고 의사-클래스 (10)
• 유형 선택자 그리고 의사-요소 (1)
• 전체 선택자 (0)

 

출현 순서: 동일한 명시도 내에서 문서에 마지막으로 정의된 게 우선 적용됩니다.

 

• 중요한 스타일 시트는 그 자리에서 대체됩니다.
• 외부에 연결된 스타일 시트는 연결 순서에 따라 연쇄적으로 적용됩니다.
• 인라인 스타일은 모든 스타일 시트 뒤에 위치합니다.

 

3. 기본 설정

이 단계는 요소에 CSS 속성을 적용할 값이 선언되어 있지 않을 때 적용됩니다. 기본 설정을 위해서는 몇 가지 단계가 존재합니다.

 

초기 값: CSS 속성의 초기 값은 정의 표에 정의되며, 사용은 상속 여부에 따라 달라집니다.

 

상속: inherited 속성은 상위 요소로부터 값을 얻고, 루트 inherited 속성은 initial value 을 얻고, non-inherited 속성은 매번 initial value 를 얻습니다.

 

명백한 기본 설정: 속성에 대해 개별적으로 만든 값을 사용하는 것 대신, 속성 재정의를 위해 initial 키워드를, 확실한 종속을 위해 inherit 키워드를, 모든 선언을 제거하기 위해 unset 키워드를 명백하게 사용할 수 있습니다.

 

4. 해결

우리는 반응형 디자인에 최대 신축성을 얻기 위해 많은 상대적 단위( auto , em , rem , vh ), 상대 URL, 퍼센트, 또는 몇몇 인간이 읽을 수 있는 키워드( small , normal , bold )를 사용했습니다. 이 단계는 다음과 같이 모든 값들을 절대 값으로 변경하려 할 것입니다:

 

• 상대적 단위는 적절한 선호 크기에 곱해져 절대 값으로 만들어집니다
• 몇몇 키워드는 정의에 따라 대체됩니다
• 퍼센트는 참조 값에 의해 곱해집니다
• 상대 URL은 절대 URL로 해결됩니다

 

이 단계는 속성 값을 문서 배치, 네트워크 요청 해결, 또는 상위 항목을 제외한 어떤 곳에서의 탐색 없이 속성 값을 최대한 해결합니다.

 

5. 서식 변경

이 단계는 모든 문서의 서식을 변경하고 문서의 레이아웃에 사용되는 절대적 이론상의 값을 계산하는 노력을 한 이유에 관한 이전 단계로부터 남은 작업을 마무리합니다.

 

이 단계는 특별히 요소, 자동 레이아웃, 또는 플렉스 레이아웃 사이에 상대적 조화와 같은 사례에 집중합니다. 이것은 많은 계산을 요구하고 브라우저에 사용할 수 있게 거의 완벽하게 사용 가능한 절대 값을 산출해야 합니다.

 

6. 변환

이 마지막 단계는 실제 그려지기 이전 브라우저 엔진, 미디어 유형, 기기 픽셀 밀도, 또는 운영 체제와 같은 브라우저 환경을 기반으로 한 수정 사항들을 만듭니다.

 

몇몇 공통된 수정 사항들은 소수점 값을 정수 값으로 반올림하거나 또는 적용가능한 폰트를 바탕으로 폰트 사이즈를 반올림하는 것입니다.

 

 

이 글은 예측 가능한 방법 내에 있는 여러 자원들로 부터 CSS 스타일들의 구문을 분석할 수 있는 방법인 abstract 방법에 초점이 맞춰져 있습니다. 이러한 흐름을 이해하는 건 더 우아하고 유지 보수 가능한 코드를 작성하는 데 도움을 줍니다. 또한 자신 있게 CSS 스타일을 더 쉬운 쪽으로 디버그 할 수 있게 도와줍니다.

 

브라우저에 CSS가 적용되는 실제 과정은 다릅니다. 거기엔 CSS 로딩, CSS 구문 분석, CSSOM 트리 생성 그리고 DOM 노드에 스타일 적용으로 이루어진 많은 과정들이 있습니다. 우리가 살펴본 단계들은 CSS 구문 분석 단계에서 구현되는 것들입니다.

---

원문

https://ageek.dev/how-css-works

How CSS Works Under the Hood | AGEEK

---

단어

1. sparingly
   • in a way that is careful to use or give only a little of something
2. concatenation
   • a series of things or events that are linked together
3. explicit
   • (of a statement or piece of writing) clear and easy to understand, so that you have no doubt what is meant
   • (of a person) saying something clearly, exactly and openly
4. retrieve
   • to bring or get something back, especially from a place where it should not be
   • to find and get back or information that has been stored in the memory of a computer
   • to make a bad situation better; to get back something that was lost
5. coordination
   • the act of making parts of something, groups of people, etc. work together in an efficient and organized way
   • the ability to control your movements well
6. adjustment
   • a small change made to something in order to correct or improve it
   • a change in the way a person behaves or thinks
7. implement
   • to make something that has been officially decided start to happen or be used