CSS(Cascading Style Sheets)란 무엇인가?

CSS는 문서가 사용자에게 표시되는 방식 (스타일, 레이아웃 등)을 지정하는 언어입니다. 문서는 대개 MarkUp언어를 사용하여 구조화된 텍스트 파일로, HTML이 가장 일반적인 MarkUp언어이지만 SVG또는 XML과 같은 다른 MarkUp언어도 사용됩니다.

사용자에게 문서를 제시한다는 것은 사용자를 위해 유용한 양식으로 변환한다는 것을 의미하며, Firefox, Chrome 등 브라우저는 모니터, 프로젝터 또는 프린터에서 시각적으로 문서를 표시하도록 설계되었습니다.

CSS는 규칙 기반 언어입니다. 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하며, 다음과 같은 규칙을 가지고 있습니다.

문서에 CSS를 추가하는 다양한 방법이 있으며, 그 중 가장 기본적인 방법으로,문서의 head 에서 연결하는 방법입니다.

<head>
	<link rel="stylesheet" href="styles.css" />
</head>

이 <link> 요소는 rel 속성을 사용하는 스타일 시트와 해당 스타일 시트의 위치를 href 속성의 값으로 브라우저에게 알려줍니다. styles.css 에 규칙을 추가하여 CSS 가 작동하는지 테스트 할 수 있으며, CSS 파일에 다음을 추가합니다.

h1 {
  color: red;
}

HTML 및 CSS 파일을 저장하고 웹 브라우저에서 페이지를 다시 로드 하면, 문서 상단의 h1의 제목이 이제 빨간색으로 표시됩니다.

브라우저가 문서를 표시할 때, 문서의 콘텐츠와 해당 스타일 정보를 결합해야 합니다. 아래 나열된 여러 단계로 문서를 처리하며, 대략적인 다음과 같은 흐름을 지니게 됩니다.

브라우저는 HTML (예: 네트워크에서 HTML 을 수신) 을 로드합니다.
HTML 을 DOM (Document Object Model) 로 변환합니다.
DOM 은 컴퓨터 메모리의 문서를 나타냅니다.
브라우저는 HTML 문서에 연결된 임베디드 이미지, 동영상, 링크된 CSS같은 대부분의 리소스들을 가져옵니다.
브라우저는 가져온 CSS를 구문 분석하고 선택자 유형별로 다른 규칙을 다른 "버킷" 으로 정렬합니다.
예: 요소, 클래스, ID 등 찾은 선택자를 기반으로 DOM의 어느 노드에 어떤 규칙을 적용해야 하는지 결정하고, 필요에 따라 스타일을 첨부합니다. (이 중간 단계를 렌더 트리라고 합니다)
렌더 트리는 규칙이 적용된 후에 표시되어야 하는 구조로 배치됩니다.
페이지의 시각적 표시가 화면에 표시됩니다. (이 단계를 페인팅 이라고 합니다)

다음은 간단한 CSS 예제로 다양한 스타일을 작성할 수 있습니다.

h1 {
  color: blue;
}

.special {
  color: blue;
}

.box {
  width: 500px;
  width: calc(100% - 50px);
}

...

CSS 방법론이란? OOCSS, BEM, SAMCSS, Atomic CSS (0)	2023.11.07

VIAE의 IT 이모저모