FRONTEND/HTML&CSS
[코드잇 - html/css 시작하기] 06. 여행 사이트
JUNGY00N
2022. 11. 24. 00:29
여행 사이트 만들기
- 조건1. 모든 요소가 가운데 정렬 상태여야 합니다.
- 조건2. ‘travel’ 로고는 가로 길이가 165px, 세로 길이가 58px입니다.
- 조건3. 'travel' 로고 위에는 80px의 여백이 있습니다.
- 조건4. 메뉴는 16px의 ‘Helvetica’ 폰트, 색상은 Hex값 기준 58595B, RGB 기준 (88, 89, 91)입니다.
- 조건5. 현재 머물러 있는 창의 메뉴의 폰트는 진하게 나옵니다.
- 조건6. 각 메뉴 사이의 간격은 20px이고, 매뉴의 위 아래로 60px의 여백이 있습니다.
- 조건7. 사진의 가로 길이는 페이지의 가로 길이의 90%입니다. 예를 들어 페이지의 가로 길이가 1,000px이면, 사진의 가로 길이는 900px이 되어야 합니다.
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./styles.css" rel="stylesheet">
<title> Travel Website </title>
</head>
<body>
<img class="logo" src="images/logo.png">
<div id="menu">
<a class ="menu here" id="Home" href="#" >Home</a>
<a class ="menu" id="Seoul" href="seoul.html">Seoul</a>
<a class ="menu" id="Tokyo" href="tokyo.html">Tokyo</a>
<a class ="menu" id="Paris" href="paris.html">Paris</a>
</div>
<img src="./images/home.png" style="width:90%">
</body>
</html>- seoul.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./styles.css" rel="stylesheet">
<title> Travel Website </title>
</head>
<body>
<img class="logo" src="images/logo.png">
<div id="menu">
<a class ="menu" id="Home" href="index.html" >Home</a>
<a class ="menu here" id="Seoul" href="#">Seoul</a>
<a class ="menu" id="Tokyo" href="tokyo.html">Tokyo</a>
<a class ="menu" id="Paris" href="paris.html">Paris</a>
</div>
<img src="./images/seoul.png" style="width:90%">
</body>
</html>- tokyo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./styles.css" rel="stylesheet">
<title> Travel Website </title>
</head>
<body>
<img class="logo" src="images/logo.png">
<div id="menu">
<a class ="menu" id="Home" href="index.html" >Home</a>
<a class ="menu" id="Seoul" href="seoul.html">Seoul</a>
<a class ="menu here" id="Tokyo" href="#">Tokyo</a>
<a class ="menu" id="Paris" href="paris.html">Paris</a>
</div>
<img src="./images/tokyo.png" style="width:90%">
</body>
</html>- paris.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./styles.css" rel="stylesheet">
<title> Travel Website </title>
</head>
<body>
<img class="logo" src="images/logo.png">
<div id="menu">
<a class ="menu" id="Home" href="index.html" >Home</a>
<a class ="menu" id="Seoul" href="seoul.html">Seoul</a>
<a class ="menu" id="Tokyo" href="tokyo.html">Tokyo</a>
<a class ="menu here" id="Paris" href="#">Paris</a>
</div>
<img src="./images/paris.png" style="width:90%">
</body>
</html>- style.css
.logo{
padding: 80px 0px 0px 0px ;
width: 165px;
height: 65px;
}
#menu{
padding: 60px 0px 60px 0px;
text-align: center;
}
.menu{
text-align: center;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color : #58595B;
padding: 0px 10px 0px 10px;
}
.here{
font-weight: bold;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
a{
text-decoration: none;
}