[HTML & CSS] 마켓컬리 탑바 제작(1)

[마켓컬리 탑바 제작]

[html]

<div class="top-bar-section">
    <div class="container">
        <div class="left-box"><a href="#">카테고리</a></div>
        <div class="center-box">
            <div class="li"><span>아이템-1</span></div>
            <div class="li"><span>아이템-2</span></div>
            <div class="li"><span>아이템-3</span></div>
            <div class="li"><span>아이템-4</span></div>
        </div>
        <div class="right-box"><a href="#">배송안내</a></div>
    </div>
</div>

 

[css]

a {
    color: inherit;
    text-decoration: none;
}

• a태그의 노멀라이즈 (글자색상은 검은색, 밑줄 제거)

 

.top-bar-section {
    border: 1px solid red;
}

• top-bar-section 클래스는 div태그이고 div는 display 속성이 block이기 때문에 상위 엘리먼트인 body의 너비를 100% 상속받아 화면 너비만큼 크기를 가진다.

 

.top-bar-section > .container {
    border: 1px solid orange;
    width: 1080px; height: 56px;
    margin-left: auto; margin-right: auto;
    font-size: 0;
}

• container 클래스는 탑바의 너비 1080px와 높이 56px를 지정해주고 가운데정렬을 위해 margin-left: auto;와 margin-right: auto;를 지정해준다.
• 하위 엘리먼트인 left, center, right-box를 한줄에 나열했을 때 inline-block의 자체 여백때문에 font-size를 0으로 지정한다.

 

.top-bar-section > .container > .left-box {
    /*  border: 1px solid black; */
    background-color: green;
    width: 250px; height: 100%;
    display: inline-block;
    margin-left: 10px; margin-right: 10px;
    font-size: 16px;
    vertical-align: top;
}
.top-bar-section > .container > .right-box {
    /*  border: 1px solid black; */
    background-color: green;
    width: 250px; height: 100%;
    display: inline-block;
    margin-left: 10px; margin-right: 10px;
    font-size: 16px;
    vertical-align: top;
}

• 하위엘리먼트에서 높이는 되도록 100% 상속받도록 코드를 짜는 것이 좋다. 높이의 경우 계속해서 수치가 바뀔수 있기 때문에 매번 바꿀때마다 태그별로 수정하는 것보다 상위엘리먼트의 속성값 한번만 바꿔주는 것이 유지보수에 편리하다.
• container 클래스 아래에 하위 엘리먼트들은 높이가 동일하기 때문에 되도록 height 속성을 100%로 지정하여 높이를 100% 상속받도록 코드를 짜는게 편리하다. 높이의 수치가 계속해서 바뀔 수 있기 때문에 매번 바꿀때마다 태그별로 수정하는 것보다는 상위 엘리먼트의 속성값을 바꾸고 100% 상속받도록 하는게 유지보수를 할 때도 좋다.
• left, center, right-box는 한줄에 나열해야되기 때문에 display 속성을 inline-block으로 지정한다.
• inline-block의 여백을 제거하기 위해 상위 엘리먼트에서 font-size를 0으로 지정했지만, 각 엘리먼트에 글자를 적기 위해 font-size를 다시 16px로 지정한다.
• vertical-align(수직정렬)은 inline-block끼리만 발생한다.
• vertical-align: top;은 텍스트 기준으로 위아래 줄을 그었을 때 상단 줄에 맞게 수직정렬을 한다.

 

.top-bar-section > .container > .center-box {
    /*  border: 1px solid black; */
    background-color: green;
    width: 520px; height: 100%;
    display: inline-block;
    margin-left: 10px; margin-right: 10px;
    font-size: 0;
}

.top-bar-section > .container > .center-box > .li {
    background-color: blue;
    border: 1px solid #000;
    display: inline-block;
    font-size: 16px;
    /*  width: 130px; height: 60px; */
    width: 130px; height: 100%;
    box-sizing: border-box;
    text-align: center;
    /*  padding-top: 17.5px; padding-bottom: 17.5px; */
}

.top-bar-section > .container > .center-box > .li > span {
    display:inline-block;
    padding-top: 17.5px; padding-bottom: 17.5px;
}

• left, center, right-box 아래에 텍스트를 가운데 정렬을 위해 padding을 사용한다.
• padding 계산 방법은 전체 높이인 56px에서 '아이템-1'의 텍스트 높이인 21px를 빼고 위아래 여백을 주기위해 2로 나눠 padding-top: 17.5px와 padding-bottom: 17.5px를 추가한다.
• padding으로 가운데 정렬을 하면 텍스트가 가운데에 정렬이 되지 않은 것 처럼 보일 수 있다.

 

.top-bar-section > .container > .left-box > a {
    line-height: 56px;
}

.top-bar-section > .container > .right-box > a {
    line-height: 56px;
}

• line-height를 사용하여 가운데 정렬을 한다면 padding을 활용한 가운데 정렬보다 더 정확하게 가운데에 위치한다.

 

See the Pen 마켓컬리 탑바 제작 by psm817 (@psm817) on CodePen.