브라우저에서의 렌더링 이해: CSSOM

안녕하세요, 이 기사는 브라우저 렌더링에 관한 시리즈의 일부입니다. 이전 기사를 아직 읽지 않으셨다면 아래 링크를 확인해 보세요.

• 브라우저에서의 렌더링 이해: DOM

지난 기사에서는 웹페이지의 구조를 정의하는 DOM(Document Object Model)을 통해 브라우저에서 HTML이 어떻게 처리되는지 살펴보았습니다. 그러나 웹페이지는 단지 HTML로만 만들어진 것이 아니며 CSS에도 CSSOM(CSS Object Model)이라는 개체 형태의 자체 표현이 있다는 사실을 많은 사람들이 아직 모르고 있습니다.

브라우저는 DOM과 함께 CSSOM을 사용하여 페이지를 구축하고 구조(HTML)와 스타일(CSS)을 결합하여 조화로운 시각적 표현을 제공합니다.

이 기사에서는 CSSOM에 대한 지식을 심화하고 CSSOM의 구조, 중요성 및 조작 방법을 이해합니다.

CSSOM이란 무엇입니까?

DOM과 마찬가지로 CSSOM은 계층적 데이터 구조이지만 그 기능은 웹 문서의 CSS를 나타내는 것입니다.

CSSOM은 스타일 파일이 로드되고 처리된 후 브라우저에 의해 생성됩니다. DOM과 별도로 구축되었지만 둘 다 함께 작동하므로 브라우저가 올바른 구조(DOM)로 페이지를 구성하고 적절한 스타일(CSSOM)을 적용할 수 있습니다.

CSSOM의 주요 기능은 페이지의 각 요소에 적용되어야 하는 스타일의 자세한 "맵"을 브라우저에 제공하는 것입니다.

아래 CSSOM의 시각적 표현을 확인하세요.

코드에서 이 표현은 다음과 같습니다.

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

그리고 이전에 본 CSSOM을 참조하는 DOM 트리는 다음과 같이 표현됩니다.

CSSOM 조작

브라우저에서는 자바스크립트를 사용하여 CSS를 조작할 수 있는 API 세트를 제공합니다. DOM API와 유사하지만 HTML이 아닌 CSS용입니다.

이 API를 사용하면 페이지의 CSS를 동적으로 읽고 조작할 수 있습니다.

스타일을 조작하는 가장 간단한 방법은 문서에 있는 스타일 속성을 이용하는 것입니다.

처음으로 CSSOM 요소에 액세스하고 조작하려면 브라우저 콘솔을 열고 다음 코드를 실행하세요.

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

위의 코드 스니펫을 실행한 후 페이지 요소를 검사하고 본문을 분석하는 것이 좋습니다. 이제 우리 몸은 인라인 스타일을 가지며 대략 다음과 같이 보일 것입니다.

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

항상 element.style.propertyname 패턴을 따라 페이지의 CSS 속성을 추가하거나 변경할 수 있습니다.

인라인 스타일을 조작하는 또 다른 방법은 스타일에 있는 몇 가지 방법을 이용하는 것입니다.

• setProperty: 이 메소드를 사용하면 인라인 속성 값을 추가하거나 변경할 수 있습니다.

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

• getPropertyValue: 이 메소드를 사용하면 인라인 속성 값에 액세스할 수 있습니다.

<p>Isso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.<br>
A mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.<br>
</p>

<pre class="brush:php;toolbar:false">console.log(document.body.style.background); // '''

• removeProperty: 이 방법을 사용하면 인라인 속성을 제거할 수 있습니다.

document.body.style.setProperty("background", "red");

// Agora execute o próximo comando

document.body.style.setProperty("background", "blue");

getCompulatedStyle은 읽기 전용으로 작동합니다. 모든 요소 또는 의사 요소의 스타일 정보에 액세스할 수 있지만 변경할 수는 없습니다.

인라인이 아닌 스타일은 어떻습니까?

인라인 스타일을 작성하는 것은 흔하지 않으므로 스타일시트에서 정의한 계산된 스타일에 액세스할 수도 있습니다. 이를 위해 스타일 시트에 직접 액세스하고 조작할 수 있습니다.

브라우저 콘솔에서 아래 코드 스니펫을 실행하세요.

document.body.style.getPropertyValue("background"); // blue

이를 사용하면 HTML 헤드에 선언된 모든 스타일 시트에 액세스할 수 있습니다.

이러한 스타일시트는 목록 형식(배열처럼 보이지만 그렇지 않음)으로 반환되며 색인을 통해 액세스할 수 있습니다.

document.body.style.removeProperty("background");

이 블로그는 Tailwind CSS로 제작되었으며 스타일시트 조작이 더 복잡해지기 때문에 지금부터는 다른 곳에서 테스트를 실행하는 것이 좋습니다.

이 페이지에 액세스하여 콘솔에서 명령을 실행하세요.

document.styleSheets;

위 코드를 실행하면 스타일 시트에 있는 모든 CSS에 액세스할 수 있습니다. 위와 동일한 논리에 따라 인덱스를 통해 요소에 액세스할 수 있습니다.

document.styleSheets[1];

위 코드에서는 페이지 본문 스타일 선언에 액세스하고 있습니다.

document.styleSheets[0].cssRules;

스타일 속성에 액세스하면 CSS 속성을 추가하거나 변경할 수 있지만 인라인 스타일을 작성하지 않아도 됩니다.

색인을 변경하고 다양한 요소의 CSS를 변경하여 이 API를 좀 더 활용해 보시기 바랍니다.

결론

DOM과 마찬가지로 CSSOM은 렌더링 프로세스를 위해 브라우저에서 사용하는 트리 모양 표현입니다.

자바스크립트를 사용하여 페이지의 모든 CSS에 접근하고 자유롭게 조작할 수 있습니다. 스타일이 지정된 구성 요소, 선형 등과 같은 CSS 도구를 이해하려면 이러한 유형의 작업을 수행하는 방법을 아는 것이 필수적입니다.

기본 지식이 가장 중요하지만, 늘 무시되고 있습니다.
웹 개발의 맥락에서는 HTML, CSS, JavaScript 및 브라우저 작동 방식을 아는 것이 필수적입니다. 이러한 탄탄한 기초를 바탕으로 이러한 기본에서 파생되는 모든 기술을 배울 수 있습니다.

매우 감사합니다!!

여기까지 와주셔서 감사합니다!

이 책을 읽으면서 새로운 것을 배우셨기를 바랍니다.

다음에 또 만나요!

참고자료

CSS 객체 모델

객체 모델 구성

CSSOM — CSS 개체 모델

CSSOM(CSS 개체 모델) 소개 및 안내

위 내용은 브라우저에서의 렌더링 이해: CSSOM의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!