반응형
파라다이스 파크
놀이 공원 '파라다이스 파크'의 웹사이트를 만들어보려고 합니다.
여러분이 할 일은 사이트 좌측에 있는 네비게이션 바를 채워 넣는 것입니다.
- 'HOME', 'EVENT', 'TICKET', 'MEMBERSHIP', 'NOTICE'는 사이트 메뉴입니다. 각각 다른 <li> 태그 안에 있는 <a> 태그입니다. <li> 태그는 모두 <ul> 태그에 묶여 있습니다.
- 빨간 선은 margin, 초록 선은 padding, 파란 선은 '가운데 정렬'입니다.
- 페이스북 아이콘은 width를 22px로, 트위터 아이콘은 width를 25px로 지정해 주세요.
<!DOCTYPE html>
<html>
<head>
<title>Paradise Park</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div id="side-navbar">
<img src="logo.png" id="logo" width="136">
<ul id="menu">
<li><a href="#"> HOME </a> </li>
<li><a href="#"> EVENT </a> </li>
<li><a href="#"> TICKET </a> </li>
<li><a href="#"> MEMBERSHIP </a> </li>
<li><a href="#"> NOTICE </a> </li>
</ul>
<div class="link-container">
<a href="http://facebook.com">
<img src="fb.png" width="22">
</a>
<a href="http://twitter.com">
<img src="twitter.png" width="25">
</a>
</div>
</div>
<div id="main">
<div class="hero-header">
<div class="info">
<h1>Welcome to Paradise Park!</h1>
<a href="#">Learn More</a>
</div>
</div>
</div>
</body>
</html>body {
margin: 0;
min-width: 768px;
font-family: 'Noto Sans KR', sans-serif;
}
/* side navbar */
#side-navbar {
background-color: black;
height: 100%;
width: 250px;
position: fixed;
}
#logo {
display: block;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;
}
#menu {
list-style: none;
padding-left: 22px;
}
#menu li:not(:last-child) {
margin-bottom: 30px;
}
#menu li a {
color: white;
text-decoration: none;
}
.link-container {
text-align: center;
margin-top: 85px;
}
.link-container a {
text-decoration: none;
}
.link-container a:first-child {
margin-right: 13px;
}
#main {
margin-left: 250px;
}
#main .hero-header {
text-align: center;
background-image: url("hero_header.jpg");
background-size: cover;
background-position: center center;
height: 750px;
line-height: 750px;
}
#main .info {
display: inline-block;
line-height: normal;
vertical-align: middle;
}
#main h1 {
margin: 0;
margin-bottom: 40px;
color: white;
font-size: 38px;
}
#main a {
padding: 10px 40px;
border: 2px solid white;
font-size: 18px;
color: white;
text-decoration: none;
}본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |