css

css

CSS(종속형 스타일 시트)는 HTML이나 XML로 작성된 문서가 화면, 종이, 음성 등 여러 매체에서 어떻게 표시될지를 기술하는 스타일 시트 언어이다. 문서의 콘텐츠와 표현을 분리하므로 같은 HTML 구조에 서로 다른 스타일을 적용할 수 있다.

CSS(종속형 스타일 시트)는 HTML이나 XML로 작성된 문서가 화면, 종이, 음성 등 여러 매체에서 어떻게 표시될지를 기술하는 스타일 시트 언어이다.^[1] 문서의 콘텐츠와 표현을 분리하므로 같은 HTML 구조에 서로 다른 스타일을 적용할 수 있다.^[4]

1. 개요

CSS는 글꼴·색상·크기와 콘텐츠 간격을 조정하고, 페이지를 여러 열로 나누거나 애니메이션을 더하는 데 쓰인다.^[1] 예를 들어 웹 화면용 스타일과 종이에 출력할 때의 표현을 따로 지정할 수 있다.^[1]^[4]

브라우저는 HTML 문서와 연결된 CSS를 함께 처리해 페이지를 표시한다.^[2] CSS는 오픈 웹의 핵심 언어 중 하나이며, W3C 명세가 여러 브라우저의 표준으로 기능한다.^[1]

2. CSS 규칙의 구성과 적용

CSS 규칙은 어떤 문서 요소에 스타일을 적용할지 선택자(selector)로 지정하고, 적용할 속성과 값을 선언으로 적는다.^[1]^[2] 예를 들어 p { color: blue; }에서 p는 선택자이고 color: blue는 문단의 글자색을 지정하는 선언이다.

선택자는 요소·클래스·ID 등의 유형으로 DOM에서 대상 노드를 찾는 기준이 된다.^[2] 브라우저는 선택자에 따라 규칙을 분류하고 해당 노드에 스타일을 연결해 표시 과정에 반영한다.^[2]

3. 브라우저의 문서 렌더링 과정

브라우저는 HTML을 불러와 메모리 안의 문서 표현인 DOM으로 변환한 뒤, 문서에 연결된 CSS 같은 리소스를 가져온다.^[2] 그런 다음 CSS 선택자를 바탕으로 적용할 규칙을 DOM 노드에 연결해 렌더 트리를 구성한다.^[2]

렌더 트리는 표시할 구조로 배치되고, 마지막에 화면에 그려진다.^[2] 이 과정은 브라우저가 페이지를 처리하는 방식을 단순화한 설명이며, 실제 처리 방식은 브라우저마다 다를 수 있다.^[2]

브라우저가 모르는 속성이나 값을 만나면 해당 선언을 건너뛰고 다음 선언을 처리한다.^[2] 선택자를 이해하지 못하면 그 선택자가 포함된 규칙 전체를 무시하고 다음 규칙으로 넘어간다.^[2]

4. 종속과 상속 및 기본 스타일

CSS 학습에서 종속과 상속은 선택자 유형, 단위와 크기, 배경과 테두리 등과 함께 다루는 기초 개념이다.^[1] 선택자로 요소·클래스·ID 등을 지정하면 브라우저가 그 기준으로 DOM에서 스타일을 적용할 노드를 찾는다.^[2]

속성이나 값의 철자가 틀렸거나 브라우저가 아직 기능을 지원하지 않으면 해당 선언은 무시될 수 있다.^[2] 예를 들어 color를 colour로 잘못 적어도 같은 규칙의 유효한 글꼴 굵기와 크기 선언은 적용될 수 있다.^[2]

5. 미디어 쿼리와 장치별 표현

미디어 쿼리는 사용자 에이전트나 출력 장치, 주변 환경의 특성에 따라 스타일을 적용하는 조건이다.^[3] 예를 들어 @media (hover: hover)는 주 입력 방식으로 요소 위에 호버할 수 있는 환경을 조건으로 삼는다.^[3]

뷰포트 너비 같은 범위 조건은 min-·max- 접두사나 범위 비교 구문으로 지정할 수 있다.^[3] 예를 들어 @media (max-width: 1250px)는 뷰포트 너비가 1250px 이하일 때 적용되며, @media (width <= 1250px)로도 표현할 수 있다.^[3]

미디어 기능에는 범위형과 이산형이 있다.^[3] orientation은 landscape 또는 portrait 값을 가지므로, @media print and (orientation: portrait)처럼 세로 방향의 인쇄 조건을 지정할 수 있다.^[3]