CSS3 기본 사용법: 웹 디자인을 위한 필수 가이드

1. CSS3 개요

CSS3는 웹 페이지의 스타일을 정의하는 데 사용되는 최신 스타일 시트 언어입니다. CSS3는 이전 버전인 CSS2와 비교하여 많은 새로운 기능과 모듈을 추가하여 더욱 다양한 웹 디자인을 가능하게 합니다. CSS3는 모듈화되어 있어 필요한 부분만 선택적으로 사용할 수 있습니다.

2. CSS 기본 사용법

CSS 규칙은 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다.

h1 {
  color: blue;
  font-size: 24px;
}

CSS 파일은 .css 확장자를 가지며, HTML 파일과 별도로 작성됩니다. 예를 들어, styles.css 파일을 작성해 보겠습니다.

/* styles.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

2-1. HTML 파일에 CSS 연결하기

CSS 파일을 HTML 파일에 연결하려면 <link> 태그를 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

2-2. 인라인 CSS와 내부 CSS

인라인 CSS는 HTML 태그 내부에 직접 스타일을 적용할 수 있습니다.

<p style="color: red; font-size: 20px;">This is an inline styled paragraph.</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 예제</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

CSS는 다음의 세 가지 방법으로 HTML에 적용할 수 있습니다:

인라인 스타일: HTML 요소의 style 속성 내부에 직접 작성합니다.
내부 스타일 시트: <style> 태그를 사용하여 HTML 문서 내부에 작성합니다.
외부 스타일 시트: .css 파일을 별도로 만들어 <link> 태그로 연결합니다.

방법	장점	단점
인라인 스타일	특정 요소에 빠르게 스타일 적용 가능	코드 중복, 유지 보수 어려움
내부 스타일 시트	한 문서 내 스타일 관리 용이	여러 페이지에 적용 어려움
외부 스타일 시트	재사용성 높음, 유지 보수 용이	추가 파일 관리 필요

3. CSS3 선택자

CSS3는 다양한 선택자를 제공하여 요소를 선택할 수 있습니다. 아래는 몇 가지 주요 선택자입니다.

3.1. 기본 선택자

선택자	설명	예시
*	모든 요소	* { margin: 0; }
element	특정 요소	p { color: blue; }
.class	클래스	.button { background-color: #007bff; }
#id	아이디	#header { height: 50px; }

3.2. 속성 선택자

선택자	설명	예시
[attribute]	특정 속성을 가진 요소	input[type="text"] { border: 1px solid #ccc; }
[attribute="value"]	특정 속성과 값을 가진 요소	input[type="submit"] { background-color: #007bff; }

3.3. 가상 클래스 선택자

선택자	설명	예시
:hover	요소 위에 마우스가 올라갈 때	a:hover { color: red; }
:focus	요소가 포커스를 받을 때	input:focus { border: 2px solid blue; }
:first-child	부모 요소의 첫 번째 자식 요소	p:first-child { font-weight: bold; }

3.4. 가상 요소 선택자

선택자	설명	예시
::before	요소의 콘텐츠 앞에 내용을 삽입	p::before { content: "Note: "; }
::after	요소의 콘텐츠 뒤에 내용을 삽입	p::after { content: " (end)"; }
::first-letter	요소의 첫 글자에 스타일 적용	p::first-letter { font-size: 2em; }

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 예제</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <p>웹 프로그래밍</p>
        <button class="button">Click Me!</button>
    </main>
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

CSS 코드

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
}

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

.button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

꼬맹이