CSS 시작하기

정현승·2024년 10월 16일

CSS란?

정의

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 데 사용되는 스타일 시트 언어입니다. HTML(또는 XML) 문서의 레이아웃, 색상, 폰트, 여백, 배경 및 기타 시각적 요소를 조정하여 웹 콘텐츠의 표현을 관리합니다.

주요기능

스타일 정의: 텍스트의 색상, 크기, 글꼴 및 배경색과 같은 시각적 요소를 지정합니다.
레이아웃 조정: 요소의 위치와 배치, 여백, 패딩 등을 조정하여 페이지의 구조를 설계합니다.
반응형 디자인: 미디어 쿼리를 사용하여 다양한 화면 크기와 장치에 맞게 레이아웃을 조정할 수 있습니다.
애니메이션과 전환: CSS를 사용하여 요소의 애니메이션 효과를 정의하고 사용자 상호작용에 반응하는 시각적 변화를 만들 수 있습니다.

장점

분리된 내용과 스타일: HTML은 콘텐츠 구조를 담당하고, CSS는 시각적 표현을 담당하여 코드의 가독성과 유지보수성을 높입니다.
재사용성: 동일한 CSS 파일을 여러 HTML 문서에서 재사용할 수 있어 일관성을 유지하고 코드 중복을 줄입니다.
효율성: CSS는 웹 페이지의 로딩 속도를 향상시킬 수 있으며, 스타일을 일괄적으로 변경할 수 있어 효율적입니다.

문법

CSS는 선택자(selector)와 선언부(declaration block)으로 구성됩니다. 선택자는 스타일을 적용할 요소를 지정하고, 선언 블록은 스타일 속성 및 값을 포함합니다.

h1 {
    color: blue;       /* 텍스트 색상 */
    font-size: 24px;  /* 폰트 크기 */
}

HTML에 CSS 적용하기

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

인라인 스타일은 HTML 요소에 직접 CSS 스타일을 적용하는 방법입니다. 각 요소에 style 속성을 사용하여 스타일을 정의합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스타일 예제</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">안녕하세요!</h1>
    <p style="font-size: 16px; color: gray;">이것은 인라인 스타일을 사용한 단락입니다.</p>
</body>
</html>

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

내부 스타일 시트는 HTML 문서의 head 섹션에 style 태그를 사용하여 스타일을 정의하는 방법입니다. 한 문서 내에서 여러 요소에 대한 스타일을 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일 시트 예제</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
        }
        p {
            font-size: 18px;
            color: darkslategray;
        }
    </style>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 내부 스타일 시트를 사용한 단락입니다.</p>
</body>
</html>

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

외부 스타일 시트는 CSS 규칙을 별도의 파일에 저장하고, HTML 문서에서 링크하여 사용하는 방법입니다. 이 방법이 가장 일반적이고 권장되는 방법입니다. 여러 HTML 문서에서 동일한 CSS 파일을 참조할 수 있어 유지보수가 용이합니다.

3.1. CSS 파일 만들기

CSS 파일을 생성합니다. 예를 들어 styles.css라는 파일을 만들 수 있습니다.
styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}

h1 {
    color: navy;
}

p {
    color: #333;
    line-height: 1.5;
}

3.2. HTML 문서에서 CSS 파일 링크하기

HTML 문서의 head 섹션에 link 태그를 사용하여 CSS 파일을 연결합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스타일 시트 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 외부 스타일 시트를 사용한 단락입니다.</p>
</body>
</html>