HTML 입문 문법

HTML 외부 스타일 시트

HTML 외부 스타일 시트 — 초급

외부 스타일 시트

1. 도입 (왜 배워야 하는가)

웹 개발에서 디자인과 사용자 경험은 매우 중요한 요소입니다. 외부 스타일 시트(CSS)는 웹 페이지의 시각적 표현을 통일감 있게 유지하고, 유지보수가 용이하게 하는 중요한 역할을 합니다.

만약 외부 스타일 시트를 사용하지 않고 모든 CSS를 HTML 파일 내에 작성한다면, 코드가 복잡해지고 중복이 발생할 수 있습니다. 예를 들어, 여러 페이지에서 동일한 스타일을 반복해서 작성하게 되면, 어떤 페이지에서 스타일을 수정할 때마다 모든 페이지를 수정해야 하는 비효율이 발생합니다. 이로 인해 작업 효율이 떨어지고, 실수가 발생할 확률도 높아집니다.

2. 핵심 개념 설명

외부 스타일 시트는 CSS 파일을 별도로 만들어 HTML 파일에 연결하여 사용하는 방식입니다. 이렇게 하면 스타일을 중앙에서 관리할 수 있어, 웹 사이트의 디자인을 쉽게 편집하고 유지할 수 있습니다.

용어	설명
CSS (Cascading Style Sheets)	웹 페이지의 스타일을 정의하는 언어
HTML (HyperText Markup Language)	웹 페이지의 구조를 정의하는 언어
외부 스타일 시트	별도의 .css 파일에 정의된 CSS 코드

3. 기본 코드 예제

아래는 HTML 문서에서 외부 스타일 시트를 연결하여 사용하는 기본적인 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 파일 연결 -->
    <title>외부 스타일 시트 예제</title>
</head>
<body>
    <h1>안녕하세요, 외부 스타일 시트!</h1>
    <p>이 문단은 외부 스타일 시트로 꾸며집니다.</p>
</body>
</html>

/ styles.css 파일 /
h1 {
    color: blue; / 제목의 색상을 파란색으로 설정 /
}

p {
    font-size: 20px; / 문단의 글자 크기를 20px로 설정 /
}

실행 결과

제목은 파란색으로 표시되고, 문단의 글자 크기는 20픽셀로 설정됩니다.

코드 한 줄씩 동작 설명

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html lang="ko">: 문서의 언어를 한국어로 설정합니다.
<head>: 문서의 메타 정보를 포함하는 부분입니다.
<link rel="stylesheet" href="styles.css">: 외부 CSS 파일을 연결합니다.
<title>: 브라우저 탭에 표시될 제목을 설정합니다.
<body>: 웹 페이지의 본문 내용을 작성하는 부분입니다.
<h1>: 제목을 정의합니다.
<p>: 문단을 정의합니다.

4. 실전 활용 예제

쇼핑몰에서 장바구니 아이콘 스타일링

- 장바구니 아이콘의 색상과 크기를 외부 CSS 파일에서 정의하여, 여러 페이지에서 동일한 스타일을 적용할 수 있습니다.

/ styles.css /
.cart-icon {
    width: 50px; 
    height: 50px; 
    background-color: green; 
}

블로그 포스트 스타일링

- 블로그 포스트의 제목, 본문, 인용구 등 다양한 요소의 스타일을 외부 CSS로 관리하여 통일된 디자인을 유지합니다.

/ styles.css /
.post-title {
    font-size: 24px; 
    font-weight: bold; 
}

.post-body {
    line-height: 1.5; 
    color: #333; 
}

5. 흔한 실수와 주의사항

CSS 파일 경로 오류

- 잘못된 경로를 입력하면 스타일이 적용되지 않습니다. - 잘못된 코드: <link rel="stylesheet" href="style.css"> (파일명 오류) - 올바른 코드: <link rel="stylesheet" href="styles.css">

CSS 파일 미존재

- CSS 파일이 존재하지 않거나 잘못된 이름일 경우 스타일이 적용되지 않습니다. 파일명이 정확한지 항상 확인해야 합니다.

캐싱 문제

- 브라우저가 이전 CSS 파일을 캐시하여 변경 사항이 즉시 반영되지 않을 수 있습니다. 이럴 경우, 브라우저의 캐시를 지우거나 새로 고침을 해야 합니다.

6. 정리

외부 스타일 시트는 웹 페이지의 스타일을 중앙에서 관리할 수 있게 해줍니다.
코드의 중복을 줄이고 유지보수를 용이하게 합니다.
CSS 파일의 경로와 이름을 항상 정확히 확인해야 합니다.

다음에 학습하면 좋은 주제는 CSS 선택자와 속성입니다. 이를 통해 더 세밀하게 디자인을 조정할 수 있습니다.

학습