0720 개발일지

Yesol Lee·2021년 7월 20일

대구AI스쿨

AI스쿨_개발일지

목록 보기

17/57

학습내용

네이버 메인 페이지 오른쪽 부분, footer 부분
github소스코드

네이버메인2

main-right

로그인 박스 만들기

로그인 버튼을 <a>태그로 제작: display:block으로 크기 조절하게 변경하였다.
왼쪽 배너와 크기 맞도록 padding값을 약간 조정하였다.

#main-right #account a {
    display: block;
    width: 100%;
    background-color: #19ce60;
    border-radius: 2px;
    padding: 13px 0;
    margin-bottom: 14px;

    color: #ffffff;
    font-weight: 700;
    text-align: center;
    font-size: 13px;
}

쇼핑 리스트 - 제목 부분

주로 flex를 사용해서 좌우 배치를 하였다.

<div class="shop-title">
    <h3><a href="#">트렌드쇼핑</a></h3>
    <div class="right">
        <h4><a href="#">상품</a></h4>
        <h4><a href="#">쇼핑몰</a></h4>
        <h4><a href="#">MEN</a></h4>
    </div>
</div>

#main-right #shop-wrap .shop-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#main-right #shop-wrap .shop-title .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0;
}

쇼핑 리스트: 쇼핑몰 목록

flex: space-between의 단점: flex-wrap: wrap 상태에서는 부모의 크기를 넘어가는 내용들은 줄바꿈이 된다. 이 때 내부 콘텐츠의 개수가 동일하지 앟으면 두번째 줄 컨텐츠가 극단적으로 배치될 수 있다.
내부 요소의 개수, 길이가 깔끔하게 떨어지지 않으면 float:left를 사용하라고 하셨다.
그런데 영상과 달리 실제 사이트에서는 쇼핑몰 요소들의 이름 길이가 달라서 개수가 같아도 각 줄에 동일한 개수가 들어가지 않았다. 네이버 사이트는 각 줄이 별개 공간으로 분리되어 있었는데 이 문제 때문에 그러지 않았을까 생각해 보았다.
그래서 나는 줄마다 다른 <ul>태그로 나누고 전체 영역을 감싸는 <div>를 하나 더 사용했다.

<div class="commerce-lists-wrap">
    <ul class="commerce-lists">
        <li><a href="#">옥션</a></li>
        <li><a href="#">G마켓</a></li>
        <li><a href="#">이마트몰</a></li>
        <li><a href="#">옥션</a></li>
        <li><a href="#">G마켓</a></li>
        <li><a href="#">이마트몰</a></li>
    </ul>
    <ul class="commerce-lists">
        <li><a href="#">옥션</a></li>
        <li><a href="#">G마켓</a></li>
        <li><a href="#">이마트몰</a></li>
        <li><a href="#">옥션</a></li>
        <li><a href="#">11번가</a></li>
        <li><a href="#">이마트몰</a></li>
    </ul>
</div>

#main-right #shop-wrap .shop-content .commerce-lists-wrap {
    background-color: #f7f9fa;
    padding: 12px 4px;
    border-bottom: solid 1px #dae1e6;
}
#main-right #shop-wrap .shop-content .commerce-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

쇼핑 리스트: 상품 목록

이전에 많이 해 본 대로 이미지와 글자가 하나의 리스트 아이템 안에 들어있는 리스트를 만들어 flex로 정렬했다.

footer 내용도 container class div로 한번 감싸서 범위 및 위치를 지정해주었다.

기업 안내 리스트 만들기

기업 안내 리스트 자체는 문자열 리스트를 x축 정렬하는 것이 다라서 수월했는데 문자열 사이 세로줄을 넣는 방식이 독특해서 기억에 남는다. 네이버에서 실제로 사용한 코드를 그대로 붙여넣었다.
- li::before: 태그의 앞에 꾸밈을 추가하는 before를 이용하여 세로줄을 제작했다.
- vertical-align:-1px: 지금까지는 여기 middle 등의 값을 주어 사용했는데, 이 속성에 픽셀값을 전달하면 위아래 위치 이동을 할 수 있다는 것을 알게 되었다.
- initial: 모든 list 태그에 before을 적용한 후, 맨 앞 요소에만 before을 해제하고 싶을 때 initial 속성값을 사용하여 효과를 해제해 주었다.

#main-footer .corp-lists li {
    display: inline-block;
    vertical-align: middle;
}
#main-footer .corp-lists li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background-color: #e4e8eb;
    vertical-align: -1px;
}
#main-footer .corp-lists li:first-child::before {
    content: initial;
}

어려웠던 점

쇼핑몰 리스트를 만들 때, 영상에서는 똑같은 쇼핑몰 이름을 12개 만들어서 사용해서 이름의 길이가 같았다. 그래서 전체 영역을 flex로 정렬했을 때 한 줄에 들어간 요소 개수가 같았다. 하지만 실제 사이트는 쇼핑몰 이름의 길이가 제각각이었다.
세로 선을 만들고 싶을 때 border를 활용하는 것밖에 생각을 못했었다.