[SITE] 웹사이트 - 푸터 유형 01

FooterType01

웹페이지 실습을 위한 푸터 유형을 실습해보겠습니다! 이번 푸터 유형은 텍스트와 비슷한 유형으로 웹사이트 가장 하단에 위치합니다.
그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆

---

< figma : 디자인 하기 >

이번 유형은 배너 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇

---

< HTML 소스 : 레아아웃 구조 파악하기 >

디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다.

TIP !
• 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다.
• 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용자 눈에 보이지 않도록 블라인드 속성을 주기 위해 선택자로 블라인드를 설정합니다.
• 각 푸터 메뉴로 큰 틀을 잡은 뒤 그안에서 각각의 메뉴 구조를 설정합니다. 다음으로 카피라이드 등의 텍스트를 작업합니다.

<footer id="footerType" class="footer__wrap nexon section gray">
    <h2 class="blind">푸터 영역</h2>
    <div class="footer__inner container">
        <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>
                </ul>
            </div>
            <div>
                <h3>헤더 영역</h3>
                <ul>
                    <li><a href="#">메뉴 유형01</a></li>
                    <li><a href="#">메뉴 유형02</a></li>
                </ul>
            </div>
            <div>
                <h3>슬라이드 영역</h3>
                <ul>
                    <li><a href="#">슬라이드 유형01</a></li>
                    <li><a href="#">슬라이드 유형02</a></li>
                </ul>
            </div>
            <div>
                <h3>이미지 영역</h3>
                <ul>
                    <li><a href="#">이미지 유형01</a></li>
                    <li><a href="#">이미지 유형02</a></li>
                    <li><a href="#">이미지/텍스트 유형01</a></li>
                    <li><a href="#">이미지/텍스트 유형02</a></li>
                    <li><a href="#">텍스트 유형01</a></li>
                </ul>
            </div>
            <div>
                <h3>컨텐츠 영역</h3>
                <ul>
                    <li><a href="/">카드 유형01</a></li>
                    <li><a href="/">카드 유형02</a></li>
                    <li><a href="/">카드 유형03</a></li>
                </ul>
            </div>
            <div>
                <h3>푸터 영역</h3>
                <ul>
                    <li><a href="/">푸터 메뉴 유형01</a></li>
                    <li><a href="/">푸터 컨텍트 유형02</a></li>
                    <li><a href="/">푸터 이메일 유형03</a></li>
                </ul>
            </div>

        </div>
        <div class="footer__right">
            2022 LEEHAEUN. Portfolio is Power<br>
            All rights reserved.
        </div>
    </div>
</footer>

---

< CSS 소스 : 스타일 적용하기 >

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 참고하면서 html와 번갈아가며 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.
속성에 대한 내용은 코드와 주석을 보면서 이해해봅시다!

TIP !
• 먼저 전체 초기화(Reset)와 폰트 디폴트 설정을 해주는 것이 좋습니다.
• 각 영역과 섹션에 반복적으로 들어가는 속성들은 공통 속성으로 따로 설정하는 것이 좋습니다.
• 컨테이너 설정을 통해 메인 화면 크기와 여백을 설정해준 뒤 메인 콘텐츠인 섹션에게 스타일을 적용시킵니다.
• 푸터 메뉴는 display: flex;를 설정한 뒤 16%로 영역을 나누어 줍니다.

/* font */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
em,
i,
address {
    font-style: normal;
}
li {
    list-style: none;
}
.blind{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* common : 공통 요소(재활용) */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}
.gray {
    background-color: #f5f5f5;
}

/* footerType */
.footer__menu {
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
}
.footer__menu > div {
    width: 16%;
}
.footer__menu h3 {
    font-size: 18px;
    margin-bottom: 20px;
}
.footer__menu li a {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    display: block;
}
.footer__right {
    border-top: 1px solid #d9d9d9;
    text-align: center;
    padding-top: 40px;
    color: #666;
    line-height: 1.5;
}

---

🎉 결과보기 🎉

원본 소스 보기

원본 페이지 보기