🎨 반응형 웹사이트 구축 및 최적화 전략

## 학습 목표
이 튜토리얼을 통해 반응형 웹사이트를 완전히 구현하고, CSS로 UI/UX를 최적화하는 기술을 익히며 실제 프로젝트에 적용할 수 있는 실무 능력을 키웁니다.

## 준비사항
- 코드 에디터(예: VS Code)
- 웹 브라우저(Chrome, Firefox 등)
- HTML/CSS 기본 이해
- 네트워크 연결(서버 호스팅 시)

## 단계별 진행

### 1단계: 기초 설정
기본 환경 구성과 초기 설정
```css
/* global.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

### 2단, 핵심 구현
주요 기능 구현과 실습
```css
/* styles.css */
.header {
background-color: #333;
color: #fff;
padding: 15px 0;
text-align: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.nav-links a {
color: #fff;
margin-left: 15px;
text-decoration: none;
}
.hero {
background: url('hero-image.jpg') no-repeat center center/
cover;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}

### 3단계: 고급 기능
추가 기능과 최적화
```css
/* responsive.css */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links {
display: none;
}
.hero {
height: 200px;
}
}
/* animation.css */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}.fade-in {
animation: fadeIn 1s ease-out;
}

### 4단계: 완성 및 테스트
최종 검증과 배포 준비
```css
/* final.css */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #555;
}

/* global.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* styles.css */
.header {
  background-color: #333;
  color: #fff;
  padding: 15px 0;
  text-align: center;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.nav-links a {
  color: #fff;
  margin-left: 15px;
  text-decoration: none;
}
.hero {
  background: url('hero-image.jpg') no-repeat center center/
    cover;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

/* responsive.css */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-links {
    display: none;
  }
  .hero {
    height: 200px;
  }
}

/* animation.css */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}.fade-in {
  animation: fadeIn 1s ease-out;
}

/* final.css */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #555;
}