반응형
여행 사이트
이미지는 images 폴더 안에 images/logo.png, images/home.png, images/paris.png, images/seoul.png, images/tokyo.png 를 사용하면 됩니다. (css 파일의 위치를 잘 확인해 주세요.)
- 조건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이 되어야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet">
<title>Travel Website</title>
</head>
<body>
<img id="logo" src="images/logo.png" width="165" height="58">
<div id="menu">
<a href="#"> <b>Home</b> </a>
<a href="seoul.html"> Seoul </a>
<a href="tokyo.html"> Tokyo </a>
<a href="paris.html"> Paris </a>
</div>
<img id="photo" src="images/home.png" width="90%">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet">
<title>Travel Website</title>
</head>
<body>
<img id="logo" src="images/logo.png" width="165" height="58">
<div id="menu">
<a href="index.html"> Home </a>
<a href="seoul.html"> Seoul </a>
<a href="tokyo.html"> Tokyo </a>
<a href="#"> <b>Paris</b> </a>
</div>
<img id="photo" src="images/paris.png" width="90%">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet">
<title>Travel Website</title>
</head>
<body>
<img id="logo" src="images/logo.png" width="165" height="58">
<div id="menu">
<a href="index.html"> Home </a>
<a href="#"> <b>Seoul</b> </a>
<a href="tokyo.html"> Tokyo </a>
<a href="paris.html"> Paris </a>
</div>
<img id="photo" src="images/seoul.png" width="90%">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet">
<title>Travel Website</title>
</head>
<body>
<img id="logo" src="images/logo.png" width="165" height="58">
<div id="menu">
<a href="index.html"> Home </a>
<a href="seoul.html"> Seoul </a>
<a href="#"> <b>Tokyo</b> </a>
<a href="paris.html"> Paris </a>
</div>
<img id="photo" src="images/tokyo.png" width="90%">
</body>
</html>#logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
#menu {
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
}
#menu a {
margin-right: 10px;
margin-left: 10px;
font-size : 16px;
color: #58595b;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
}
#photo {
display: block;
margin-left: auto;
margin-right: auto;
}
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.05 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.05 |
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |