외부 스타일 시트와 선택자 실습

실습: 외부 스타일 시트와 선택자 활용하기

지금까지 배운 CSS 기본 문법과 다양한 선택자들을 활용하여 간단한 HTML 페이지에 스타일을 적용해 봅시다.

프로젝트 폴더 구조

index.html

style.css

index.html 파일 작성

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 기본 문법과 선택자 실습</title>
    <link rel="stylesheet" href="css/style.css"> </head>
<body>
    <header id="main-header">
        <h1 class="page-title">내 웹사이트</h1>
        <nav>
            <ul>
                <li class="menu-item"><a href="#">홈</a></li>
                <li class="menu-item"><a href="#">소개</a></li>
                <li class="menu-item"><a href="#" target="_blank">외부 링크</a></li>
                <li class="menu-item"><a href="#">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="content-section">
            <h2>환영합니다!</h2>
            <p>이곳은 CSS 선택자 연습을 위한 <span class="highlight">샘플 페이지</span>입니다.
                다양한 요소에 CSS가 어떻게 적용되는지 확인해 보세요.</p>
            <button class="call-to-action">자세히 알아보기</button>
        </section>

        <section class="content-section">
            <h3>CSS 학습 리스트</h3>
            <ul>
                <li>기본 문법</li>
                <li>선택자</li>
                <li>속성</li>
                <li>레이아웃</li>
            </ul>
            <p class="small-text">이 목록은 CSS로 스타일링되었습니다.</p>
        </section>

        <section class="form-section">
            <h3>문의하기</h3>
            <form>
                <label for="name">이름:</label>
                <input type="text" id="name" name="name" placeholder="이름을 입력하세요" required><br>

                <label for="email">이메일:</label>
                <input type="email" id="email" name="email" placeholder="email@example.com"><br>

                <button type="submit">문의 제출</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 웹 개발 학습. 모든 권리 보유.</p>
        <p class="small-text">CSS 기본을 배우는 중입니다.</p>
    </footer>
</body>
</html>

css/style.css 파일 작성

css/style.css

/* 1. 전체 선택자: 기본 여백 제거 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 패딩과 보더가 요소의 너비/높이에 포함되도록 설정 */
}

/* 2. 태그 선택자: 기본 폰트 및 배경 색상 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

/* ID 선택자: 헤더 스타일링 */
#main-header {
    background-color: #2c3e50;
    color: white;
    padding: 20px 0;
    text-align: center;
}

/* 하위 선택자: 헤더 내부의 h1 */
#main-header .page-title {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #ecf0f1;
}

/* 태그 선택자: 네비게이션 ul 초기화 */
nav ul {
    list-style: none; /* 목록 기호 제거 */
}

/* 자식 선택자: nav 바로 아래 ul의 자식 li */
nav > ul > li {
    display: inline-block; /* 메뉴 항목을 가로로 배열 */
    margin: 0 15px;
}

/* 클래스 선택자: 메뉴 아이템 링크 */
.menu-item a {
    color: #f1c40f; /* 노란색 */
    text-decoration: none; /* 밑줄 제거 */
    font-weight: bold;
    transition: color 0.3s ease; /* 호버 효과를 부드럽게 */
}

/* 가상 클래스 선택자: 링크 호버 시 */
.menu-item a:hover {
    color: #f39c12; /* 오렌지색 */
}

/* 속성 선택자: target="_blank" 속성을 가진 링크 */
a[target="_blank"]::after { /* 가상 요소 선택자: 외부 링크 뒤에 아이콘 추가 */
    content: " ↗";
    font-size: 0.8em;
    vertical-align: top;
    color: #f1c40f;
}

/* 메인 콘텐츠 영역 */
main {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 클래스 선택자: 섹션 공통 스타일 */
.content-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #ffffff;
}

/* 하위 선택자: .content-section 내부의 h2 */
.content-section h2 {
    color: #2980b9;
    margin-bottom: 15px;
    border-bottom: 2px solid #2980b9;
    padding-bottom: 5px;
}

