HTML/CSS 2.1 · 2부. CSS 기초

CSS 를 붙이는 방법

규칙의 모양과, 화면에 붙이는 세 가지 방법을 봅니다.

예상 학습 시간 14분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문

개념 설명

규칙 하나의 모양

CSS 규칙은 무엇을 정하고 어떻게 할지 적습니다. 앞이 선택자, 중괄호 안이 선언입니다.

규칙의 모양

h1 {              /* 선택자 — 무엇을 */
  color: #6e56cf;   /* 속성: 값;  — 어떻게 */
  font-size: 22px;
}

선언마다 끝에 세미콜론을 붙입니다. 마지막 선언도 예외가 아닙니다. 빠뜨리면 그 선언과 다음 선언이 붙어 둘 다 무시됩니다.

최소 예제 · 편집 가능

세 가지 방법

CSS 를 화면에 붙이는 방법은 셋입니다. 아래 예제에 셋이 모두 들어 있습니다.

<style>
  /* ② 문서 안에 적기 */
  p { line-height: 1.8; }
</style>

<h1>공지사항</h1>
<p>오늘의 안내입니다.</p>
<p class="warn">마감이 곧 지납니다.</p>
<p style="font-weight: 700;">③ 태그에 바로 적기</p>

/* ① 파일로 따로 두기 — 지금 이 탭입니다 */
h1 { color: #6e56cf; }
.warn { color: #d9480f; }

방법	적는 곳	언제
① 외부 파일	`style.css`	기본입니다. 여러 화면이 함께 사용합니다.
② 문서 안	`<style>`	그 화면에서만 쓰는 규칙입니다.
③ 태그에 바로	`style="…"`	거의 사용하지 않습니다.

상세 사용법

외부 파일을 연결하기

파일로 따로 두려면 head 안에 link 를 넣습니다. 1.1 에서 "CSS 파일을 만들었는데 화면이 그대로다" 라고 한 것이 이 줄을 빠뜨린 경우입니다.

index.html

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

rel="stylesheet" 는 이 파일이 스타일이라는 표시입니다. 빠뜨리면 읽지 않습니다.
href 의 주소는 링크와 같은 규칙입니다(1.5).
link 는 닫는 태그가 없습니다.

파일로 두는 것이 기본인 까닭은 화면이 여러 장일 때 드러납니다. 색을 한 번 바꾸면 그 파일을 읽는 모든 화면이 함께 바뀝니다. 문서 안에 적으면 화면마다 찾아 고쳐야 합니다.

상세 사용법

주석

CSS 의 주석은 /* */ 하나뿐입니다. 여러 줄에 걸칠 수 있고, // 는 주석이 아닙니다.

style.css

/* 머리말 색을 브랜드 색으로 맞춥니다 */
h1 { color: #6e56cf; }

/* 잠시 꺼 둡니다
h2 { color: red; }
*/

흔한 실수

세 가지

세미콜론을 빠뜨립니다. 그 선언과 다음 선언이 이어져 둘 다 무시됩니다. 오류가 나지 않아 왜 안 먹는지 보이지 않습니다. 스타일이 하나만 안 들으면 그 윗줄부터 확인하십시오.
rel="stylesheet" 를 빠뜨립니다. 브라우저가 그 파일을 스타일로 보지 않아 통째로 무시합니다.
style="…" 로 다 해결합니다. 당장은 빠르지만 같은 값을 여기저기 적게 되고, 나중에 CSS 파일의 규칙이 듣지 않는 원인이 됩니다(2.8).

실습 문제

직접 해보기

1. 세 가지 방법으로 같은 결과 만들기 난이도 하

위 예제에서 .warn 의 글자를 굵게 만드십시오. CSS 탭에서 하는 것이 가장 좋은 방법입니다.

굵게 하는 속성은 font-weight 이고 값은 700 입니다.

.warn { color: #d9480f; font-weight: 700; }

요약

정리

규칙은 선택자 { 속성: 값; } 모양입니다.
선언마다 세미콜론을 붙입니다. 빠뜨리면 그 선언과 다음 선언이 함께 무시됩니다.
파일로 따로 두는 것이 기본입니다. link rel="stylesheet" 로 연결합니다.
주석은 /* */ 뿐입니다.