CSS는 어떻게 동작하는가

일반 HTML 페이지는 이미 브라우저 자체의 기본 스타일이 적용된 채로 나타납니다. 파란색 밑줄이 있는 링크, 세리프 없는 검은색 텍스트, 크기가 단계적으로 줄어드는 제목들처럼 말이죠. CSS는 이런 기본 구조를 가져와서 원하는 모양으로 바꾸는 도구입니다. 하지만 색상 하나를 바꾸거나 박스 하나를 옮기기 전에, 먼저 스타일이 애초에 어떻게 페이지에 도달하는지, 그리고 두 규칙이 같은 요소를 두고 충돌할 때 무슨 일이 벌어지는지 알아야 합니다.

페이지에 CSS 연결하기

페이지에 CSS를 추가하는 방법은 세 가지이며, 그 차이는 대부분 스타일을 어디에 작성하느냐에 있습니다.

첫 번째는 **인라인 스타일(inline style)**로, style 속성을 이용해 요소에 직접 작성합니다.

html

<p style="color: teal;">A single teal paragraph.</p>

이 방식은 딱 그 문단 하나에만 스타일이 적용됩니다. 두 번째 방법은 페이지의 <head> 안에 내부 <style> 블록을 넣는 것으로, 이 방법을 쓰면 여러 요소를 한꺼번에 스타일링할 수 있습니다. 세 번째, 그리고 여러분이 실제로 선택해야 할 방법은 페이지에 별도의 CSS 파일을 연결하는 것입니다. 이 파일에 스타일을 한 번만 작성해두면, 이 파일을 연결한 모든 페이지가 그 스타일을 그대로 사용하게 됩니다. 옷장을 떠올려 보세요. 사람마다 일일이 옷차림을 설명하는 대신, 드레스 코드를 한 번 정해두면 모두가 그것을 따르는 것과 같습니다.

외부 방식을 전체 예시로 보면, 스타일시트를 연결하는 HTML 파일과 그 스타일시트 자체는 다음과 같습니다.

html

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="intro">Welcome to the site.</p>
</body>

css

/* styles.css */
.intro {
  color: teal;
  font-size: 1.25rem;
}

Juno페이지에 CSS 연결하기 CSS를 추가하는 방법은 세 가지입니다. 요소에 style로 직접 넣거나, <style> 블록에 넣거나, <link>로 연결하는 별도 파일에 넣는 방법입니다. 별도 파일을 사용하세요. 스타일을 한 번만 작성하면 그 파일을 연결한 모든 페이지가 똑같은 모습이 됩니다.

규칙의 구조

CSS 코드 한 조각은 **규칙(rule)**이라는 형태로 작성되며, 모든 규칙은 같은 모양을 가집니다. 카드를 스타일링하는 규칙을 하나 보겠습니다.

css

.card {
  color: navy;
  padding: 16px;
}

맨 앞의 .card는 **선택자(selector)**로, 이 규칙이 어떤 요소에 적용될지를 정합니다. 이 경우에는 card 클래스를 가진 모든 요소가 대상입니다. 중괄호 안에 있는 모든 내용은 선언 블록입니다. color: navy;처럼 그 안에 있는 각 줄은 하나의 선언으로, 속성(color)과 그 속성에 부여할 값(navy)이 콜론으로 이어지고 세미콜론으로 끝납니다. 규칙 전체를 문장처럼 읽어 보면 이렇습니다. "모든 카드에 대해, 색상을 navy로 하고 패딩을 16픽셀로 하라."

Juno규칙의 구조 규칙은 선택자와 중괄호 안의 선언들로 이루어집니다. .card 같은 선택자가 요소를 고르고, color: navy; 같은 각 선언은 속성과 값이 콜론으로 이어지고 끝에 세미콜론이 붙습니다. 이 구성 요소들의 이름을 알고 나면 앞으로 읽는 모든 규칙이 같은 모양으로 보일 것입니다.

캐스케이드

때로는 두 규칙이 같은 요소를 두고 스타일을 겨루는데, CSS는 이 중 어느 쪽이 이길지 결정할 방법이 필요합니다. 이 결정 과정을 **캐스케이드(cascade)**라고 부르며, CSS의 C가 바로 여기서 나옵니다.

css

.card {
  color: navy;
}

.card {
  color: teal;
}

두 규칙 모두 카드를 대상으로 하고 둘 다 색상을 지정합니다. 카드는 결국 teal이 되는데, 두 규칙의 강도가 같을 때는 나중에 작성된 규칙이 이기기 때문입니다. 순서는 중요하며, 물이 흐르듯 파일 아래로 흘러내려간다는 점에서 캐스케이드라는 이름이 붙었습니다. 여기에는 두 번째 판정 기준도 있습니다. 더 구체적인 선택자가 더 일반적인 선택자를 이기므로, 카드를 정확히 겨냥한 규칙은 더 나중에 나온 규칙이라도 더 넓은 규칙을 이길 수 있습니다. 이 구체성에 대해서는 선택자 장에서 자세히 다룹니다.

Juno캐스케이드 캐스케이드는 두 규칙이 같은 것을 스타일링할 때 CSS가 승부를 가리는 방식입니다. 규칙의 강도가 같다면 나중에 작성된 쪽이 이기므로 순서가 중요합니다. 더 구체적인 선택자는 더 일반적인 선택자를 이길 수도 있는데, 이 부분은 선택자 장에서 다룹니다.

상속

박스에 색을 지정하면 그 안의 텍스트도 직접 스타일링하지 않았는데도 종종 같은 색으로 바뀝니다. 이렇게 스타일이 아래로 전달되는 것을 **상속(inheritance)**이라고 부릅니다.

css

.site-header {
  color: white;
  font-family: Georgia, serif;
}

헤더 안의 모든 텍스트, 제목이든 링크든 태그라인이든, 자기만의 규칙 없이도 그 흰색과 그 글꼴을 그대로 물려받는데, color와 font-family가 상속되는 속성이기 때문입니다. 다만 모든 것이 아래로 전달되지는 않습니다. padding 같은 여백 속성은 상속되지 않습니다. 헤더에 준 패딩은 헤더에만 남아 있고 그 안의 요소들에는 나타나지 않습니다. 대략적인 기준으로, 텍스트 관련 스타일은 자식에게 흘러 내려가고, 여백이나 테두리 같은 박스 관련 스타일은 그 자리에 머무릅니다.

Juno상속 상속은 텍스트 스타일이 박스 안의 요소들로 흘러 내려가는 것입니다. 헤더에 color나 font-family를 지정하면 그 안의 텍스트가 별도의 작업 없이도 그것을 그대로 물려받습니다. padding 같은 여백은 아래로 전달되지 않고 지정한 곳에 머무릅니다. 대략적인 규칙은, 텍스트 스타일은 자식에게 이동하고 박스 스타일은 그 자리에 머무른다는 것입니다.

CSS는 어떻게 동작하는가 ​

페이지에 CSS 연결하기 ​

규칙의 구조 ​

캐스케이드 ​

상속 ​

CSS는 어떻게 동작하는가

페이지에 CSS 연결하기

규칙의 구조

캐스케이드

상속