학습내용

오늘분 실습 영상 다시보기, helbak 사이트 혼자 따라하기
github소스코드

helbak 레이아웃 따라하기

원래 오늘 봐야했던 부분을 어제 다 해버려서 오늘은 전에 혼자 만들어 본 helbak 사이트 html 설계도에 css 요소를 추가해보기로 했다.
helbak사이트링크

header

<header>
    <div class="logo">
        <img src="img/helbak_logo.PNG" alt="helbak 로고">
    </div>
    <div class="nav">
        <nav>
            <ul class="nav-lists">
                <li class="nav-item">
                    <a href="#">menu1</a>
                </li>
                <li class="nav-item">
                    <a href="#">menu2</a>
                </li>
                <li class="nav-item">
                    <a href="#">menu3</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<header> 전체

• width: 100%: 화면 넓이 끝까지 차지
• position: fixed: 스크롤 내려도 헤더는 자리 유지함
• display:flex: https://flexbox.help/ 사이트 이용하여 2개 객체를 양쪽 끝으로 x축 정렬하게 만들었음

header {
    position: fixed;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
    width: 100%;
    background-color: white;
}

<nav>

• .nav {overflow:hidden;} + .nav-item {float:left;}: 공백없이 x축 정렬함. 원래 nav-item을 display:inline-block으로 만들고 vertical-align시도했는데 inline-block요소가 원래 가지고 있는 margin때문에 메뉴 사이에 공백이 생겨서 변경함
• .nav-item:first-child...: 메뉴 하나하나 배경색이 다른 것을 가상선택자를 이용해 적용함

.nav .nav-lists {
    overflow: hidden;
    width: 300px;
}
.nav .nav-lists .nav-item {
    float: left;
    width: 100px;
}
.nav .nav-lists .nav-item a {
    display: block;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #585858;
}
.nav .nav-lists .nav-item:first-child a {
    background-color: #f9f9f9;
}
.nav .nav-lists .nav-item:nth-child(2) a{
    background-color: #f4f4f4;
}
.nav .nav-lists .nav-item:last-child a{
    background-color: #ededed;
}

main

<div class="product-img-lists">
    <ul>
        <li>
            <a href="#">
                <img src="https://via.placeholder.com/300" alt="상품 이미지">
                <h3 class="product-info">product name--</h3>
            </a>
        </li>
        <li>
        </li>...
    </ul>
</div>
<div class="middle">
    <a href="#">
        <div>
            <span class="text moveToNext">Move to Next Page</span>
        </div>
    </a>
</div>
<div class="product-img-lists">
</div>...

<div class="product-img-lists">

• float+ overflow:hidden: 공백 없이 x축 정렬
• h3 {posision: relative;}: 이미지와 글자를 겹치기 위해 position 변경함. 처음엔 absolute를 사용했는데 top, left값이 브라우저 기준으로 적용되는지 모든 리스트 아이템의 글자들이 브라우저 상에서 같은 위치로 가는 문제가 있었음. relative로 바꾸니 원 위치 기준으로 적용된 듯
• top: -50px, padding-left:20px: 글자를 이미지 위 원하는 위치로 이동하기 위한 속성들

.product-img-lists {
    overflow: hidden;
}
.product-img-lists ul li {
    float: left;
    /* display: inline-block;
    vertical-align: middle; */
}
.product-img-lists ul li a,
.product-big-img a {
    width: 50%;
    color: mediumslateblue;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}
.product-img-lists ul li a h3,
.product-big-img h3 {
    margin:0;
    position: relative;
    top: -50px;
    padding-left: 20px;
}

<div class="middle">

• before, after 연습을 위해 추가해봄
• middle:hover: 마우스 올리면 배경색 바뀜

