Day 3: CSS 기초 학습
좋습니다 👍 이제 **Day 3 학습 플랜 (CSS 기초)**을 실습 예제까지 포함해서 정리해드릴게요.
🗓️ Day 3: CSS 기초 학습
1. 학습 목표
- CSS를 HTML에 연결하는 방법 이해하기
<link>태그로 외부 CSS 파일 연결<style>태그로 내부 스타일 작성style속성으로 인라인 스타일 적용
- 색상, 폰트, 박스 모델(마진, 패딩, 보더) 기본 개념 익히기
- 간단한 스타일링으로 페이지 꾸미기
2. 프로젝트 구조
my-first-web/
├── index.html
└── style.css
3. 실습 예제: 자기소개 페이지 스타일링
index.html (Day1에서 만든 자기소개 페이지에 CSS 연결)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 웹 페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>안녕하세요! 👋</h1>
<p>저는 웹 개발을 배우고 있는 학생입니다.</p>
<h2>관심사</h2>
<ul>
<li>HTML/CSS/JS 배우기</li>
<li>작은 웹 앱 만들기</li>
<li>GitHub에 프로젝트 올리기</li>
</ul>
<h2>연락처</h2>
<p>Email: myemail@example.com</p>
<a href="https://github.com/myprofile" target="_blank">GitHub 프로필</a>
</body>
</html>
style.css
/* 전체 페이지 기본 스타일 */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 40px;
color: #333;
}
/* 제목 스타일 */
h1 {
color: #2c3e50;
text-align: center;
}
/* 소제목 스타일 */
h2 {
color: #16a085;
margin-top: 20px;
}
/* 리스트 스타일 */
ul {
list-style-type: square;
padding-left: 20px;
}
/* 링크 스타일 */
a {
color: #2980b9;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
4. 실행 방법
- VS Code에서
index.html열기 - Live Server로 실행 → 브라우저에서 스타일 적용된 자기소개 페이지 확인
- 배경색, 글꼴, 제목 색상, 링크 hover 효과 확인하기
5. 학습 포인트
- CSS 선택자(
body,h1,ul,a) 이해 - 박스 모델(마진, 패딩)과 색상 속성 활용
- HTML과 CSS의 분리된 구조 경험하기
👉 Day 4에서는 **CSS 레이아웃(Flexbox & Grid)**을 배우면서 반응형 랜딩 페이지를 만들어보게 됩니다. 원하시면 Day 4 실습 예제도 바로 이어서 정리해드릴 수 있습니다.
