개인연습(3) - 서울나들이 홈페이지 만들어보기
서울나들이 홈페이지 만들어보기
오늘은 서울의 유명 스팟을 간단하게 소개하는 서울나들이 홈페이지를 만들어보았다.
이 웹페이지는 저번 수업 때 만들었던 레이아웃과 동일하게 만들었고, 처음부터 그리드를 사용하여 배치해보았다.
한번 수업에서 다뤘던 내용을 복습하는 차원에서 만들어서 그런지 한결 수월하게 진행이 됐다.
캡쳐를 해서 여백이 일정하지 않아보이지만 모두 일정한 여백을 가지고 있고, 전체적인 배치는 저번 수업 때와 동일하다.
HTML 및 CSS 코드 분석
헤더섹션에서는 로고와 사이트메뉴를 담고있는 header_container 박스를 만들고, 콘텐츠를 채워넣었다.
CSS에서는 헤더섹션의 가로정렬을 위해 플렉스를 이용하고 아이템들을 가운데정렬 후, 로고는 왼쪽, 사이트메뉴는 오른쪽으로 나눠주었다. 적당한 여백이 있는 것이 보기 좋아보여 30px의 여백을 설정했다.
로고는 흰색에 가까운 색상을 주었고, 적당한 여백을 위해 좌우 100px의 여백을 주었다. 또한, 사이트이름만 있는 것이 밋밋해 보여서 왼쪽에 5px의 테두리를 주어서 그럴듯하게 보이게 했다.
순서 없는 목록인 사이트메뉴는 가로정렬을 위해 별도의 flex값을 사용했고, 서로의 간격을 조금 벌리기 위해 오른쪽 패딩에 30px의 값을 주었다.
또, 사이트메뉴에 마우스 커서를 올리면 연한 색상의 배경색이 나타나도록 가상선택자를 사용했다.
메인섹션에서는 위 이미지의 반복이다. main_container 박스에 순서 없는 목록을 넣고 그 안에 각 유명 스팟의 이미지와 설명, 위키백과 링크를 채워넣었다.
메인섹션은 grid를 사용했다. 그리드 상태에서 좌우정렬을 위해 grid-template-columns 속성에 1fr 1fr 값을 주었고, 30px의 간격을 설정했다. 또한, 전체 목록의 상하좌우 여백을 설정하여 너무 퍼져보이지 않도록 했다.
목록 중의 세 번째 요소(한강)는 혼자서 2열까지 차지하도록 grid-column 속성에 1 / span 2 값을 주었다.
이미지와 설명, 링크를 담고있는 info_wrapper 박스는 플렉스박스를 사용했고, 모든 모서리의 border-radius 값이 잘 나올 수 있도록 overflow 속성에 hidden 값을 사용했다. 또, 이 박스에는 상하좌우 2px에 5px정도의 블러를 가진 검은색에 가까운 그림자를 추가하여 입체적으로 보이도록 했다.
이미지는 300px의 너비와 200px의 높이를 고정적으로 가지도록 하고 왜곡되지 않도록 object-fit 속성에 cover 값을 사용했다.
설명이 있는 부분은 설명문장과 링크가 세로정렬을 해야하므로 flex-direction 속성에 column 값을 주었고, 거리를 벌리기 위해 space-between 값을 설정했다.
'둘러보기'라고 되어있는 위키백과 링크는 커서를 올리면 푸른 배경색이 나타나도록 했다.
footer섹션에서는 헤더부분에서 썼던 로고를 똑같이 쓰고, 오른쪽에 인스타그램, 페이스북, 트위터 링크를 이미지로 추가해보았다.
footer섹션의 배경색은 밋밋함을 없애기 위해 짙은 파랑색을 사용했고, 가로정렬을 위해 플렉스박스를 이용했다.
그리고 로고와 소셜링크를 안쪽으로 적절히 배치하기 위해 패딩값을 조정해보았다.
웹사이트 아이콘의 사용
이번 연습에서는 저번 수업시간에 한번 하고 지나갔던 아이콘 추가방법을 다시 사용해보았다.
아이콘을 추가했을 뿐인데 뭔가 더 채워진 느낌이어서 이제 연습할 때마다 아이콘을 추가해서 연습을 해봐야겠다는 생각이 든다.
