CSS 입문 도구

CSS CSS 파일 연결 방법

CSS CSS 파일 연결 방법 — 초급

CSS 파일 연결 방법

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

CSS(Cascading Style Sheets)는 웹 페이지의 디자인을 담당하는 언어입니다. 웹 개발에서는 HTML로 구조를 만들고, CSS로 그 구조에 스타일을 추가합니다. CSS 파일을 올바르게 연결하는 방법을 배우는 것은 웹 페이지의 시각적 표현을 효과적으로 관리하는 데 필수적입니다.

만약 CSS 파일을 제대로 연결하지 않으면, 웹 페이지의 디자인이 전혀 적용되지 않거나 의도치 않은 스타일이 적용될 수 있습니다. 이로 인해 사용자 경험이 저하되고, 브랜드 이미지에도 부정적인 영향을 미칠 수 있습니다. 따라서 CSS 파일 연결 방법을 정확히 이해하는 것은 매우 중요합니다.

2. 핵심 개념 설명

CSS 파일 연결 방법은 크게 세 가지로 나눌 수 있습니다:

인라인 스타일: HTML 태그 내에서 직접 CSS를 작성합니다.

- 비유: 옷을 입을 때, 그날그날 입고 싶은 옷을 고르는 것과 비슷합니다.

내부 스타일 시트: HTML 문서의 <head> 부분에 CSS를 작성합니다.

- 비유: 한 집에서 모든 사람에게 맞는 공통된 옷장을 두는 것입니다.

외부 스타일 시트: 별도의 CSS 파일을 만들어 HTML 문서에서 연결합니다.

- 비유: 여러 개의 집에서 사용할 수 있는 옷가게를 두는 것과 같습니다.

스타일 연결 방법	정의	장점
인라인 스타일	HTML 태그 내에서 직접 스타일 지정	간단한 스타일에 유용
내부 스타일 시트	HTML 문서 내 `<head>`에 CSS 코드 작성	문서 내에서 관리 용이
외부 스타일 시트	별도의 CSS 파일을 연결	여러 문서에서 재사용 가능

3. 기본 코드 예제

외부 스타일 시트를 연결하는 가장 기본적인 방법은 다음과 같습니다.

<!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>CSS 파일 연결 예제</title>
</head>
<body>
    <h1>안녕하세요, CSS!</h1>
</body>
</html>

실행 결과:

웹 페이지에 "안녕하세요, CSS!"라는 제목이 나타납니다.

코드 한 줄씩 동작 설명:

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html lang="ko">: 문서의 언어를 한국어로 설정합니다.
<head>: 문서의 메타데이터를 포함하는 부분입니다.
<link rel="stylesheet" href="styles.css">: styles.css라는 외부 CSS 파일을 연결합니다.
<body>: 웹 페이지의 본문을 정의합니다.
<h1>안녕하세요, CSS!</h1>: 제목을 HTML로 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 메인 페이지에서 로고 스타일링

/ styles.css /
.logo {
    width: 150px;
    height: auto;
    margin: 20px;
}

상황 설명: 쇼핑몰 메인 페이지에서 로고의 크기를 조정하고 여백을 주어 깔끔하게 배치합니다.

예제 2: 버튼 스타일링

.button {
    background-color: #4CAF50; / 초록색 배경 /
    color: white; / 글자 색상 /
    padding: 15px 32px; / 여백 /
    text-align: center; / 가운데 정렬 /
    text-decoration: none; / 밑줄 제거 /
    display: inline-block; / 인라인 블록 /
    margin: 4px 2px; / 주변 여백 /
    cursor: pointer; / 커서 모양 변경 /
}

상황 설명: 사용자에게 클릭할 수 있는 버튼을 제공하여 인터페이스를 개선합니다.

5. 흔한 실수와 주의사항

실수 1: CSS 파일 경로 오류

잘못된 코드:

<link rel="stylesheet" href="style.css"> <!-- 파일 이름 오류 -->

올바른 코드:

<link rel="stylesheet" href="styles.css"> <!-- 올바른 파일 이름 -->

실수 2: 스타일 시트 위치

잘못된 코드: <body> 태그 안에 스타일 시트를 연결

<body>
    <link rel="stylesheet" href="styles.css"> <!-- 잘못된 위치 -->
</body>

올바른 코드:

<head>
    <link rel="stylesheet" href="styles.css"> <!-- 올바른 위치 -->
</head>

6. 정리

CSS 파일을 연결하는 방법에는 인라인, 내부, 외부 스타일 시트가 있다.
외부 스타일 시트는 여러 HTML 문서에서 재사용할 수 있어 효율적이다.
파일 경로와 연결 위치에 주의해야 한다.

다음에 학습하면 좋은 주제: CSS 선택자, 박스 모델, 반응형 디자인.