-
실습-여행사이트만들기HTML&CSS 2022. 10. 13. 08:24
조건
- 조건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이 되어야 합니다.
폴더구조 // styles.css #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-left: 10px; margin-right: 10px; font-size:16px; color: #58595b; text-decoration: none; font-family: Helvetica, Arial, sans-serif; } #photo { display: block; margin-left:auto; margin-right:auto; }// index.html <!DOCTYPE html> <html> <head> <title></title> </head> <link rel="stylesheet" href="./css/styles.css"> <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>출처: 코드잇
'HTML&CSS' 카테고리의 다른 글
a태그 (0) 2022.10.25 텍스트 가운데 정렬 방법 &이미지 가운데 정렬 방법 (0) 2022.10.12 Span태그 (0) 2022.10.12 Web폰트가 아닌, 직접 가지고 있는 폰트 사용하기 (0) 2022.10.09 구글폰트사용해보기 (0) 2022.10.09