CSS(Cascading Style Sheets)는 웹 페이지의 시각적 요소를 제어하기 위한 스타일 시트 언어입니다. HTML이 웹 사이트의 골격을 만든다면, CSS는 그 골격에 색상, 글꼴, 레이아웃 등 디자인을 입히는 역할을 하며, 콘텐츠와 디자인을 분리하여 관리할 수 있게 해줍니다.

CSS 기본 문법

CSS는 선택자(Selector)와 선언 블록으로 구성됩니다.

• 선택자: 스타일을 적용할 대상을 지정합니다.
• 속성(Property): 변경하고자 하는 스타일 항목의 이름입니다.
• 값(Value): 해당 속성에 적용할 구체적인 설정값입니다.

/* 기본 구조 */
선택자 {
    속성: 값;
    속성: 값;
}

/* 예시: 모든 p 태그의 글자색을 파란색으로 설정 */
p {
    color: blue;
    font-size: 16px;
}

HTML에 CSS를 적용하는 세 가지 방법

1. 인라인 스타일(Inline Style)

각 HTML 태그의 style 속성에 직접 CSS 코드를 작성하는 방식입니다.

<div style="border: 2px solid blue; padding: 10px;">인라인 스타일이 적용된 박스 1</div>
<div style="border: 2px solid blue; padding: 10px;">인라인 스타일이 적용된 박스 2</div>

이 방식은 코드가 중복되기 쉽고 유지보수가 매우 어려워 특수한 경우가 아니면 권장되지 않습니다.

2. 내부 스타일 시트(Internal Style Sheet)

HTML 문서의 <head> 섹션 안에 <style> 태그를 사용하여 정의합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        section {
            border: 1px dashed green;
            margin-bottom: 5px;
        }
        strong {
            color: orange;
        }
    </style>
</head>
<body>
    <section>내부 스타일 섹션</section>
    <strong>강조된 텍스트</strong>
</body>
</html>

해당 페이지에만 스타일을 적용할 때 유용하지만, 여러 페이지에서 공통 스타일을 사용할 때는 한계가 있습니다.

3. 외부 스타일 시트(External Style Sheet)

별도의 .css 파일을 만들고 HTML 문서에서 <link> 태그로 연결하는 방식입니다. 실무에서 가장 많이 사용됩니다.

/* global.css */
article {
    background-color: #f9f9f9;
    padding: 20px;
}
h2 {
    color: navy;
}

<!-- HTML 파일 -->
<head>
    <link rel="stylesheet" type="text/css" href="global.css">
</head>
<body>
    <article>
        <h2>외부 스타일 시트 적용</h2>
    </article>
</body>

주요 CSS 선택자 활용

태그 선택자

특정 HTML 태그 전체에 스타일을 적용합니다.

span {
    color: darkred;
    font-weight: bold;
}

ID 선택자

문서 내에서 유일한 요소에 스타일을 적용할 때 사용하며, # 기호를 붙입니다.

#main-header {
    background-color: lightgrey;
    text-align: center;
}

클래스 선택자(Class Selector)

여러 요소에 공통적으로 적용하고 싶을 때 사용하며, . 기호를 붙입니다.

.error-text {
    color: red;
    font-size: 12px;
}

그룹 선택자

여러 선택자에 동일한 스타일을 한 번에 적용할 때 쉼표(,)로 구분하여 나열합니다.

h1, h2, .sub-title {
    font-family: 'Arial', sans-serif;
    letter-spacing: 1px;
}

자주 사용하는 스타일 속성

실제 웹 개발에서 빈번하게 사용되는 스타일 속성들입니다.

• color: 텍스트 색상 (이름, RGB, HEX 코드 사용 가능)
• width / height: 요소의 너비와 높이 (px, % 등)
• background-color: 배경색 지정
• font-size: 글꼴 크기
• border: 테두리 두께, 스타일, 색상 (예: 1px solid black)
• margin: auto: 블록 요소를 가로 중앙에 배치
• text-align: center: 텍스트 정렬
• text-decoration: none: 링크(a 태그)의 밑줄 제거
• list-style: none: 목록(ul, li)의 불릿 기호 제거
• border-collapse: collapse: 테이블 테두리를 하나로 합침

/* 실습 예제 */
.container {
    width: 80%;
    margin: 0 auto; /* 중앙 정렬 */
    padding: 15px;
    border: 1px solid #ddd;
}

.nav-link {
    text-decoration: none;
    color: #333;
    display: inline-block;
    padding: 5px 10px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table td {
    border: 1px solid #666;
    text-align: center;
}