9장: CSS 기초
HTML은 웹 페이지의 구조를 정의하는 데 사용되지만, CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용됩니다. CSS를 사용하면 HTML 요소의 색상, 글꼴, 배경, 위치 등을 설정할 수 있습니다.
9.1 CSS 소개
CSS는 HTML 문서의 스타일을 지정하는 언어입니다. HTML과 별도로 작성되며, HTML 요소의 외관을 정의합니다. CSS는 세 가지 방법으로 HTML 문서에 적용할 수 있습니다: 인라인, 내부 스타일시트, 외부 스타일시트.
9.2 인라인 스타일
인라인 스타일은 HTML 태그의 `style` 속성을 사용하여 요소의 스타일을 직접 지정하는 방법입니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일 예제</title>
</head>
<body>
<p style="color: red; font-size: 20px;">이 문장은 빨간색이고, 글꼴 크기는 20픽셀입니다.</p>
</body>
</html>
9.3 내부 스타일시트
내부 스타일시트는 HTML 문서의 `<head>` 섹션에 `<style>` 태그를 사용하여 스타일을 지정하는 방법입니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스타일시트 예제</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 문장은 파란색이고, 글꼴 크기는 18픽셀입니다.</p>
</body>
</html>
9.4 외부 스타일시트
외부 스타일시트는 별도의 CSS 파일을 작성하고 HTML 문서에 링크하여 스타일을 지정하는 방법입니다. 이 방법은 여러 HTML 문서에서 동일한 스타일을 쉽게 적용할 수 있게 합니다.
#### CSS 파일 (style.css)
p {
color: green;
font-size: 16px;
}
#### HTML 파일
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일시트 예제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>이 문장은 초록색이고, 글꼴 크기는 16픽셀입니다.</p>
</body>
</html>
9.5 CSS 선택자
CSS 선택자는 스타일을 적용할 HTML 요소를 지정합니다. 다양한 종류의 선택자가 있으며, 기본적인 선택자는 다음과 같습니다:
- **요소 선택자**: 요소의 이름으로 선택합니다.
p {
color: black;
}
- **클래스 선택자**: 클래스 속성을 가진 요소를 선택합니다. 클래스 이름 앞에 `.`을 사용합니다.
.myClass {
color: purple;
}
- **아이디 선택자**: 아이디 속성을 가진 요소를 선택합니다. 아이디 이름 앞에 `#`을 사용합니다.
#myId {
color: orange;
}
9.6 CSS 박스 모델
CSS 박스 모델은 HTML 요소가 어떻게 크기와 공간을 차지하는지를 설명합니다. 박스 모델은 콘텐츠, 패딩, 테두리, 마진으로 구성됩니다.
- **콘텐츠(Content)**: 요소의 실제 내용.
- **패딩(Padding)**: 콘텐츠 주위의 공간.
- **테두리(Border)**: 패딩 주위의 경계선.
- **마진(Margin)**: 테두리 바깥의 공간.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델 예제</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 10px solid black;
margin: 30px;
}
</style>
</head>
<body>
<div class="box">박스 모델 예제</div>
</body>
</html>
### 연습 문제
1. 인라인 스타일을 사용하여 텍스트 색상과 글꼴 크기를 변경해 보세요.
2. 내부 스타일시트를 사용하여 여러 요소에 스타일을 적용해 보세요.
3. 외부 스타일시트를 작성하고 HTML 문서에 연결해 보세요.
4. 다양한 CSS 선택자를 사용하여 HTML 요소를 선택하고 스타일을 적용해 보세요.
5. CSS 박스 모델을 이해하고, 패딩, 테두리, 마진을 조정해 보세요.
댓글
댓글 쓰기