HTML 입문 기초

HTML 기본 CSS 소개

HTML 기본 CSS 소개 — 초급

기본 CSS 소개

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

웹 개발에서 HTML은 웹 페이지의 구조를 만드는 데 필수적인 요소입니다. 그러나 HTML만으로는 페이지의 시각적 요소를 조정할 수 없습니다. CSS(Cascading Style Sheets)는 HTML로 작성된 콘텐츠를 꾸미고, 레이아웃을 조정하며, 사용자 경험을 개선하는 데 필수적입니다.

예를 들어, 쇼핑몰 웹사이트에서 제품 목록을 보여줄 때, CSS가 없으면 모든 제품이 동일한 모양으로 나열됩니다. 이는 사용자에게 혼란을 줄 수 있고, 브랜드 이미지에도 좋지 않습니다. CSS를 통해 각 제품의 이미지를 강조하고, 정돈된 레이아웃으로 사용자에게 더 나은 경험을 제공합니다. 따라서 CSS는 웹 개발에서 중요한 역할을 하며, 이를 모르면 매력적이지 않은 웹 페이지를 만들 수밖에 없습니다.

2. 핵심 개념 설명

CSS란?

CSS는 HTML 문서의 스타일을 정의하는 언어입니다. 즉, 텍스트의 색상, 크기, 레이아웃 등을 조절할 수 있습니다.

비유: 옷 입히기

CSS는 HTML에 옷을 입히는 것과 같습니다. HTML이 사람이라면, CSS는 그 사람이 어떤 옷을 입고 있는지를 결정하는 역할을 합니다. 예를 들어, 같은 사람도 정장, 캐주얼, 운동복 등 다양한 스타일로 변신할 수 있습니다.

용어	설명
선택자	스타일을 적용할 HTML 요소를 지정하는 것
속성	CSS에서 스타일을 지정하는 세부 항목
값	해당 속성에 적용할 설정값
선언	속성과 값을 쌍으로 묶은 것
규칙 세트	선택자와 선언을 포함한 전체 구조

3. 기본 코드 예제

아래는 간단한 CSS를 사용하여 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>
    <style>
        body {
            background-color: #f0f0f0; / 배경색을 연회색으로 설정 /
            font-family: Arial, sans-serif; / 글꼴을 Arial로 설정 /
        }
        h1 {
            color: #333; / 제목 색상을 어두운 회색으로 설정 /
        }
        p {
            font-size: 16px; / 단락의 글자 크기를 16px로 설정 /
            line-height: 1.5; / 줄 간격을 1.5로 설정 /
        }
    </style>
</head>
<body>
    <h1>CSS 기본 예제</h1>
    <p>이것은 CSS를 사용한 기본적인 스타일 예제입니다.</p>
</body>
</html>

실행 결과

배경색은 연회색이며, 제목은 어두운 회색, 단락은 16px 크기로 보입니다.

코드 한 줄씩 동작 설명

<!DOCTYPE html>: HTML5 문서임을 브라우저에 알립니다.
<html lang="ko">: 문서의 언어가 한국어임을 지정합니다.
<head>: 문서의 메타데이터를 포함하는 부분입니다.
<style>: CSS 스타일을 정의합니다.
body { ... }: body 요소의 스타일을 설정합니다. 배경색과 글꼴을 지정합니다.
h1 { ... }: h1 요소의 색상을 설정합니다.
p { ... }: p 요소의 글자 크기와 줄 간격을 설정합니다.
<body>: 실제 콘텐츠가 포함되는 부분입니다.
<h1>과 <p>: 제목과 단락을 포함합니다.

4. 실전 활용 예제

예제 1: 버튼 스타일링

쇼핑몰에서 "장바구니에 담기" 버튼을 스타일링할 때 사용할 수 있습니다.

<style>
    .button {
        background-color: #28a745; / 초록색 배경 /
        color: white; / 글자 색상은 흰색 /
        padding: 10px 20px; / 위아래 10px, 좌우 20px 여백 /
        border: none; / 테두리 없음 /
        border-radius: 5px; / 모서리 둥글게 /
        cursor: pointer; / 마우스 커서 모양 변경 /
    }
</style>
<button class="button">장바구니에 담기</button>

예제 2: 카드 레이아웃

제품을 카드 형태로 보여줄 때 유용합니다.

<style>
    .card {
        background-color: white; / 카드 배경은 흰색 /
        border: 1px solid #ddd; / 연한 회색 테두리 /
        border-radius: 8px; / 모서리 둥글게 /
        padding: 15px; / 카드 안쪽 여백 /
        margin: 10px; / 카드 간격 /
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); / 그림자 효과 /
    }
</style>
<div class="card">
    <h2>제품명</h2>
    <p>제품 설명</p>
</div>

5. 흔한 실수와 주의사항

실수 1: 선택자 오타

잘못된 코드:

    h1 {
        Color: blue; / 'C'가 대문자여서 인식되지 않음 /
    }

올바른 코드:

    h1 {
        color: blue; / 올바른 속성명 /
    }

실수 2: 중괄호 닫기 누락

잘못된 코드:

    p {
        font-size: 16px; / 중괄호가 닫히지 않음 /

올바른 코드:

    p {
        font-size: 16px; / 중괄호 닫음 /
    }

6. 정리

CSS는 HTML 요소의 스타일을 조정하는 필수 도구입니다.
선택자, 속성, 값 등 기본 개념을 이해해야 합니다.
실무에서 버튼, 카드 레이아웃 등 다양한 스타일링 기법이 사용됩니다.
흔한 실수로는 속성명 대/소문자 구분과 중괄호 누락이 있습니다.

다음에 학습하면 좋은 주제: CSS 레이아웃 기술 (Flexbox, Grid), 고급 CSS 선택자.

학습