브라우저 기본 스타일과 Styles 창

브라우저 기본 스타일은 브라우저가 모든 페이지에 먼저 입히는 CSS입니다. CSS를 한 줄도 쓰지 않은 페이지에도 제목이 크고 목록 앞에 점이 있는 까닭입니다. 우리 CSS는 그 위에 덧칠합니다 — 우리가 적은 속성만 바뀌고, 나머지는 기본 스타일 그대로 남습니다.

그래서 CSS가 생각대로 안 먹을 때는 우리 규칙만 볼 것이 아니라, 남아 있는 기본 스타일과 버려진 선언을 함께 봐야 합니다. 그 셋을 한 화면에 보여 주는 곳이 개발자 도구 Styles 창입니다. 이 레슨 끝에서 CSS가 안 먹을 때 찾는 차례를 정리합니다.

ul {  list-style-type: none;}

h1 {  font-size: 24;}

<ul>  <li>밥 2공기</li>  <li>잘 익은 김치 1컵</li></ul>

1기본 스타일 — 처음부터 있던 모양

아래 조각에는 CSS가 한 줄도 없습니다.

<h1>김치볶음밥</h1>
<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>
<a href="index.html">목록으로</a>

이 모양은 모두 크롬의 기본 스타일이 만든 것입니다.

em 단위는 11단원, 안쪽 여백과 바깥 여백은 박스 모델 단원에서 배웁니다. 괄호 안의 크기는 브라우저 글자 크기 설정이 처음 그대로일 때 값이고, 글자 크기를 키웠다면 그만큼 큽니다. 가로로 쓰는 페이지에서 padding-inline-start는 왼쪽 안쪽 여백이라, 잰 값 칸에는 padding-left로 보입니다. 기본 스타일은 브라우저마다 조금씩 다릅니다 — 이 표는 크롬 기준입니다.

2우리 규칙은 기본 스타일을 이긴다

같은 요소의 같은 속성에 기본 스타일과 우리 규칙이 함께 닿으면 우리 규칙이 이깁니다.

브라우저 규칙 5. 한 요소의 한 속성에 선언이 여럿 닿으면 하나만 이깁니다. 기본 스타일보다 우리 CSS가 이깁니다.

우리 규칙끼리 겨룰 때와 닿는 선언이 없을 때는 9단원 '규칙이 겹칠 때'에서 이 규칙에 이어 붙입니다.

이기는 것은 속성 하나씩입니다. 기본 스타일의 규칙이 통째로 지는 것이 아니라, 우리가 적은 속성만 덮고 나머지는 남습니다. 이것을 덧칠이라고 부릅니다.

<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>
<a href="index.html">목록으로</a>

ul {
  list-style-type: none;
}

a {
  color: #005bb5;
}

• 목록은 점만 사라지고 안쪽 여백 40px은 남아 여전히 안으로 들어가 있습니다. 들여 쓴 틈은 점이 아니라 기본 스타일의 안쪽 여백이 만든 것이고, 우리는 그 속성을 적지 않았습니다.
• 링크는 글자색만 진한 파랑이 되고 밑줄은 그대로입니다.

list-style-type은 목록 앞 표시를 정하는 속성입니다. 줄여서 list-style: none으로 쓰는 코드도 많이 만나는데, 한 줄로 속성 여럿을 정하는 짧게 적기라 여백 짧게 적기에서 다룹니다.

3Styles 창 읽기

개발자 도구 Styles 창은 고른 요소에 닿은 규칙을 모두 보여 줍니다. 바꿔 볼 요소 위에서 마우스 오른쪽 단추 → 검사를 누르면 Elements 패널(한국어 화면에서는 '요소')에서 그 요소의 줄이 짚이고, 같은 패널의 Styles 창(한국어 화면에서는 '스타일')에 그 요소에 닿은 규칙이 나옵니다.

규칙은 위가 이긴 쪽, 맨 아래가 기본 스타일인 차례로 놓입니다. 위 점수판과 같은 차례입니다. 알아들었지만 지금은 효과가 없는 선언은 흐린 글자로 보이는데, 그 까닭은 뒤 단원에서 만납니다(크롬 기준 — Chrome DevTools 문서).

Styles 창에서는 값을 바로 바꿔 볼 수 있습니다.

바꾼 값은 화면에 바로 그려지지만, 바뀐 것은 브라우저 안의 사본이지 style.css 파일이 아닙니다. 새로고침하면 브라우저가 파일을 다시 읽어 파일에 적힌 값으로 돌아옵니다. 그래서 순환은 늘 같습니다 — Styles 창에서 바꿔 보기 → style.css에 옮겨 적기 → 저장 → 새로고침.

4안 먹을 때 찾는 차례

CSS가 생각대로 안 먹을 때는 브라우저가 일하는 차례대로 봅니다. 파일을 받고, 나무를 짓고, 규칙을 요소에 대고, 값을 정하는 차례입니다. 앞에서 괜찮다고 본 것은 다시 보지 않아도 됩니다.

다섯째 차례(상자와 배치)는 박스 모델 단원에서 더합니다. 이 단원 끝 레시피 한 페이지 만들기의 마지막 하위 목표가 이 차례로 페이지를 확인합니다.

예제

찾는 차례로 찾기 — 재료 제목만 색이 안 바뀐다

