1.1 CSS 개요

약 5분

본문 듣기

1.1 CSS 개요

CSS(Cascading Style Sheets)는 웹 페이지의 외형을 꾸미기 위해 사용되는 스타일시트 언어입니다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 그 구조에 스타일을 추가하여 보기 좋고, 사용자 친화적인 디자인을 제공합니다. CSS를 사용하면 색상, 글꼴, 레이아웃 등 다양한 요소를 조정할 수 있습니다.

예제

다음은 기본적인 HTML과 CSS 코드입니다. 이 코드는 웹 페이지에 제목과 본문을 포함하고, CSS를 통해 그 스타일을 적용한 예입니다.

<!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 {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>CSS 기초</h1>
    <p>CSS는 웹 페이지의 스타일을 적용하는 데 필요한 언어입니다. 이 코드는 간단한 CSS 예제입니다.</p>
</body>
</html>

이 예제에서

body 부분은 글꼴, 배경색, 여백(padding)을 설정합니다.
h1은 제목의 색상을 설정하고,
p는 본문의 글자색과 줄 높이를 조정합니다.

CSS를 사용하면 텍스트 색상이 바뀌고, 배경색이 설정되어 웹 페이지의 전반적인 모습이 개선됩니다. 이러한 스타일링은 페이지를 더욱 전문적으로 보이게 해줍니다.

실습

이제 여러분은 간단한 웹 페이지를 만들어 보세요. 기본 HTML 구조를 설정하고, CSS를 통해 자신의 스타일을 적용해 보세요. 여러분의 웹 페이지에는 제목과 두세 개의 문장이 포함되어야 합니다. 색상, 글꼴 크기, 여백 등을 변경해 보세요.

실습 목표:

HTML 파일을 작성합니다.
기본적인 CSS 스타일을 추가합니다.
다양한 속성을 조정하여 나만의 스타일을 만듭니다.

예시

제작한 웹 페이지의 결과화면은 다음과 같이 보여야 합니다.

제목은 눈에 띄게 보여야 하고,
본문은 읽기 쉽게 조정되어야 합니다.

자주 발생하는 오류 및 해결 방법

CSS가 반영되지 않음: 이 경우, <link> 또는 <style> 태그의 위치를 확인하고, 파일 경로가 올바른지 확인하세요.
스타일이 적용되지 않는 특정 요소: CSS 선택자가 잘못되었거나 우선순위가 낮을 수 있습니다. 선택자가 타겟팅하는 요소가 정확한지 확인해 보세요.

정리

이번 강의에서는 CSS의 기본 개념과 간단한 HTML 및 CSS 예제를 통해 그것의 필요성과 기본 사용법에 대해 알아보았습니다. CSS는 웹 페이지의 외형을 꾸미는 중요한 도구이며, 여러분의 웹 디자인 역량을 향상시킬 수 있습니다. 다음 강의에서는 CSS 속성과 더 복잡한 레이아웃 기법에 대해 배우게 됩니다.

1.1 CSS 개요

1.1 CSS 개요

예제

실습

예시

자주 발생하는 오류 및 해결 방법

정리

댓글 0