대시보드 디자인과 CSS 기초¶
🎯 이 장에서 배우는 것¶
- [ ] CSS가 웹페이지의 "옷"임을 이해할 수 있다
- [ ] AI에게 디자인 수정을 요청할 수 있다
⏱️ 예상 학습 시간: 약 15분
📚 핵심 개념¶
개념: CSS (웹페이지의 옷)¶
비유: HTML이 "뼈대"라면, CSS는 "옷과 화장"이에요!
flowchart LR
A[HTML<br/>내용/구조] --> B[CSS<br/>색상/크기/배치]
B --> C[🎨 예쁜 페이지]
정의: CSS는 웹페이지의 색상, 크기, 위치를 꾸미는 언어입니다.
🔨 따라하기¶
Step 1: AI에게 디자인 요청하기¶
Claude에게 이렇게 요청하세요:
센서값을 카드 형태로 예쁘게 보여주는 HTML을 만들어줘.
온도, 습도 두 개 카드로 보여줘.
Step 2: 결과 확인하기¶
AI가 만든 코드를 dashboard.html로 저장하고 브라우저에서 열어보세요.
✅ 체크포인트: 카드 모양의 박스가 보이면 성공!
📝 핵심 CSS 예시¶
.card {
background: #f0f0f0; /* 배경색 */
padding: 20px; /* 안쪽 여백 */
border-radius: 10px; /* 둥근 모서리 */
}
⚠️ 주의할 점¶
- CSS 수정 후 새로고침(F5) 해야 변경사항이 보여요!
✅ 점검하기¶
- CSS는 웹페이지의 무엇을 담당하나요?
정답 확인
색상, 크기, 배치 등 "스타일(디자인)"을 담당합니다.🔗 다음 장 미리보기¶
다음 장: 실시간으로 센서값이 자동 갱신되는 기능을 추가해요! 🔄