요번에는 회사정보나 사이트의 정보를 표기하는 공통 푸터부분을 만들어 보도록 하겠습니다.
만들 디자인은 아래와 같습니다.
간단한 연락처와 주소 그리고 copy부분을 작성하였습니다.
html에 태그 작성하기
먼저 앞 포스팅에서 만들었던 소스 하단부위에 푸터영역을 추가해 주도록 하겠습니다.
아래와 같이 코드를 작성하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>셀프다 교육용</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<!-- 공통헤더 -->
<div class="header">
<a href="#none" class="logo">
<img src="images/logo.svg" alt="셀프다 교육용 로고">
</a>
<div class="nav_btn">
<span class="btn"></span>
<a href="#s01">회사소개</a>
<a href="#s02">광고채널</a>
<a href="#s03">파트너스</a>
<a href="#s04">포트폴리오</a>
<a href="#s05">고객센터</a>
</div>
</div>
<!-- 공통푸터 -->
<div class="footer">
<div class="cs">
<p>CUSTOMER CENTER</p>
<ul>
<li>TEL : 02-1234-5678</li>
<li>FAX : 02-1234-5678</li>
<li>EMAIL : keyup@keyup.co.kr</li>
</ul>
</div>
<div class="company_info">
<p>(주)셀프 KEYUP | 대표이사 : 홍길동 | 사업자등록번호 : 123-45-4561 | 주소 : 서울 강남구 테헤란로1길 123, 1층 | 운영시간 : 09:00~18:00 | 휴무일 : 주말 및 공휴일</p>
<p class="copy">COPYRIGHTⓒ주식회사 셀프 All rights reserved. | Designed by KEYUP.</p>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html><div>에 class 명을 footer라 주고
안쪽 태그들에게도 각각 클래스명을 주어 태그들의 이름을 정해 주었습니다.
이 class의 이름들을 이용하여 css를 이용하여 푸터영역을 디자인해보겠습니다.
특별한 작동요소가 없기 때문에 js는 사용하지 않도록 하겠습니다.
CSS 작성하기
위 작성된 html의 클래스 명을 기반으로 css로 레이아웃 및 디자인을 설정해 주었습니다.
/** footer **/
.footer{padding: 5rem 10rem; background: #424243}
/** 해당영역의 패딩값과 백그라운드 색상을 작성하였습니다. **/
.footer .cs{padding-bottom: 30px; border-bottom: 1px solid #fff; display: flex; gap:40px; margin-bottom: 30px}
/** cs라는 클래스로 안쪽 태그들을 감싸 해당태그들이 flex처리되도록 하였습니다.. **/
.footer .cs p{font-size: 18px; color: #fff}
.footer .cs ul{display: flex;}
.footer .cs ul li{font-size: 16px; color: #fff; }
.footer .cs ul li + li{margin-left: 15px; padding-left: 15px; position: relative}
.footer .cs ul li + li::before{content: ''; position: absolute; left: 0; top: 5px; width: 1px; height: 10px; background: #fff; }
/** cs클래스 안쪽의 태그들에게 폰트사이즈, 정렬 등 css문구를 사용하여 디자인하였습니다. **/
.company_info{}
/** company_info라는 클래스를 만들었습니다. 스타일요소가없지만 혹시 모를 상황을 대비해 일단 만들었습니다. **/
.company_info p{font-size: 14px; color: #fff}
.company_info p.copy{margin-top: 15px; opacity: .5}
/** .company_info 안쪽 태그들의 폰트사이즈와 색상을 주었습니다. **/*추가된 스타일시트
opacity:. 5 (해당 클래스에 opacity값(투명도를) 50%로 설정합니다.)
자 이렇게 작성하였으면 위 이미지와 같이 코딩이 완료되었습니다.!
다음엔 slick.js를 사용하여 메인 visual 슬라이드 영역을 만들어 보도록 하겠습니다.
아래 링크에서 사용할 오픈소스를 미리 확인해 볼 수 있습니다.
https://kenwheeler.github.io/slick/
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
'무작정 따라하기' 카테고리의 다른 글
| 무작정 따라하기 (랜딩페이지) Step.03 (0) | 2023.09.06 |
|---|---|
| 무작정 따라하기 (랜딩페이지) Step.02 (0) | 2023.08.31 |
| 무작정 따라하기 (랜딩페이지) Step.01 (0) | 2023.08.30 |