HTML을 그대로 두고, 겉모습만 바꾸기
지금까지 우리는 HTML로 웹페이지의 내용을 정리했습니다. 제목은 제목답게, 문단은 문단답게, 링크는 링크답게 표시했습니다. 이것이 HTML의 중요한 역할입니다.
이제 페이지를 조금 보기 좋게 다듬어 보겠습니다. 여기서 등장하는 것이 CSS입니다.
CSS는 웹페이지의 색, 글자 크기, 여백, 너비 같은 겉모습을 정하는 도구입니다. 집으로 비유하면 HTML은 방과 문, 창문의 위치를 정하는 설계도이고, CSS는 벽지 색과 가구 간격을 정하는 인테리어에 가깝습니다.
중요한 원칙은 간단합니다.
HTML은 내용의 의미와 구조를 맡습니다.
CSS는 모양과 배치를 맡습니다.
큰 글씨가 필요하다고 해서 모든 문장을 h1로 만들면 안 됩니다. h1은 "가장 중요한 제목"이라는 의미를 가진 태그입니다. 단순히 크게 보이게 하고 싶다면 CSS로 글자 크기를 바꾸는 편이 좋습니다.
AI 생성 이미지
오늘 바꿔 볼 것
이번 장에서는 아주 적은 CSS만 사용합니다. 복잡한 디자인을 목표로 하지 않습니다. 대신 "HTML은 그대로 두고 모양만 바꿀 수 있구나"라는 감각을 얻는 것이 목표입니다.
우리가 바꿔 볼 것은 세 가지입니다.
제목 색 바꾸기
본문이 너무 넓게 퍼지지 않도록 너비 조절하기
특정 안내 문장만 배경색으로 강조하기
이 정도만 해도 페이지는 훨씬 읽기 좋아집니다.
style 태그 안에 CSS 넣기
CSS를 쓰는 방법은 여러 가지가 있습니다. 처음에는 HTML 문서의 <head> 안에 <style> 태그를 넣는 방식이 가장 가볍습니다.
아래 코드를 index.html에 복사해서 저장한 뒤 브라우저에서 열어 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>작은 가게 안내</title>
<style>
body {
max-width: 720px;
margin: 40px auto;
padding: 0 20px;
line-height: 1.6;
color: #333333;
font-family: sans-serif;
}
h1 {
color: #2f6fdd;
}
.notice {
background-color: #fff4cc;
padding: 12px;
border-radius: 8px;
}
</style>
</head>
<body>
<header>
<h1>햇살 공방</h1>
<p>손으로 만든 작은 생활 소품을 소개하는 공방입니다.</p>
</header>
<main>
<section>
<h2>운영 안내</h2>
<p>평일에는 오후 1시부터 7시까지 문을 엽니다.</p>
<p class="notice">주말 원데이 클래스는 하루 전까지 예약해 주세요.</p>
</section>
<section>
<h2>찾아오는 길</h2>
<p>지하철 2번 출구에서 도보 5분 거리에 있습니다.</p>
</section>
</main>
</body>
</html>저장한 뒤 새로고침하면 이전보다 화면이 정돈되어 보일 것입니다. 제목은 파란색이 되고, 본문은 화면 전체로 너무 넓게 퍼지지 않습니다. 예약 안내 문장은 연한 노란색 상자처럼 보입니다.
HTML 내용은 거의 그대로입니다. 달라진 것은 <style> 안에 들어간 CSS 규칙입니다.
CSS 규칙을 읽는 법
CSS는 처음 보면 낯설지만, 읽는 방식은 단순합니다.
h1 {
color: #2f6fdd;
}이 코드는 이렇게 읽으면 됩니다.
"h1에 해당하는 요소의 글자 색을 #2f6fdd로 바꾼다."
조금 더 나누어 보면 다음과 같습니다.
h1: 어떤 대상을 꾸밀지 고르는 부분입니다.{ }: 그 대상에게 적용할 꾸밈 규칙을 담는 상자입니다.color: 무엇을 바꿀지 나타냅니다. 여기서는 글자 색입니다.#2f6fdd: 어떤 값으로 바꿀지 나타냅니다. 여기서는 파란색 계열의 색상 값입니다.
CSS에서 h1, body, .notice처럼 꾸밀 대상을 고르는 부분을 선택자라고 부릅니다. 선택자는 "이 부분을 골라 주세요"라고 브라우저에게 말하는 표시입니다.
body에 적용한 스타일 살펴보기
이번 예제에서 가장 많은 규칙이 들어간 곳은 body입니다.
body {
max-width: 720px;
margin: 40px auto;
padding: 0 20px;
line-height: 1.6;
color: #333333;
font-family: sans-serif;
}body는 방문자가 실제로 보는 내용 전체를 감싸는 영역입니다. 그래서 body에 스타일을 주면 페이지 전체 분위기가 바뀝니다.
max-width: 720px;은 본문이 너무 넓어지지 않도록 최대 너비를 정합니다. 큰 모니터에서 글줄이 끝없이 길어지면 읽기 어렵습니다. 적당한 너비로 잡아 주면 눈이 덜 피곤합니다.
margin: 40px auto;는 바깥 여백을 정합니다. 위아래에는 40px만큼 여백을 주고, 좌우는 자동으로 맞추어 가운데에 오도록 합니다. 여기서 px은 화면에서 길이를 재는 단위라고 생각하면 됩니다.
padding: 0 20px;은 안쪽 여백입니다. 특히 휴대폰처럼 좁은 화면에서 글자가 화면 가장자리에 딱 붙지 않게 도와줍니다.
line-height: 1.6;은 줄 간격입니다. 줄 사이가 너무 좁으면 글이 답답해 보입니다. 본문 글에서는 1.5에서 1.8 정도만 되어도 읽기가 편해집니다.
color: #333333;은 기본 글자 색입니다. 완전한 검정인 #000000보다 조금 부드럽게 보입니다.
font-family: sans-serif;는 글꼴 종류를 정합니다. 여기서는 브라우저와 운영체제가 가진 기본 고딕 계열 글꼴을 사용하라는 뜻입니다. 처음에는 이 정도만 써도 충분합니다.
class로 특정 부분만 꾸미기
이번 예제에서 예약 안내 문장만 노란 상자로 보였습니다. 그 이유는 HTML에서 그 문단에 class를 붙였기 때문입니다.
<p class="notice">주말 원데이 클래스는 하루 전까지 예약해 주세요.</p>class는 HTML 요소에 붙이는 이름입니다. "이 문단은 일반 문단이 아니라 notice라는 이름표를 가진 문단입니다"라고 표시하는 것입니다.
그리고 CSS에서는 클래스 이름 앞에 점을 붙여서 선택합니다.
.notice {
background-color: #fff4cc;
padding: 12px;
border-radius: 8px;
}이 코드는 이렇게 읽을 수 있습니다.
"notice라는 class가 붙은 요소를 찾아서 배경색을 넣고, 안쪽 여백을 주고, 모서리를 조금 둥글게 만든다."
여기서 중요한 점은 class="notice"에는 점을 쓰지 않고, CSS에서 고를 때만 .notice처럼 점을 쓴다는 것입니다.
<p class="notice">HTML에서는 점 없이 씁니다.</p>.notice {
/* CSS에서는 점을 붙여 고릅니다. */
}위 CSS 예시의 /* ... */ 부분은 설명을 적어 둔 주석입니다. 브라우저는 주석 안의 글을 실행하지 않습니다. 지금은 "HTML에서는 점 없이, CSS에서는 점을 붙여서" 정도만 기억하면 됩니다.
클래스는 여러 곳에 반복해서 붙일 수 있습니다. 예를 들어 중요한 안내 문장이 두 개라면 둘 다 class="notice"를 붙여 같은 모양으로 꾸밀 수 있습니다.
<p class="notice">주말 원데이 클래스는 하루 전까지 예약해 주세요.</p>
<p class="notice">재료 준비 때문에 당일 취소는 어렵습니다.</p>이렇게 하면 두 문단 모두 같은 노란 안내 상자로 보입니다. 같은 성격의 내용을 같은 모양으로 보여 주고 싶을 때 class가 유용합니다.
제목 태그를 모양 때문에 쓰지 않기
HTML을 처음 배울 때 자주 하는 실수가 있습니다. 글자를 크게 만들고 싶어서 h1이나 h2를 사용하는 것입니다.
예를 들어 이런 코드는 조심해야 합니다.
<h1>오늘만 할인합니다</h1>
<h1>전화 문의는 오후 6시까지 가능합니다</h1>두 문장이 모두 페이지를 대표하는 제목이라면 상황에 따라 검토할 수 있습니다. 하지만 단순히 크게 보이게 하려고 h1을 반복해서 쓴 것이라면 좋지 않습니다. 보통 한 페이지의 대표 제목은 h1 하나로 충분합니다.
이럴 때는 HTML의 의미를 먼저 생각합니다.
페이지 전체 제목인가요? 그러면
h1이 어울립니다.큰 구역의 제목인가요? 그러면
h2가 어울립니다.본문 중에서 눈에 띄게 하고 싶은 안내인가요? 그러면
p에 class를 붙이고 CSS로 꾸미는 편이 낫습니다.
예를 들어 할인 안내가 본문 속 안내 문장이라면 이렇게 쓸 수 있습니다.
<p class="event">오늘만 모든 도자기 컵을 10% 할인합니다.</p>.event {
font-size: 20px;
font-weight: bold;
color: #d9480f;
}이렇게 하면 HTML은 "이것은 문단이다"라는 의미를 유지하고, CSS가 "조금 크게, 굵게, 주황색으로 보여 달라"는 모양을 맡습니다.
이 원칙을 지키면 페이지 구조가 깔끔해집니다. 화면낭독기 같은 보조 기술도 내용을 더 잘 이해할 수 있고, 나중에 디자인을 바꿀 때도 HTML을 크게 고치지 않아도 됩니다.
한 줄씩 바꿔 보며 감각 익히기
CSS는 처음부터 많이 외울 필요가 없습니다. 복사해서 실행한 뒤 값을 조금씩 바꿔 보는 편이 훨씬 좋습니다.
방금 만든 예제에서 아래 항목을 하나씩 바꿔 보세요.
h1 {
color: #2f6fdd;
}#2f6fdd를 #228b22로 바꾸면 제목이 초록색 계열로 바뀝니다.
body {
max-width: 720px;
}720px을 560px로 바꾸면 본문 폭이 더 좁아집니다. 900px로 바꾸면 더 넓어집니다.
.notice {
background-color: #fff4cc;
}배경색 값을 바꾸면 안내 상자의 분위기가 달라집니다. 색상 값이 낯설다면 지금은 "색을 나타내는 코드" 정도로만 이해해도 괜찮습니다.
중요한 것은 CSS를 바꿔도 HTML의 구조는 그대로 남는다는 점입니다. 문서의 의미는 HTML이 지키고, 겉모습은 CSS가 조절합니다.
문제가 생겼을 때 먼저 볼 것
CSS를 수정했는데 화면이 바뀌지 않을 때가 있습니다. 그럴 때는 어려운 문제라고 생각하기 전에 아래부터 확인해 보세요.
파일을 저장했나요?
브라우저를 새로고침했나요?
<style>태그가<head>안에 있나요?CSS 속성 끝에 세미콜론
;을 적었나요?class 이름이 HTML과 CSS에서 똑같이 적혔나요?
세미콜론은 CSS에서 각 속성 값을 구분하는 표시입니다. 특히 여러 줄로 속성을 쓸 때는 습관처럼 붙여 두는 편이 안전합니다.
그리고 class 이름은 한 글자만 달라도 적용되지 않습니다.
<p class="notice">예약 안내입니다.</p>.notcie {
background-color: #fff4cc;
}위 코드는 적용되지 않습니다. HTML에는 notice라고 썼는데 CSS에는 notcie라고 썼기 때문입니다. 이런 오타는 누구나 냅니다. 차분히 이름을 비교하면 대부분 찾을 수 있습니다.
이번 장에서 기억할 것
CSS를 조금만 더해도 페이지는 훨씬 읽기 좋아집니다. 하지만 CSS를 배우기 시작했다고 해서 HTML의 의미를 잊으면 안 됩니다.
HTML은 제목, 문단, 목록, 표, 구역처럼 내용의 역할을 정합니다. CSS는 그 내용을 어떤 색으로, 어떤 너비로, 어떤 간격으로 보여 줄지 정합니다.
가장 좋은 흐름은 이렇습니다.
먼저 HTML로 내용을 의미 있게 정리합니다.
그다음 CSS로 보기 좋게 다듬습니다.
특정 부분만 꾸미고 싶을 때 class를 붙입니다.
글자를 크게 보이게 하려고 제목 태그를 남용하지 않습니다.
이제 우리는 HTML로 페이지의 뼈대를 만들고, 아주 조금의 CSS로 첫인상을 다듬을 수 있게 되었습니다. 다음에는 지금까지 배운 내용을 모아 하나의 완성된 페이지를 만들어 보겠습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.