Website 만들기에 대해서 알아보자

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

figma로 만든 다음의 푸터 유형을 코딩으로 만들어 보겠습니다.

링크: 푸터 영역 01 (daanbi1345.github.io)

간략한 설명:

웹사이트의 하단 부분이라서 간단합니다.

6가지의 카테고리로 나눴습니다.

이제 body와 style을 나눠서 세부적인 설명을 하겠습니다.

body

<body>
    <section class="section footer__wrap nexon">
        <div class="container">
            <h2 class="blind">푸터</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>
                        </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="#">숙소 알아보기</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="#">여행객과 어울리기</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>
            </div>
            <div class="footer__sitename">2023 jongyung travel site</div>
        </div>
    </section>
</body>

이전에 웹 사이트를 만들었을 때처럼 여백을 주기 위해서 section 영역을 넣었습니다.

각 6가지의 카테고리들은 제목과 내용을 한 박스에 넣었습니다.

제목은 h3 태그에, 내용은 li 태그에 감싸고 링크를 걸 수 있도록 a 태그를 넣었습니다.

a 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.

이러한 a 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다.

따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.

style

 <style>
    * {
        margin: 0;
        padding: 0;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }
    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;
    }
    .container {
        width: 1160px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .blind {
        display: none;

    }
    .footer__menu {
        flex-wrap: wrap;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .footer__menu div {
        width: 16.6666%;
    }
    .footer__menu h3 {
        margin-bottom: 13px;
    }
    .footer__menu li {
        line-height: 1.9;
        font-size: 14px;

    }
    .footer__menu li a {
        color: #666;
    }
    .footer__sitename {
        margin-top: 50px;
        border-top: 1px solid #d9d9d9;
        padding-top: 50px;
        text-align: center;
        font-size: normal;
        line-height: 1.6em;
    }
</style>

font-weight는 글자의 굵기를 정합니다.
기본값은 normal 이고,

normal : 보통 굵기이다. 숫자 400과 같습니다.
bold : 굵은 굵기이다. 숫자 700과 같습니다.
bolder : 상속된 값보다 굵은 굵기입니다.
lighter : 상속된 값보다 얇은 굵기입니다.
number : 100, 200, 300, 400, 500, 600, 700, 800, 900
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 값을 상속받습니다.

flex-wrap 속성은 Flex 컨테이너에서 Flex 아이템을 한 줄로 표시할 지, 또는 행(行)을 되풀이 해서 복수의 행(行)으로 표시할지 여부를 지정합니다.

wrap: flex 아이템이 flex 컨테이너 안에서 표시되도록, 줄 바꿈합니다.
nowrap: 행(行)의 줄 바꿈을 하지 않습니다. 한 줄로 표시합니다.
wrap-reverse: "wrap" 속성 값과 같이, 줄 바꿈하여 표시되지만 Flex 항목의 순서가 역방향이 됩니다.

text-align 은 block 요소 안에 있는 inline요소를 정렬합니다.

inline 요소 : 줄 속에 끼워 넣는 요소(span, b, a, img 등)
block 요소 : 해당 요소가 속한 줄은 가로 화면 전체 100%를 차지하며 앞뒤로 줄 바꿈이 됨(p, div, ol, ul, table 등)

block 요소에만 text-align 속성을 적용할 수 있습니다.
정렬되는 것은 block 요소 안에 있는 inline요소(text 뿐만 아니라 img 등도 포함)만 가능합니다.

text-align: left 왼쪽 정렬
text-align: right 오른쪽 정렬
text-align: center 중앙 정렬
text-align: justify 왼쪽과 오른쪽 열에 맞춰 화면을 늘어뜨림

justify-content는 가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다.

속성은

flex-start (default): 요소들을 컨테이너의 왼쪽으로 정렬
flex-end: 요소들을 컨테이너의 우측으로 정렬
center: 요소들을 컨테이너의 중앙으로 정렬
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
space-evenly(FireFox Only): 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

jongyung