/* 클래스 선택자: 하이라이트 텍스트 */
.highlight {
    background-color: #ffeaa7; /* 연한 노란색 */
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

/* 클래스 선택자: 버튼 스타일 */
button.call-to-action {
    background-color: #27ae60;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}
button.call-to-action:hover {
    background-color: #229954;
}

/* 태그 선택자: ul 내부의 li (목록 기호 색상 변경) */
.content-section ul li {
    list-style-type: square; /* 사각형 기호 */
    color: #555;
    margin-left: 20px;
}

/* 가상 클래스 선택자: 짝수 번째 li */
.content-section ul li:nth-child(even) {
    background-color: #f9f9f9;
}

/* 인접 형제 선택자: input 바로 뒤의 button */
input + button {
    margin-left: 10px; /* input과 버튼 사이 여백 */
}

/* 폼 섹션 스타일 */
.form-section {
    background-color: #ebf5fb;
}
.form-section label {
    display: block; /* 레이블을 블록 요소로 만들어 줄바꿈 */
    margin-bottom: 5px;
    font-weight: bold;
    color: #444;
}
.form-section input[type="text"],
.form-section input[type="email"] {
    width: calc(100% - 120px); /* 레이블과 버튼을 고려한 너비 */
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #a9d9f5;
    border-radius: 4px;
}
.form-section input[type="text"]:focus,
.form-section input[type="email"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
.form-section button[type="submit"] {
    background-color: #007bff;
    margin-top: 10px;
}
.form-section button[type="submit"]:hover {
    background-color: #0056b3;
}

/* 푸터 스타일 */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    border-radius: 8px;
}

/* 클래스 선택자: 작은 텍스트 */
.small-text {
    font-size: 0.8em;
    color: #aaa;
}

/* 가상 클래스: input 필드에 포커스 있을 때 */
input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

결과 확인

Live Server를 통해 index.html 파일을 열어보세요.
HTML 파일에 아무런 style="" 속성도 없지만, style.css 파일에 정의된 다양한 스타일 규칙들이 적용되어 웹 페이지가 훨씬 보기 좋게 변한 것을 확인할 수 있을 것입니다.
각 선택자들이 어떤 요소에 어떻게 적용되었는지 CSS 코드와 브라우저 화면을 비교하며 확인해 보세요. 특히 마우스를 올렸을 때(hover), 입력 필드에 클릭했을 때(focus), 외부 링크 옆에 화살표가 붙는(::after) 효과들을 관찰해 보세요.

이번 장에서는 CSS의 가장 기본적인 문법과 외부 스타일 시트를 이용한 적용 방법을 학습했습니다.

특히 HTML 요소에 스타일을 적용하기 위한 핵심적인 개념인 선택자(Selector)의 다양한 종류와 활용법을 심도 있게 다루었습니다.

태그, 클래스, ID 선택자부터 복합 선택자, 속성 선택자, 가상 클래스, 가상 요소 선택자까지, 선택자의 종류와 우선순위를 이해하면 어떤 요소에 스타일이 적용되는지 예측하기 쉬워집니다.

최종 스타일은 먼저 선택자가 요소에 맞는지 확인한 뒤, cascade 규칙에 따라 결정됩니다.

같은 속성에 여러 선언이 경쟁하면 출처와 중요도, specificity, 선언 순서를 차례로 비교합니다.

specificity는 보통 a-b-c 형태로 설명하며, a는 ID 수, b는 class·attribute·pseudo-class 수, c는 type·pseudo-element 수입니다.

예를 들어 p는 0-0-1, .note는 0-1-0, #hero는 1-0-0, .card p:hover는 0-2-1입니다.

!important는 단순히 specificity 점수를 높이는 기능이 아니라 cascade의 중요도 단계에 개입합니다.

그래서 일반적인 레이아웃 조정에는 남용하지 말고, 유틸리티 예외나 접근성 보정처럼 범위를 명확히 알 수 있는 곳에 제한하는 편이 좋습니다.

상속도 구분해야 합니다.

color, font-family, line-height처럼 대체로 상속되는 속성은 부모 값이 자식에게 전달될 수 있지만, margin, border, padding 같은 박스 모델 속성은 기본적으로 상속되지 않습니다.

자식 요소에 직접 적용된 규칙이 있다면 상속값보다 직접 규칙이 우선합니다.

아래 다이어그램은 선택자가 요소에 닿고 최종 스타일로 결정되는 흐름을 한 번에 정리한 것입니다.

다음 학습으로 넘어가기 전에는 선택자가 실제로 어떤 요소에 매칭되는지, specificity가 어떻게 계산되는지, 같은 점수일 때 선언 순서가 어떻게 작동하는지 브라우저 개발자 도구에서 확인해 보세요.

실습: 외부 스타일 시트와 선택자 활용하기

이 페이지의 목차