반응형
지금까지 만든 HTML 페이지는 구조적으로는 완벽했지만,
어딘가 밋밋했죠?
이유는 바로 “디자인”이 빠져 있었기 때문이에요.
HTML이 웹페이지의 뼈대라면,
CSS(Cascading Style Sheets)는 그 뼈대에 색과 옷을 입히는 도구예요.
1. CSS란 무엇인가?
CSS (Cascading Style Sheets) 는 HTML 요소에 스타일(색, 폰트, 크기 등)을 지정하는 언어입니다.
HTML이 “무엇을 보여줄지” 정한다면,
CSS는 “어떻게 보여줄지”를 결정합니다.
예를 들어 아래 코드를 보세요.
<p style="color: blue;">이 문장은 파란색입니다.</p>
<p style="color: red;">이 문장은 빨간색입니다.</p>
<p style="color: red;">이 문장은 빨간색입니다.</p>
결과:
이 문장은 파란색입니다.
이 문장은 빨간색입니다.
HTML은 내용(<p>), CSS는 스타일(color: red)을 담당합니다.
2. CSS를 HTML에 적용하는 세 가지 방법
| 인라인 스타일 (Inline) | 태그 안에 직접 스타일 지정 | <p style="color:red;">텍스트</p> |
| 내부 스타일 (Internal) | <head> 안에 <style> 태그로 작성 | <style>p { color: blue; }</style> |
| 외부 스타일 (External) | CSS 파일을 따로 만들어 연결 | <link rel="stylesheet" href="style.css"> |
가장 추천하는 방식은 외부 스타일 시트입니다.
왜냐하면, 여러 페이지에서 하나의 CSS 파일을 재사용할 수 있기 때문이에요.
3. 인라인 스타일 — 가장 간단한 방법
HTML 태그 안에 style 속성을 직접 작성하는 방법입니다.
<h1 style="color: darkgreen;">HTML + CSS 첫 만남</h1>
<p style="font-size: 18px; color: gray;">이건 인라인 스타일 예시입니다.</p>
<p style="font-size: 18px; color: gray;">이건 인라인 스타일 예시입니다.</p>
하지만 코드가 길어질수록 가독성이 떨어지기 때문에
작은 수정이나 테스트용으로만 쓰는 것이 좋아요.
4. 내부 스타일 시트 — 한 문서 안에서 통일감 주기
<head> 태그 안에 <style> 태그를 넣고 CSS를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일 예시</title>
<style>
body {
background-color: #f8f9fa;
font-family: "맑은 고딕", sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
color: #555;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>
<p>이 페이지는 내부 스타일을 사용하여 꾸며졌어요.</p>
</body>
</html>
결과 설명
- body의 배경이 연한 회색으로 바뀌고,
- 글꼴이 “맑은 고딕”으로 변경됩니다.
- <h1>은 가운데 정렬, <p>는 회색톤과 넓은 줄 간격으로 표시됩니다.
다음에 가장 많이 사용하는 외부 스타일에 관해서 이야기 하도록 하겠습니다.
반응형
'CODING' 카테고리의 다른 글
| [HTML 시리즈 12] 색상, 글꼴, 여백 스타일링 기본기 (0) | 2025.11.09 |
|---|---|
| [HTML 시리즈 11-2 ] CSS와 HTML의 만남 — 디자인 입히기 시작 (0) | 2025.11.04 |
| [HTML 시리즈 10] HTML 문서 구조 분석 (<head>와 <body>의 차이) (0) | 2025.10.23 |
| [HTML 시리즈 9] <div>와 <span>의 차이 완벽 이해 (0) | 2025.10.22 |
| [HTML 시리즈 8] 입력창(<input>, <form>)으로 사용자 입력 받기 (1) | 2025.10.21 |
