개인연습(2) - 메가커피 사이드바 만들어보기

 

오늘은 연습삼아 사이드바를 만들어 보았다.

 

사이드바는 홈페이지의 메뉴바를 생각하면 되는데 완성된 모습은 아래 이미지와 같다.

메가커피 사이드바 완성본

실제 홈페이지와 비슷하게 만들었지만 코드를 보면 아이템별 간격조절이 서툰 흔적이 보인다.

 

그러나 지금까지 배운 내용을 바탕으로 복습삼아 만든 것이어서 나름 뜻깊다. 다른 날에는 다른 부분까지 이어서 만들어봐야겠다.

 

코드 분석

사이드바 HTML 코드

먼저 upper_section 안에 모든 내용들을 넣어주었다. 가장 먼저 로고이미지를 넣었고, 가운데에 위치할 메뉴링크들을 앵커태그로 배치했다.

 

오른쪽 부분에는 sns 링크의 이미지가 나타나도록 배치했다.

 

이렇게 총 세 부분의 박스로 나누어 내용들을 채웠다.

사이드바 CSS 코드

CSS는 간격조정에 집중하여 적용해보았다.

 

사이드바는 행으로 배치가 되어야 하므로 display를 flex로 적용했고, 아래 부분에만 테두리를 약하게 주어야 해서 upper_section의 위쪽 테두리가 안보이도록 padding-top값을 30px로 적용했다. 

 

섹션의 각 박스가 가운데쯤에 모이도록 align-items를 center 값을 주고, justify-content를 space-between 값을 적용했다.

 

아래쪽 테두리는 흰색에 가까운 연한 색상을 주고 그림자도 같은 색상으로 연하게 적용했다.

 

가운데 메뉴링크는 간단한 효과들만 적용하여 심플함을 느끼도록 했다.

 

마지막 sns 링크의 이미지들은 세 개의 각 박스가 서로 약간씩 떨어지도록 margin값을 조정했고, 적절한 동그라미테두리와의 거리를 위해 padding값을 3px로 적용했다.

 

또, 이 세개의 박스들이 홈페이지의 완전 오른쪽에 붙어있는 게 아니라 가운데쪽으로 배치되어 있어서 오른쪽 여백값을 20em을 주었다. 20em을 준 이유는 어떻게 되는지 보고싶었기 때문이다. 

 

20em을 주고 관찰해보니 홈페이지가 작아질수록 같이 안쪽으로 움직이며 다른 객체들을 밀어냈다.