CSS의 기본 개념과 구성 요소에 대해 알아보고, 웹 페이지 스타일링의 기본을 이해하도록 해보겠습니다.
1. CSS란
Cascading Style Sheets(CSS)는 마크업 언어에 스타일을 적용하기 위한 디자인 지침을 작성할 수 있는 스타일 시트 언어입니다. 웹 페이지의 레이아웃, 색상, 글꼴 등을 효과적으로 수정할 수 있습니다.
2. 선택자와 스타일 선언
CSS에서 가장 중요한 개념은 선택자(selector)와 스타일 선언(style declaration)입니다.
2.1 선택자
선택자는 웹 페이지의 특정 요소(들)에 스타일을 적용하기 위해 사용됩니다. 예를 들어, 웹 페이지에 동일한 태그가 여러 개 있을 때 특정 태그에만 스타일을 적용하고 싶다면 선택자를 사용하여 해당 요소를 선택할 수 있습니다.
2.2 스타일 선언
선택자를 사용하여 선택한 요소에 적용할 스타일을 작성하는 것을 스타일 선언이라고 합니다. 하나의 스타일 룰은 여러 개의 스타일 선언으로 이루어져 있습니다.
3. CSS 적용 방법
웹 페이지에 CSS를 적용하기 위해 세 가지 방법이 있습니다: 인라인, 내부, 외부 스타일 시트입니다.
3.1 인라인 스타일
인라인 스타일은 HTML 요소 내부에 적용할 스타일을 직접 작성합니다. style 속성을 사용하여 원하는 스타일을 표현하며, 일반적으로 권장되지 않습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 기본 개념 및 구성 요소</title>
</head>
<body>
<!-- 인라인 스타일 예제 -->
<h2 style="color: green;">소제목</h2>
</body>
</html>3.2 내부 스타일 시트
내부 스타일 시트는 HTML 문서의 head 요소 내부에 style 태그로 작성됩니다. HTML 문서와 CSS 작업이 동일한 페이지에 포함되어 있어 유지 관리가 어려울 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 기본 개념 및 구성 요소</title>
<style>
/* 내부 스타일 시트 예제 */
h3 {
color: blue;
}
</style>
</head>
<body>
</body>
</html>3.3 외부 스타일 시트
외부 스타일 시트는 별도의 CSS 파일(.css 확장자)로 작성되며, HTML 문서에서 link 요소를 사용하여 해당 파일을 연결합니다. 이 방식은 유지 관리가 쉽고, 여러 HTML 문서에서 동일한 스타일 시트를 공유할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 기본 개념 및 구성 요소</title>
<!-- 외부 스타일 시트 예제: 아래 link 태그를 사용하여 외부 CSS 파일과 연결합니다. -->
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
마치며
이 포스팅을 통해 CSS의 기본 개념과 구성 요소에 대해 알아보았습니다. 다음 포팅에서는 CSS 선택자: 기본 선택자와 결합자에 대해 자세히 알아보겠습니다.
'CSS' 카테고리의 다른 글
| CSS 버튼 스타일 및 효과 넣기 (0) | 2024.03.13 |
|---|---|
| CSS Margin과 Padding (0) | 2023.08.19 |
| 5. CSS 색상: 표현 방식과 알파값 (0) | 2023.07.29 |
| 4. CSS 타이포그래피: 글꼴, 스타일, 줄간격 (0) | 2023.07.19 |
| 3. CSS 박스 모델: 마진, 패딩, 보더 (0) | 2023.07.17 |
| 2. CSS 선택자: 기본 선택자와 결합자 (0) | 2023.07.17 |
