이번 포스팅에서는 웹 페이지의 디자인을 담당하는 CSS에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지를 아름답게 꾸미는 방법을 자세히 학습해봅시다.
자동목차
1. 이론: CSS란?
CSS(Cascading Style Sheets)는 HTML과 함께 웹 페이지의 구조와 디자인을 담당하는 중요한 웹 기술입니다. CSS를 이용하면 웹 페이지의 배경색, 폰트 스타일, 레이아웃 등을 제어할 수 있습니다.
2. 실습: 첫 번째 CSS 작성하기
아래의 코드는 HTML에 CSS를 적용한 간단한 웹 페이지의 예시입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>
3. 코드 설명
- <style>: 이 태그 안에 CSS 코드를 작성합니다. 이 태그는 보통 <head> 태그 안에 위치합니다.
- body { background-color: lightblue; }: 이 코드는 body의 배경색을 lightblue로 설정합니다.
- h1 { color: white; text-align: center; }: 이 코드는 h1 태그의 텍스트 색상을 white로, 정렬을 가운데로 설정합니다.
4. 예습: CSS 연습하기
다음 시간에는 CSS 선택자에 대해 배울 예정입니다. CSS 선택자는 CSS를 적용할 HTML 요소를 선택하는 방법을 정의합니다. 예를 들어, p 선택자는 모든 <p> 요소에 CSS를 적용합니다. 미리 다양한 CSS 선택자에 대해 알아보고, 실제 코드에 적용해보는 연습을 해보세요.
5. 마무리
CSS는 웹 페이지를 아름답게 디자인하는 데 필수적인 웹 기술입니다. 이번 포스팅을 통해 CSS의 기본 개념을 이해하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다. 이해가 안 가는 부분이 있거나 추가로 궁금한 점이 있다면 언제든지 댓글로 남겨 주세요. 다음 포스팅에서는 CSS 선택자에 대해 알아보겠습니다.