실습과제. 여행 사이트 만들기

이미지는 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이 되어야 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

셀프 채점

다음 항목들이 제대로 구현되었는지 확인해 보세요!

 

모든 요소가 가운데 정렬되어 있다.

 

요소의 여백과 길이가 모두 문제에서 제시한 대로 설정되었다.

 

각 메뉴에는 밑줄이 없다.

 

현재 머물러 있는 창의 메뉴의 폰트는 진하게 나온다.

 

사진이 브라우저 전체 길이의 90% 길이로 출력되도록 작성하였다.

 

각 메뉴를 클릭하면 해당 도시 이미지로 바뀌고, 메뉴 글씨도 진하게 출력된다.