한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
FOOTER유형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* reset */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.mt10 {margin-top: 10px !important}
.mt20 {margin-top: 20px !important}
.mt30 {margin-top: 30px !important}
.mt40 {margin-top: 40px !important}
.mt50 {margin-top: 50px !important}
.mt60 {margin-top: 60px !important}
.mt70 {margin-top: 70px !important}
.mb10 {margin-bottom: 10px !important}
.mb20 {margin-bottom: 20px !important}
.mb30 {margin-bottom: 30px !important}
.mb40 {margin-bottom: 40px !important}
.mb50 {margin-bottom: 50px !important}
.mb60 {margin-bottom: 60px !important}
.mb70 {margin-bottom: 70px !important}
/* commmon */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
li {
list-style: none;
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* footer__wrap */
.footer__wrap {
background-color: #f5f5f5;
}
.footer__inner {
box-sizing: border-box;
height: 600px;
}
.footer__menu {
display: flex;
}
.footer__menu > div {
width: 16.666%;
}
.footer__menu > div h3 {
margin-bottom: 13px;
}
.footer__menu > div li {
font-size: 14px;
line-height: 1.9;
}
.footer__menu > div li a {
color: #666;
}
.footer__right {
margin-top: 50px;
border-top: 1px solid #d9d9d9;
padding-top: 50px;
text-align: center;
font-style: normal;
line-height: 1.6em;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<footer class="footer__wrap section nexon">
<div class="container">
<h2></h2>
<div class="footer__inner">
<div class="footer__menu">
<div>
<h3>가구 사이트</h3>
<ul>
<li><a href="#">소개하기</a></li>
<li><a href="#">가구 고르는 방법 첫번째</a></li>
<li><a href="#">나에게 맞는 인테리어</a></li>
<li><a href="#">가구 고르는 방법 두번째</a></li>
<li><a href="#">셀프 플래닝</a></li>
<li><a href="#">요즘 대세는 미니멀리즘</a></li>
</ul>
</div>
<div>
<h3>고객문의</h3>
<ul>
<li><a href="#">고객지원</a></li>
<li><a href="#">자주 묻는 질문</a></li>
<li><a href="#">문의하기</a></li>
<li><a href="#">배송조회</a></li>
<li><a href="#">교환 환불</a></li>
</ul>
</div>
<div>
<h3>제품문의</h3>
<ul>
<li><a href="#">품질 보증</a></li>
<li><a href="#">제품 리콜</a></li>
<li><a href="#">피드백</a></li>
<li><a href="#">부품신청</a></li>
</ul>
</div>
<div>
<h3>쇼핑하기</h3>
<ul>
<li><a href="#">쇼핑하기</a></li>
<li><a href="#">헤이오더</a></li>
<li><a href="#">Furniture for Business</a></li>
<li><a href="#">Furniture 모바일 앱</a></li>
<li><a href="#">제품 사용 팁/가이드</a></li>
<li><a href="#">제품 구매 가이드</a></li>
</ul>
</div>
<div>
<h3>서비스</h3>
<ul>
<li><a href="#">Furniture 서비스</a></li>
<li><a href="#">배송 서비스</a></li>
<li><a href="#">조립 서비스</a></li>
<li><a href="#">설치 서비스</a></li>
<li><a href="#">주방 서비스</a></li>
<li><a href="#">구매 상담 서비스</a></li>
<li><a href="#">인테리어 디자인 서비스</a></li>
<li><a href="#">바이백 서비스</a></li>
</ul>
</div>
<div>
<h3>Furniture 이야기</h3>
<ul>
<li><a href="#">Furniture 이야기</a></li>
<li><a href="#">브랜드 소개</a></li>
<li><a href="#">집에서의 생활</a></li>
<li><a href="#">지속가능한 생활</a></li>
<li><a href="#">내가 아끼는 집, </a></li>
<li><a href="#">나를 아끼는 집</a></li>
<li><a href="#">뉴스룸</a></li>
<li><a href="#">채용정보</a></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 kimhyeonbeen 가구 사이트 Portfolio is Power<br>All Right Reserved
</address>
</div>
</div>
</footer>
</body>
</html>푸터 유형은 섹션이 하나여서 이름을 푸터로 만들었다.
그 섹션 안에 main__menu 박스를 만든 뒤 그 안에 6개의 div 박스를 넣어 6구역으로 텍스트를 배치한다.
각 박스 별 CSS를 설정합니다. 안 쪽 여섯개 박스를 옆으로 정렬 해주기 위해 main__menu 에 display : flex 를 설정 해줍니다.
.footer__menu {
display: flex;
} .footer__menu > div {
width: 16.666%;
}
.footer__menu > div h3 {
margin-bottom: 13px;
}
.footer__menu > div li {
font-size: 14px;
line-height: 1.9;
}
.footer__menu > div li a {
color: #666;
}
.footer__right {
margin-top: 50px;
border-top: 1px solid #d9d9d9;
padding-top: 50px;
text-align: center;
font-style: normal;
line-height: 1.6em;
color: #666;
font-size: 14px;
}여섯개 박스마다 넓이 값을 16.6666% 씩 주고 안 쪽 각 h3 li a 태그에 마진과 각각 폰트 사이즈를 설정해줍니다.
CSS 상대 단위 - em과 rem
상대 단위란?
상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 본 포스팅에서 다룰 em과 rem을 포함해 %, vw, vh 등이 대표적인 CSS의 상대 단위입니다.
반면 절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다. 대표적으로 예전부터 현재까지 많이 사용되는 px와 pt를 들 수 있고, cm나 in와 같은 실생활에서 많이 사용되는 단위들도 이 절대 단위에 범주에 속합니다.
쉽게 말해, 실생활에서 1cm가 항상 1cm인 것처럼, 1px는 항상 1px(=0.02645833cm)이지만, 1em이나 1rem은 항상 고정된 길이를 나타나지 않고 대신 브라우저가 어떤 기준에 따라 계산을 하여 px로 변환을 해줍니다. 따라서 그 기준이 무엇인지를 파악하는 것이 em과 rem을 정확히 이해하는데 핵심이 됩니다.
em과 rem의 공통점
뭐 적어도 px나 pt와 같은 절대 단위를 쓰는 것 보다는 나을테니라는 생각으로 많은 분들이 em과 rem을 혼용해서 사용하시는 것 같습니다. 사실 브라우저에서 이 두 단위가 같은 길이로 계산될 때가 상당히 많고, 둘 중에 뭐를 쓰든 큰 차이가 나지 않아서 그럴 수도 있을 것입니다.
em과 rem의 차이점
em과 rem 단위의 기준은 font-size 속성 값이라고 했는데, 정확히 어디에 있는 font-size 속성 값인지에 따라 차이가 발생합니다. em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됩니다. 반면에 rem에서 r은 root, 즉 최상위 요소를font-size 속성 값 의미합니다. HTML에서 최상위 요소는 <html> 입니다. 따라서 rem 경우, html 요소의 font-size 속성 값이 기준이 됩니다.
vw / vh
CSS 작업을 할 때 주로 사용하는 단위는? 픽셀(px)입니다.
하지만 고정 단위인 px 대신 유동 단위인 %를 사용하면 좀 더 유연한 코드를 만들 수 있습니다.
예를 들어 width:50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS입니다
vw와 vh 활용법
이들 단위는 뷰포트 영역 전체를 차지하게 하거나, 그 일부분만 차지하게 하는 데 유용하게 쓸 수 있습니다.
당장 100vw, 100vh만 써도 너비와 높이를 꽉꽉 채울 수 있습니다.
사용자가 브라우저 창 크기를 바꾸거나 모바일 화면을 회전시켜도 상관이 없습니다.
또, 이들을 calc()와 결합하면 좋은 시너지를 낼 수 있습니다.
헤더영역 높이가 50px이고 컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶다면, height: calc(100vh - 50px);을 지정해주면 됩니다.