제목 둘을 진한 파랑으로 칠하려 했는데 '재료' 제목만 검정입니다.

<h1>김치볶음밥</h1>
<h2>재료</h2>

h1 {
  color: #005bb5;
}

h2 {
  color: 005bb5;
}

찾는 차례대로 봅니다.

1. 파일이 닿았나: 같은 style.css의 h1 규칙이 먹었으니 파일은 닿았습니다. 지나갑니다.
2. 요소가 나무에 있나: Elements 패널에 h2 줄이 있습니다. 지나갑니다.
3. 규칙이 닿았나: h2를 고르면 Styles 창에 h2 규칙이 보입니다. 닿았습니다.
4. 알아들었나 · 이겼나: color: 005bb5 줄에 취소선과 경고 표시가 함께 붙어 있습니다. 알아듣지 못해 버린 선언입니다. 값 앞의 # 기호가 빠졌습니다.

4번에서 찾았습니다. #005bb5로 고치면 '재료' 제목도 진한 파랑이 됩니다.

자주 틀리는 곳

틀린 생각: Styles 창에서 고친 값은 파일에도 남는다.

Styles 창에서 바꾼 값은 화면에 바로 보여서 저장된 것처럼 보입니다. 바뀐 것은 브라우저가 파일을 읽어 만든 사본입니다. 새로고침하면 브라우저가 style.css를 다시 읽어 파일에 적힌 값으로 돌아오고, 창을 닫으면 고친 값은 남지 않습니다.

맞는 규칙: 마음에 든 값은 style.css에 옮겨 적고 저장한 뒤 새로고침해 확인합니다.

틀린 생각: Styles 창의 취소선은 모두 버린 선언이다.

<h1>김치볶음밥</h1>
<h2>재료</h2>

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20;
}

h1을 고르면 기본 스타일의 font-size: 2em에 취소선만 그어져 있습니다. 우리 24px에 진 선언이라 고칠 곳이 아닙니다. h2를 고르면 우리 font-size: 20에 취소선과 경고 표시가 함께 붙어 있습니다. 단위가 없어 버린 선언이라, 이번에는 기본 스타일의 24px이 남았습니다(크롬 기준).

맞는 규칙: 취소선만 그은 선언은 진 선언, 경고 표시까지 붙은 선언은 버린 선언입니다. 고칠 곳은 버린 쪽입니다.

틀린 생각: 기본 스타일을 지우려면 !important를 붙여야 한다.

2절 예제의 ul 규칙은 !important 없이도 기본 스타일의 점을 지웠습니다. 우리 규칙은 이미 기본 스타일을 이깁니다(브라우저 규칙 5). !important는 우리 규칙끼리의 이기는 차례를 흐려 나중에 고치기 어렵게 만듭니다. 언제 쓰는지는 9단원 !important 대신에서 봅니다.

맞는 규칙: 기본 스타일을 바꾸려면 그 속성을 우리 규칙에 적기만 하면 됩니다.

확인 문제

1. 아래 코드의 h1 규칙에 font-size: 16px;을 더하면 제목의 크기와 굵기는 어떻게 될까요?

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

h1 {
  color: #005bb5;
}

• ① 크기는 16px, 굵기도 보통 — 문단과 똑같아진다
• ② 크기는 16px, 굵기는 굵게 그대로
• ③ 크기는 32px 그대로

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

h1 {
  color: #005bb5;
  font-size: 16px;
}

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

h1 {
  color: #005bb5;
  
}

2. CSS가 생각대로 안 먹을 때 찾는 차례입니다.

(가) 넷의 차례가 섞였습니다. 먼저 볼 것부터 기호를 늘어놓으세요.

• ㉠ 그 요소에 규칙이 닿았나
• ㉡ 파일이 닿았나
• ㉢ 알아들었나 · 이겼나
• ㉣ 요소가 나무에 내 생각대로 있나

(나) '파일이 닿았나'가 맨 앞인 까닭을 고르세요.

• ① 브라우저는 파일을 받은 뒤에 나무를 짓고 값을 정하기 때문
• ② 파일 문제가 가장 흔하기 때문
• ③ 파일이 없으면 개발자 도구가 열리지 않기 때문

3. 플로우 카페 메뉴판입니다. 가격 줄(li)을 빨갛게 하려 했는데 그대로입니다. 개발자 도구에서 li를 고르니 Styles 창에 빨강 규칙이 보이지 않습니다. CSS 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

<h2>플로우 카페</h2>
<ul>
  <li>커피 4000</li>
  <li>라테 4500</li>
</ul>

h2 {
  color: #005bb5;
}

ll {
  color: #d70015;
}

<h2>플로우 카페</h2>
<ul>
  <li>커피 4000</li>
  <li>라테 4500</li>
</ul>

h2 {
  color: #005bb5;
}

li {
  color: #d70015;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 예제를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 개발자 도구에서 ul을 고르고, Styles 창 아래쪽 user agent stylesheet 규칙에서 list-style-type: disc⁠에는 취소선이 있고 padding-inline-start: 40px⁠에는 없는 것을 찾습니다. 그다음 위쪽 우리 ul 규칙의 none을 square로 바꾸면 목록이 어떻게 될지 먼저 적고 바꿔 봅니다. 새로고침하면 다시 none으로 돌아오는 것도 확인합니다.