CSS - 스타일시트란 무엇일까?

CSS(Cascading Style Sheets)는 워드 프로세서에서 사용하는 스타일 기능을 웹으로 가져온 것입니다. CSS를 사용하면 DOM(Document Object Model)에 스타일(Style)을 적용할 수 있습니다. 정확히는 CSS를 사용하면 HTML 문서에 디자인을 적용할 수 있습니다. CSS는 HTML과 같이 사용되며, HTML에 정의된 태그(Tag)가 보여주는 디자인을 재정의해서 HTML의 시각적 요소를 담당하는 언어입니다.

 

 예를 들어 주제롤 표현하는 <h1>이라는 태그를 보여주는 방법은 브라우저(Chrome, Safari, Firefox)가 정의하지만, CSS를 사용하면 <h1>이 표현되는 시각적인 정의를 바꿀 수 있습니다. CSS는 태그의 특성을 원하는 대로 변경이 가능합니다.

h1 {
    margin: 0px;
    text-align: center;  
}

 CSS는 HTML의 시각적인 요소를 정의하기 때문에 DOM의 구조적인 부분은 변경하지 않으며, 오로지 시각적인 부분을 재정의 합니다. DOM이 정의하는 문서의 구조적인 계층과 CSS가 정의한 디자인은 본질적으로 정의하는 부분이 다릅니다.

CSS는 어떻게 동작할까?

HTML은 브라우저와 같이 HTML의 DOM과 CSS의 구문을 분석해 랜더링이 됩니다. 화면이 그려질 때 CSS는 코드의 위치와 상관없이 분석되고 적용됩니다. 브라우저의 랜더링 방식은 매우 복잡하며, 어렵습니다. 자세한 내용은 잘 정리된 글을 확인해보시기를 추천드립니다. 화면을 그리는 방식을 이해하는 것은 화면 개발에 있어 가장 기초적이며 중요한 내용입니다.

 

 이때 가장 어려운 부분은 브라우저가 가진 렌더링 엔진이 DOM과 CSS를 분석하는 부분입니다. 렌더링 엔진에 따라 화면을 보여주는 방식이 다르기 때문에 같은 HTML이어도 보이는 화면은 조금씩 다릅니다. 이러한 차이는 사소할 수 있지만 때로는 극명한 차이를 보이거나 완전히 다른 결과를 만들기도 합니다. 예를 들어 IE9 혹은 IE11이 보여주는 화면은 Chrome을 통해 보이는 결과와 매우 다릅니다.