1. 여행 사이트 만들기
- 조건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
<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
<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
<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
<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
<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;
}
'FRONTEND > HTML&CSS' 카테고리의 다른 글
| [ Tailwind css] 사용자 정의 애니메이션 추가하기 ( fadeIn , fadeOut ) (0) | 2024.04.17 |
|---|---|
| [ CSS ] position : sticky 사용하기 ( 요소가 스크롤을 따라오게 하기 ) (0) | 2024.03.01 |
| [ HTML ] 모바일에서 input , textarea 입력 활성화 시 화면이 확대되는 이슈 ( meta name="viewport" 태그 ) (0) | 2024.02.25 |
| [ 생활코딩 - WEB1] HTML & Internet (0) | 2022.12.07 |
| [코드잇 - HTML/CSS 시작하기] 5. 텍스트 스타일링 (0) | 2022.11.24 |
