728x90
반응형
SMALL
안녕하세요! 오늘은 CSS 수업의 마지막 10강에서 함께하는 매우 간단한 프로젝트를 소개합니다.
이번 프로젝트에서는 앞으로 배웠던 HTML, CSS 기술들을 활용하여 완전한 웹 페이지를 만들어보겠습니다. 이 프로젝트를 통해 실전 경험을 쌓고, 여러분의 CSS 실력을 한 단계 끌어올리는 데 도움이 될 것입니다.
따라서 만들어도 괜찮지만 본인이 평소에 이런 웹 사이트 하나 있으면 좋겠다 생각해봤던 것들을 만든다면 더욱 유익한 실습이 될 수 있습니다.
프로젝트 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>프로젝트 실습</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>프로젝트</h1>
</header>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
<section class="main-section">
<h2>직접 만들어보는 프로젝트</h2>
<p>지금까지 맛보기로 배워본 html, css를 이용해 간단한 웹 페이지를 만들어봤습니다.</p>
</section>
<footer>
<p>© 2024 저작권은 OOO 내꺼임!</p>
</footer>
</body>
</html>
반응형
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
nav {
background-color: #666;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.main-section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
위의 예제는 간단한 웹 페이지의 HTML과 CSS 코드입니다. HTML 파일에서는 웹 페이지의 구조를 정의하고, CSS 파일에서는 각 요소의 스타일을 설정합니다. 이를 통해 웹 페이지를 보다 예쁘고 사용자 친화적으로 만들 수 있습니다.
이 프로젝트를 진행하면서 여러분은 HTML과 CSS를 더 깊이 이해하고, 실전 경험을 쌓을 수 있습니다. 어려운 부분이 있다면 언제든지 질문해주세요. 함께 성장해나가는 여정을 시작해봅시다!
- 이전 수업 목록
728x90
반응형
LIST
'프로그래밍 > CSS' 카테고리의 다른 글
| [CSS 수업] 9강 - CSS 최적화 및 성능 향상 (0) | 2024.05.21 |
|---|---|
| [CSS 수업] 8강 - 애니메이션과 트랜지션 (0) | 2024.05.20 |
| [CSS 수업] 7강 - 미디어 쿼리(반응형 웹 디자인) (0) | 2024.05.17 |
| [CSS 수업] 6강 - 레이아웃 만들기 (0) | 2024.05.16 |
| [CSS 수업] 5강 - 박스 모델 이해하기 (0) | 2024.05.15 |