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

<!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 protected]"><br>

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

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

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

/* 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;
}

/* 하위 선택자: 섹션 안 목록의 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;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    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);
}