CSS 작동 방식
순수한 HTML 페이지는 이미 브라우저의 기본 스타일이 적용되어 도착합니다: 파란색 밑줄이 그어진 링크, 검은색 산세리프 텍스트, 크기가 단계적으로 줄어드는 제목들입니다. CSS는 이 원본 구조를 가져와서 어떻게 표시되어야 하는지 결정하는 방법입니다. 하지만 단 하나의 색상을 바꾸거나 단 하나의 상자를 이동하기 전에, 먼저 스타일이 페이지에 어떻게 도달하는지, 그리고 두 규칙이 같은 요소에 대해 서로 다른 의견을 가질 때 어떤 일이 발생하는지 알아야 합니다.
페이지에 CSS 첨부하기
페이지에 CSS를 추가하는 방법은 세 가지가 있으며, 차이는 주로 스타일을 어디에 작성하는지에 관한 것입니다.
첫 번째는 **인라인 스타일**로, style 속성을 사용하여 요소 위에 직접 작성합니다:
<p style="color: teal;">A single teal paragraph.</p>이것은 한 단락만 스타일을 지정합니다. 두 번째 방법은 페이지의 <head>에 내부 <style> 블록을 넣는 것으로, 한 번에 많은 요소를 스타일할 수 있습니다. 세 번째이자 사용해야 할 방법은 페이지에 연결된 별도의 CSS 파일입니다. 해당 파일에 스타일을 한 번 작성하면, 그것을 연결하는 모든 페이지가 그 스타일을 적용합니다. 옷장처럼 생각해보세요: 각 사람에게 하나씩 옷차림을 설명하는 대신, 복장 규정을 한 번 적어두고 모두가 따르는 것입니다.
외부 접근법의 전체 내용은 다음과 같습니다: 스타일시트를 연결하는 HTML 파일과 스타일시트 자체입니다.
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="intro">Welcome to the site.</p>
</body>/* styles.css */
.intro {
color: teal;
font-size: 1.25rem;
}
style로 요소에, <style> 블록에, 또는 <link>로 연결하는 별도 파일에 추가합니다. 별도 파일을 사용하세요. 스타일을 한 번 작성하면 그것을 연결하는 모든 페이지가 같은 모양입니다. 규칙의 구조
CSS의 한 부분은 **규칙**으로 작성되며, 모든 규칙은 같은 형태입니다. 여기 카드를 스타일하는 규칙이 있습니다:
.card {
color: navy;
padding: 16px;
}앞의 .card는 선택자입니다: 규칙이 적용되는 요소를 선택하며, 이 경우 card 클래스를 가진 모든 것입니다. 중괄호 안의 모든 것은 선언 블록입니다. 안의 각 줄(예: color: navy;)은 하나의 선언입니다: 속성(color)과 그것이 가져야 할 값(navy)이 콜론으로 구분되고 세미콜론으로 끝납니다. 전체 규칙을 문장으로 읽으세요: "모든 카드에 대해 색상을 짙은 파란색으로 하고 패딩을 16 픽셀로 만들어."
.card와 같은 선택자는 요소를 선택하고, color: navy;와 같은 각 선언은 속성과 콜론 사이에 있는 값이며 끝에 세미콜론이 있습니다. 이러한 부분을 이름 지을 수 있으면 읽는 모든 규칙이 같아 보입니다. 계단식
때때로 두 규칙이 같은 요소를 스타일하려고 하며, CSS는 어느 것이 승리하는지 결정할 방법이 필요합니다. 그 결정이 **계단식**이며, 이것이 CSS의 C가 나오는 곳입니다.
.card {
color: navy;
}
.card {
color: teal;
}두 규칙 모두 카드를 대상으로 하고 모두 색상을 설정합니다. 카드는 청록색이 되는데, 두 규칙이 같은 강도일 때, 나중에 작성된 규칙이 승리하기 때문입니다. 순서가 중요하며, 파일을 아래로 물처럼 흐르는데, 이것이 계단식이라는 이름이 나오는 곳입니다. 두 번째 동점 해소가도 있습니다: 더 구체적인 선택자가 더 일반적인 선택자를 이기므로, 카드를 정확하게 목표로 하는 규칙은 더 일반적인 규칙이 나중에 와도 더 일반적인 규칙을 재정의할 수 있습니다. 선택자 장에서 그 특이성을 자세히 만날 것입니다.
상속
상자에 색상을 설정하면, 안의 텍스트도 종종 그 색상으로 변하는데, 그 텍스트를 직접 스타일한 적이 없습니다. 그 아래로 전달되는 것을 **상속**이라고 합니다.
.site-header {
color: white;
font-family: Georgia, serif;
}헤더 안의 모든 텍스트, 제목, 링크, 태그라인이 자신의 규칙 없이도 그 흰색과 그 글꼴을 취합니다. color와 font-family가 상속된 속성이기 때문입니다. 하지만 모든 것이 아래로 전달되지는 않습니다. padding과 같은 간격 속성은 상속되지 않습니다: 헤더에 넣은 패딩은 헤더에 남아있고 안의 요소들에 나타나지 않습니다. 대략적인 가이드로, 텍스트 관련 스타일은 자식에게 흐르고, padding과 border와 같은 상자 관련 스타일은 제자리에 남아 있습니다.
color나 font-family를 설정하면 안의 텍스트가 무료로 취합니다. padding과 같은 간격은 아래로 전달되지 않고, 그것을 넣은 곳에 남아 있습니다. 대략적인 규칙: 텍스트 스타일은 자식에게 이동하고, 상자 스타일은 제자리에 남습니다.