CSS 연결과 선택자

HTML이 제목, 문단, 이미지처럼 페이지의 내용을 구성한다면, CSS는 그 내용이 화면에 어떻게 보일지 정합니다. 이번 강의에서는 기존 자기소개 페이지에 CSS 파일을 연결하고, 제목과 소개 영역에 서로 다른 스타일을 적용합니다.

실습이 끝나면 브라우저에서 제목의 색과 소개 영역의 배경색이 달라진 모습을 확인할 수 있습니다.

1. CSS 파일 만들고 연결하기

저장해 둔 자기소개 HTML 파일과 같은 폴더에 style.css라는 새 파일을 만듭니다. 이 강의에서는 HTML 파일의 이름을 index.html이라고 가정합니다. 이름이 다르더라도 같은 방법으로 진행할 수 있습니다.

자기소개 폴더/
├── index.html
└── style.css

HTML 파일을 열고 <head>와 </head> 사이에 다음 link 요소를 추가하세요. 기존의 제목이나 메타 정보는 그대로 둡니다.

<head>
  <meta charset="UTF-8">
  <title>나의 자기소개</title>
  <link rel="stylesheet" href="style.css">
</head>

rel="stylesheet"는 연결할 파일이 스타일시트임을 나타냅니다. href="style.css"는 HTML 파일을 기준으로 같은 폴더에 있는 style.css를 가리킵니다. 파일 이름을 다르게 정했다면 href에도 실제 이름을 써야 합니다.

연결이 되었는지 확인할 수 있도록 style.css에 다음 내용을 저장하세요.

h1 {
  color: darkblue;
}

HTML 파일을 브라우저에서 열거나, 이미 열려 있다면 새로고침하세요. 페이지에 h1 제목이 있다면 글자색이 진한 파란색으로 표시됩니다. 예를 들어 다음 제목에 적용됩니다.

<h1>안녕하세요, 지민입니다</h1>

색이 바뀌지 않는다면 HTML과 CSS 파일을 모두 저장했는지, 두 파일이 같은 폴더에 있는지, href에 쓴 이름과 실제 파일 이름이 같은지 확인하세요. 기존 페이지에 h1이 있는지도 살펴봅니다.

2. CSS 규칙 읽기

방금 작성한 CSS는 하나의 규칙입니다.

h1 {
  color: darkblue;
}

• h1은 선택자입니다. 스타일을 적용할 대상을 고릅니다.
• color는 속성입니다. 여기서는 글자색을 바꿉니다.
• darkblue는 값입니다. 글자색을 진한 파란색으로 지정합니다.
• 중괄호 { } 안에 속성과 값을 쓰고, 둘 사이에는 콜론 :을 넣습니다. 선언 끝의 세미콜론 ;은 여러 선언을 구분합니다.

같은 선택자에 속성을 더 추가할 수도 있습니다. 다음은 제목의 색과 글자 크기를 함께 지정하는 예입니다.

h1 {
  color: darkblue;
  font-size: 32px;
}

h1처럼 HTML 요소의 이름으로 대상을 고르는 방법을 요소 선택자라고 합니다. 페이지에 h1이 여러 개 있다면 이 규칙은 각각에 적용됩니다.

3. 클래스로 소개 영역 선택하기

요소 이름만으로는 같은 종류의 요소 중 원하는 영역만 골라 꾸미기 어려울 수 있습니다. 이때 HTML에 클래스를 붙이고 CSS에서 그 클래스를 선택할 수 있습니다.

기존 자기소개 페이지에서 소개 글을 감싸는 요소를 찾으세요. 감싸는 요소가 없다면 소개 문단 주위에 다음처럼 section을 추가합니다. 문구는 자신의 페이지에 맞게 유지해도 됩니다.

<section class="intro">
  <h2>저를 소개합니다</h2>
  <p>저는 웹 페이지를 만드는 것을 배우고 있습니다.</p>
</section>

이제 style.css의 기존 규칙 아래에 다음 규칙을 추가하세요.

.intro {
  background-color: lightyellow;
}

HTML의 class="intro"는 해당 요소에 intro라는 클래스 이름을 붙입니다. CSS에서는 클래스 이름 앞에 마침표를 붙여 .intro라고 씁니다. background-color는 요소의 배경색을 지정하므로, 이 규칙은 소개 영역을 연한 노란색 배경으로 구분합니다.

파일을 저장하고 브라우저를 새로고침해 보세요. h1 제목은 파란색으로, intro 클래스를 붙인 소개 영역은 연한 노란색 배경으로 보이면 됩니다. 같은 클래스를 다른 요소에도 붙이면 그 요소에도 .intro 규칙이 적용됩니다.

선택자 비교하기

p {
  color: black;
}

.intro {
  background-color: lightyellow;
}

p는 페이지의 문단 요소를 선택하고, .intro는 intro 클래스를 가진 요소를 선택합니다. 클래스 선택자의 마침표는 CSS에서만 쓰고, HTML의 클래스 이름에는 쓰지 않는다는 점을 기억하세요.

직접 연습하기

1. 기존 자기소개 페이지에 외부 CSS를 연결하고, h1 요소의 글자색을 원하는 색으로 바꿔 보세요.
2. 소개 글을 감싸는 요소에 intro 클래스를 붙이고 배경색을 지정하세요.
3. 관심사 목록을 감싸는 요소가 있다면 interests 클래스를 붙여 보세요. style.css에 .interests 규칙을 만들고 소개 영역과 다른 배경색을 지정합니다. 관심사 목록이 아직 없다면 목록과 감싸는 요소를 직접 추가해도 좋습니다.
4. 저장하고 새로고침한 뒤 각 스타일이 의도한 영역에 적용되는지 확인하세요.

선택자가 어떤 대상을 가리키는지 말로 설명할 수 있다면 다음 단계로 넘어갈 준비가 된 것입니다. 다음 강의에서는 색상과 글꼴을 조절해 제목과 본문을 더 읽기 쉽게 만듭니다.

이번 강의의 전체 파일

앞 강의의 파일이 없다면 아래 파일로 시작해도 됩니다. 6강 전체 예제 내려받기에서 01 폴더를 열면 이 단계의 파일을 확인할 수 있습니다.

완성 화면 열기 · CSS 파일 보기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>지민의 자기소개</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <h1>안녕하세요, 지민입니다</h1>
      <p>작은 웹페이지를 만들며 배우는 기록입니다.</p>
    </header>
    <section class="intro">
      <h2>저를 소개합니다</h2>
      <p>저는 웹페이지를 만드는 것을 배우고 있습니다.</p>
      <p>오늘의 목표는 CSS로 읽기 좋은 자기소개 페이지를 완성하는 것입니다.</p>
    </section>
    <section class="interests">
      <h2>관심사</h2>
      <ul>
        <li>웹 만들기</li>
        <li>산책과 사진</li>
        <li>배운 내용을 짧게 기록하기</li>
      </ul>
    </section>
    <footer id="contact">
      <a href="mailto:hello@example.com">연락하기</a>
      <p>예제용 주소입니다. 내 페이지에서는 실제 연락 방법으로 바꾸세요.</p>
    </footer>
  </main>
</body>
</html>

h1 {
  color: darkblue;
  font-size: 32px;
}

.intro {
  background-color: lightyellow;
}

실행으로 본 결과

제목은 진한 파란색, 소개 영역은 연한 노란색으로 표시됩니다.