.middle {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.middle:hover {
    background-color: violet;
}
.moveToNext::before,
.moveToNext::after {
    content: "**";
}

footer

<footer>
    <div>
        <ul class="support-lists">
            <li><a href="#">Terms and conditions</a></li>
            <li><a href="#">Cookies</a></li>
        </ul>
    </div>
    <div><a href="#top">위로</a></div>
    <div class="payment-methods-lists">
        <p>Accepted payment methods</p>
        <ul>
            <li><img src="https://via.placeholder.com/25" alt=""></li>
            <li><img src="https://via.placeholder.com/25" alt=""></li>
            <li><img src="https://via.placeholder.com/25" alt=""></li>
            <li><img src="https://via.placeholder.com/25" alt=""></li>
            <li><img src="https://via.placeholder.com/25" alt=""></li>                    
        </ul>
    </div>
</footer>

<footer>

header와 거의 유사한 방식으로 flex를 사용하였다. 차이점은 정렬할 내부 요소가 2개->3개가 되었다는 것이다.

footer {
    width: 100%;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
    font-size: 13px;
    color: #585858;
    text-align: center;
}

<support-lists>

• inline-block + vertical-align: 이번엔 배경색이 없어 공백이 있어도 되기 때문에 이 방법 사용했다.

footer .support-lists li {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    text-align: center;
}

<payment-methods-lists>

• <p>태그와 이미지가 들어있는 <ul>태그를 먼저 x축 정렬 후 <ul>태그 내부 요소를 다시 x축 정렬했다.

footer .payment-methods-lists p {
    font-size: 13px;
    margin: 0;
}
footer .payment-methods-lists p,
footer .payment-methods-lists ul {
    display: inline-block;
    vertical-align: middle;
}
footer .payment-methods-lists ul li{
    display: inline-block;
    vertical-align: middle;
}

어려웠던 내용

1. 적절한 x축 정렬 방식 찾기: 처음 header의 메뉴를 만들 때, helbak 사이트에선 각 리스트의 크기를 33%로 지정해놓았길래 그걸 따라했는데, 내가 원하는대로 정렬이 잘 되지 않는 문제가 있었다.
2. 리스트의 메뉴들을 inline-block과 vertical-align을 이용해 정렬했더니 각 요소 사이 공백이 들어가 있었다.
3. 이미지 위에 글자를 겹쳐서 보여주기 위해 대충 position과 top, left 등의 속성을 이용하면 될 것 같다는 생각은 했다. 그런데 처음에 position을 absolute로 했더니 top값만 줬을 땐 괜찮은데 left값을 같이 주니 오른쪽 글자가 안보이는 문제가 있었다. 알고보니 오른쪽 글자도 왼쪽 글자와 완전 같은 좌표값이 적용되어 겹치게 되서 안보이는거였다.

해결방법

1. <li>, <a>, <ul> 등 여러 태그에 width를 퍼센트로 주는 시도를 했으나 잘 안되서 결국 <li>에 고정된 width값을 주는 것으로 변경했다.
2. 1번 문제와 맞물려서 고생하다가 x축 정렬에 성공한거라 공백 무시할까 고민도 살짝 했었는데 영상에서 비슷한 경우가 있었던 것을 참고해 다시 해보기로 했다. 결국 float과 overflow:hidden을 이용해 원하는 대로 만들 수 있었다.
3. 기존 helbak 사이트의 position이 absolute라서 따라한거였는데, relative 포지션으로 바꾸고 top을 적용하니 다행히 원래 자리 기준으로 적용되었다. 왼쪽 이동은 padding-left를 이용해서 다양한 방법으로 요소 옮기는 것을 연습하였다. (left를 사용해도 위치는 동일한 것을 확인함)

소감

영상을 보고 따라만드는거 말고 혼자서 css속성을 적용해보는 연습을 했다. 직접 해보니 영상에 나오지 않았던 여러 문제점들을 마주할 수 있었다. 앞으로 계속 실습이 이어지는데 영상 강의를 들은 후엔 꼭 혼자 실습을 해봐야겠다는 생각이 들었다.