웹 페이지를 예쁘게 꾸미기 위해 필수인 CSS(Cascading Style Sheets).
이번 글에서는 CSS를 적용하는 3가지 방식과 기본 문법, 박스 모델, 그리고 실제 예제를 통해 단계별로 살펴봅니다.
CSS 적용 방식 3가지 비교
아래 표는 CSS를 HTML에 연결하는 대표적인 세 가지 방법을 한눈에 보여줍니다.
| 방식 | 작성 위치 | 장점 | 단점 |
| Inline | HTML 태그 안의 style 속성 | 즉시 적용, 간단한 테스트에 유용 | 재사용 어려움, 코드가 지저분해짐 |
| Internal | <head> 안의 <style> 태그 | 한 페이지 내 모든 요소에 적용 가능 | 여러 페이지에 걸친 스타일 관리 불편 |
| External | 별도 .css 파일을 <link> 태그로 연결 | 재사용성 높음, 유지보수 용이 | 초기 로딩 시 CSS 파일 로드 필요 |
CSS 기본 문법
CSS 스타일은 선택자(selector)와 속성(property), 값(value)의 쌍으로 이루어집니다.
선택자 {
속성: 값;
속성: 값;
}
예시
p {
border: 1px solid blue;
margin: 10px;
padding: 5px;
}
요소 유형과 박스 모델
HTML 요소는 레이아웃 제어를 위해 아래 세 가지 유형으로 나뉩니다:
- inline
콘텐츠 영역만큼만 차지합니다. - block
가로 전체 너비를 차지하고 줄 바꿈이 일어납니다. - inline-block
콘텐츠와 여백을 모두 차지하지만 한 줄에 여러 개 배치 가능합니다.
이 구분을 이해하면 레이아웃 설계가 훨씬 수월해집니다.
예제 코드: HTML + CSS 적용
아래 예제는 External, Internal, Inline 방식을 한 문서 안에서 함께 사용한 모습입니다.
빈 줄 포함하여 복사 후 티스토리에 붙여넣으면 코드 가독성이 유지됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 예제</title>
<!-- External 방식 -->
<link rel="stylesheet" href="./css/my_style.css">
<!-- Internal 방식 -->
<style>
* {
margin: 0;
}
body {
border: 1px solid red;
}
p {
border: 1px solid blue;
margin: 10px;
padding: 5px;
box-shadow: 1px 1px 3px black;
}
.last-song{
color: purple;
font-weight: bold;
font-size: 20px;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Inline 방식 -->
<p style="color:red;">찢어 꿰뚫듯</p>
<p>불꽃이 튀듯</p>
<p>뜨겁게 타올라보자</p>
<p>한 순간의 댄서</p>
<p>꿰뚫어 부숴버리자</p>
<p class="last-song">누구보다도 반짝이도록</p>
<p class="last-song">이 목숨을 불태워라</p>
</body>
</html>코드 분석 및 팁
- External 방식은 페이지 상단의 <link> 태그로 로드합니다.
- Internal 방식은 <style> 태그 안에 선언하며, 전체 문서에 적용됩니다.
- Inline 방식은 각 태그 안 style 속성으로 즉시 스타일을 지정합니다.
- 클래스(.last-song)를 이용해 특정 문단만 별도 스타일링이 가능합니다.
'HTML, CSS' 카테고리의 다른 글
| CSS로 간단한 가로 메뉴 만들기 (5) | 2025.08.08 |
|---|---|
| CSS Selector와 예제 (2) | 2025.08.08 |
| HTML Table 태그 사용법 정리 (4) | 2025.08.07 |
| HTML 리스트(List)와 폼(Form) 태그 총정리 (5) | 2025.08.06 |
| HTML의 주요 특징과 <head>, <body>의 역할 (6) | 2025.08.06 |
