페이지 footer 영역 마무리, 최종 완성

전 시간에는 footer영역을 하다가 끝났었습니다.

오늘은 footer의 나머지 영역을 끝내고, 이 페이지를 완성하도록 하겠습니다.

​

왼쪽에 붙어 있는 텍스트 먼저 css를 하도록 하겠습니다.

 

footer .top > div ul li {float:left;}
footer .top > div ul li a {color:#fff;font-size: 13px 0;line-height: 45px;}

 

앞서 ul에도 float left를 줬었지만 텍스트들도 리스트의 형태가 아닌 가로로 쭉 정렬되어 있어야 하기에

ul li에도 float left값을 줬습니다.

그리고 텍스트 설정과 세로 가운데 정렬을 위해 line-height값을 세로 크기값으로 주게 되면

이렇게 됩니다.

 

footer .top > div ul li {float:left;padding:0 19px 0 0;}

 

추가로 글간격을 오른쪽 padding값으로 19px을 주었습니다.

(a 태그에 주지 않고 부모인 li태그에 padding을 주는 이유는 a 태그에 padding을 주게 되면 여백을 준

공간까지 클릭이 되기 때문에 그런 상황을 방지하기 위해서입니다.)

​

다음은 텍스트 사이의 구분선을 그려주는데, 자세히 보면 맨 처음 이 페이지를 제작할 때 위 베너 부분에

똑같은 구역이 있습니다.

바로 여기의 맨 오른쪽 부분인데요.

 

header .spot li:after {content: ""; position: absolute; left: 0; top: 50%;
width: 1px; height: 7px; background: #ccc;  transform: translateY(-50%);}
header .spot li:first-child:after {display: none;}

 

그 때의 css 코드 내용입니다.

그럼 여기의 코드도 저 코드와 비슷하겠죠? 한 번 해 보겠습니다.

 

footer .top > div ul li {position: relative;float:left;padding:0 19px 0 0;}
footer .top > div ul li:after {content:"";position: absolute;right: 9px;top: 50%;margin-top: -4px; width: 1px;height: 8px;
background: #70767a;}
footer .top > div ul li:last-child:after {display: none;}

 

마찬가지로 부모인 li에 relative, li:after에는 absolute를 줘서 li 기준 위치 조정을 가능하게 합니다.

그리고 width와 height, background로 색깔을 줘서 세로 막대모양을 만들고, 텍스트로부터 오른쪽으로

9px, top 50%를 주면 텍스트 사이의 완전한 중앙에 위치하진 않습니다.

이 때 위의 베너처럼 translateY 값을 -50%를 줘서 위로 올릴 수 있지만 다른 방법으로 margin-top을

활용했습니다.

이렇게 가운데로 위치해 주고, 마지막 E-Purchase(last-child)의 오른쪽에는 구분선이 필요 없으니

display none을 주면 이 부분은 완성이 됩니다.

 

이제 이 부분을 만져 주면 footer의 top 부분은 끝날 것 같습니다.

 

footer .top > div div p {display: inline-block;background: #2a3033; color:#fff; width: 242px; 
height: 45px; text-align: center;line-height: 45px;}

 

p태그에 inline-block요소를 줘서 현재 줄바뀜이 되어 있는데 줄바꿈이 아닌 바로 옆으로 붙여 줍니다.

그리고 색깔, 크기와 세로 가운데 정렬까지 해 주면,

일단 이런 형태가 됩니다.

 

footer .top > div div select {padding:0 0 0 21px;width: 200px; height: 45px;font-size: 12px;color: #191919;
box-sizing: border-box;}

 

가로세로 크기값을 주고 텍스트 설정과 텍스트의 왼쪽에 21px만큼의 padding, 크기 변화를 방지하는

box-sizing까지 설정을 해 주고 실행을 해 보겠습니다.

세로 위치가 미묘하게 맞지 않습니다.

 

footer .top > div div select {padding:0 0 0 21px;width: 200px; height: 45px;font-size: 12px;color: #191919;
box-sizing: border-box;border:none; vertical-align: 3px;}

 

border none과 vertical-align값을 새로 추가를 시켰습니다.

 

select { height:32px; font-size:13px; color:#373737; border:1px solid #e9e9e9;
background:#fff;}

 

default.css의 코드를 보시면 select에 대한 기본 설정이 이렇게 되어 있는데, 저기 border에 대한 설정이

기본적으로 되어 있습니다.

그래서 border none으로 지워 주고, vertical값으로 3px을 줘서 위치값을 위로 살짝 이동시켰습니다.

이제 세로값은 좀 맞는데 세로 크기가 select 태그 쪽이 살짝 더 큽니다.

 

footer .top > div div select {padding:0 0 0 21px;width: 200px; height: 44px;font-size: 12px;color: #191919;
box-sizing: border-box;border:none; vertical-align: 3px;}

 

select의 height값을 1px 줄여보도록 할게요.

이제 footer의 .top 영역은 완성이 되었고, 아래 btm 클래스 영역을 할게요.

 

 

footer .btm {background: #4c5459; padding: 40px 0 44px;text-align: center;}
footer .btm p {display: inline-block;width: 131px;height: 51px;
background:url(../image/sp_com.png) no-repeat -150px 0;color: transparent;}

 

전체를 감싸고 있는 btm클래스에 배경색, 안의 컨텐츠와의 padding값 위아래, text-align 가운데 정렬을

시켜 줬습니다.

그리고 p 태그는 원래 block이 기본 속성인데 그럼 center값이 먹지 않기에 inline-block으로 바꿔

center가 먹히면서 크기값 지정까지 가능하게 바꿨습니다.

그리고 원래 "한솔홈데코"라는 텍스트를 우리가 저 이미지가 들어갈 자리에 적어 줬었는데 텍스트를

가리기 위해 투명값인 transparent를 줬습니다.

그리고 background로 이미지를 넣는 것은 많이 했었으니 간략히 설명만 하겠습니다.

url(해당 이미지 경로값), no-repeat(이미지가 반복되지 않음), -150px 0(sp_com.png에서 해당

이미지의 xy축값)

결과적으로 아렇게 css가 들어갑니다.

 

 

footer .btm li {position: relative;display: inline-block;color: #fff; font-size: 14px;padding:0 10px;}
footer .btm li:after {content: "";position: absolute;right: 0; top: 50%; margin-top: -4px; 
width: 1px; height: 8px;background: #70767a;}
footer .btm li:last-child:after {display: none;}

 

먼저 ul li가 지금 리스트의 원래 형태처럼 세로로 정렬이 되어 있기에 inline-block값을 줘서 가로로 쭉

나열되도록 했습니다.

(li는 block요소라 한 줄을 다 차지해서 위의 이미지와 같이 뜬 것이고, inline-block을 주면 inline 요소의

그 공간만 차지한다는 특성 때문에 가로로 정렬이 되게 됩니다.)

​

텍스트의 설정과, 좌우로 여백을 줬는데 .top에서는 우측으로 여백을 줬었습니다.

.top에서는 float left로 좌측 배치를 했기 때문에 우측 여백을 준 것이고 지금은 가운데 정렬이므로

좌우측 여백을 나눠서 넣어 준 것입니다.

그 후 위의 클래스 top에서 했던 방법과 똑같이 리스트 사이에 구분선을 넣고 여백을 줬습니다.

그럼 이미지 아래의 리스트까지 css가 끝났습니다.

추가로 ul에 위아래 padding값을 줘서 간격을 좀 벌리겠습니다.

 

footer .btm ul {padding:32px 0 14px;}

 

이제 맨 밑의 마지막 텍스트 css까지 해서 마무리 해 주도록 하겠습니다.

 

footer .btm address {font-size: 14px; color: #fff;}

 

​

​

​

이로써 11개의 포스팅동안 계속 작업했었던 임의 홈페이지를 html과 css를 이용해 디자인을 했는데

완성을 했습니다.

원본 페이지와,

우리가 계속 제작했던 페이지의 풀 스크린샷 비교입니다.

​

이로써 이 페이지에 대한 작업은 끝마치겠습니다!

 

 

 

 

 

 

 

 

 

 

 

https://www.inflearn.com/course/%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%A6%AC%EB%B2%A0%ED%95%98%EC%96%80/dashboard

이 내용은 해당 강의의 내용을 참고하였음을 밝힙니다.

(강의하시는 분께 양해를 구했습니다.)