반응형
📘 제로부터 시작하는 웹개발 입문 #3
🎨 “CSS로 웹페이지 꾸미기”
안녕하세요!
지난 시간엔 HTML로 기본적인 웹페이지를 만들었죠.
이번에는 그 웹페이지에 색상, 폰트, 여백 등을 입혀서 디자인적으로 보기 좋게 만드는 방법을 배워볼 거예요.
---
✅ CSS가 뭐였더라?
CSS는 웹사이트의 스타일을 담당하는 언어입니다.
디자인 요소인 색상, 폰트, 간격, 정렬 등을 지정해 웹페이지를 보기 좋게 꾸밀 수 있어요.
---
🧱 HTML 기본 구조 (복습)
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>나의 첫 웹페이지에 오신 걸 환영합니다!</h1>
<p>HTML과 CSS로 멋진 웹사이트를 만들 수 있어요.</p>
</body>
</html>
🎨 CSS 추가 방법 3가지
방법설명
| 인라인 스타일 | 태그 안에 style 속성으로 적용 |
| 내부 스타일 시트 | <style> 태그로 HTML 파일 안에 작성 |
| 외부 스타일 시트 | .css 파일을 따로 만들어 연결 |
✨ CSS로 예쁘게 꾸미기 – 실전 코드
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>꾸민 웹페이지</title>
<style>
body {
background-color: #f8f9fa;
font-family: 'Arial', sans-serif;
margin: 40px;
color: #333;
}
h1 {
color: #0066cc;
text-align: center;
font-size: 36px;
}
p {
font-size: 18px;
line-height: 1.6;
text-align: center;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>나의 첫 웹페이지</h1>
<p>HTML과 <span class="highlight">CSS</span>를 배우면 정말 재미있어요!</p>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>꾸민 웹페이지</title>
<style>
body {
background-color: #f8f9fa;
font-family: 'Arial', sans-serif;
margin: 40px;
color: #333;
}
h1 {
color: #0066cc;
text-align: center;
font-size: 36px;
}
p {
font-size: 18px;
line-height: 1.6;
text-align: center;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>나의 첫 웹페이지</h1>
<p>HTML과 <span class="highlight">CSS</span>를 배우면 정말 재미있어요!</p>
</body>
</html>
🔍 설명
- body: 전체 배경 색, 폰트, 여백 설정
- h1: 제목 색, 글자 크기, 가운데 정렬
- p: 문단 스타일
- .highlight: CSS 클래스를 통해 특정 단어 강조
💡 CSS 클래스는 .으로 시작하고, HTML에서 class="이름" 으로 연결해요.
💡 추천 스타일 속성들
속성 예시 설명
| color | color: red; | 글자 색 |
| background-color | background-color: #eee; | 배경 색 |
| font-size | font-size: 20px; | 글자 크기 |
| text-align | text-align: center; | 정렬 |
| margin, padding | margin: 20px; | 간격 조정 |
💬 마무리 정리
- CSS로 웹페이지의 색상, 폰트, 정렬 등을 바꿀 수 있다.
- <style> 태그를 <head> 안에 넣으면 HTML 내부에서 디자인 설정이 가능하다.
- .클래스를 활용해 특정 요소만 꾸미는 것도 가능하다.
📌 다음 글 예고
[#4 실전! 나만의 미니 웹페이지 만들기]
실제로 작은 웹페이지를 만들면서 HTML과 CSS를 복습하고 정리해볼 거예요! 🚀
반응형
'html' 카테고리의 다른 글
| 제로부터 시작하는 웹개발 입문 #5 (2) | 2025.06.20 |
|---|---|
| 제로부터 시작하는 웹개발 입문 #4 (2) | 2025.05.30 |
| 제로부터 시작하는 웹개발 입문 #2 (10) | 2025.04.26 |
| 제로부터 시작하는 웹 개발 입문 #1 (16) | 2025.04.25 |