학습내용

HTML

<div id="main_right">

                    <div id="account">
                        <p>네이버를 더 안전하고 편안하게 이용하세요.</p>
                        <a href="#">로그인</a>
                        <div class="account_sub">
                            <div class="left">
                                <span>아이디</span>
                                <span>비밀번호찾기</span>
                            </div>
                            <span>회원가입</span>
                        </div>
                    </div>

                </div>
                
 <div id="banner"></div>

            <div id="shop-wrap">
                <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>

                <div class="shop-content">
                    <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>

                    <div class="shop-goods">
                        <ul class="product-lists">
                            <li><a href="#">
                                <img src="https://via.placeholder.com/107x146" alt="">
                                <div class="product-info">
                                    <h2>퀄리티가 중요한</h2>
                                    <span>당신을 위한 룩</span>
                                </div>
                            </a></li> ---> 반복
                            
    </main>


    <footer id="main-footer">
        <div class="container">

            <ul class="news-lists">
                <li>
                    <img src="https://via.placeholder.com/160x86" alt="">
                    <div class="news-info">
                        <span>부스트캠프2021</span>
                        <h3>온라인 설명회 신청하기</h3>
                        <p>SW 개발자를 위한 교육<br>
                            지원 꿀팁과 생생한 후기들</p>
                    </div>
                </li>
                <li>
                    <img src="https://via.placeholder.com/160x86" alt="">
                    <div class="news-info">
                        <span>부스트캠프2021</span>
                        <h3>온라인 설명회 신청하기</h3>
                        <p>SW 개발자를 위한 교육<br>
                            지원 꿀팁과 생생한 후기들</p>
                    </div>
                </li> ---> 반복
            </ul>

            <ul class="corp-lists">
                <li><a href="#">회사소개</a></li>
                <li><a href="#">인재채용</a></li>
                <li><a href="#">제휴제안</a></li>
                <li><a href="#">회사소개</a></li>
                <li><a href="#">인재채용</a></li>
                <li><a href="#">제휴제안</a></li>

            </ul>

        </div>
    </footer>
 
</body>
</html>

CSS

#main_right #account {
    width: 100%;
    border: solid 1px #dae1e6;
    padding: 16px 16px 12px 16px;
}

#main_right #account p {
    font-size: 12px;
    padding-left: 3px;
    margin-bottom: 11px;
}

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

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

}

#main_right #account .account_sub {
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    justify-content: : space-between;
    align-items: center;

    padding: 0 8px;
}

#main-right #account .account-sub span {
    font-size: 12px;
}

#main-right #banner {
    width: 348px;
    height: 198px;
    background-color: yellowgreen;
    margin-bottom: 20px;
}

#main-right #shop-wrap .shop-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#main-right #shop-wrap .shop-title h3,
#main-right #shop-wrap .shop-title h4 {
    font-size: 13px;
}

#main-right #shop-wrap .shop-title h4 {
    margin-left: 15px;
}

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

#main-right #shop-wrap .shop-content {
    border: solid 1px #e4e8eb;
    padding: 0 0 22px 0;
}

#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 {
    /* overflow: hidden; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#main-right #shop-wrap .shop-content .commerce-lists li {
    /* float: left; */
    font-size: 12px;
    margin: 0 0 5px 10px;
}

#main-right #shop-wrap .shop-content .commerce-lists li:first-child {
    margin-left: 0;
}

#main-right #shop-wrap .shop-content .shop-goods {
    padding: 55px 8px 0 8px;
}

#main-right #shop-wrap .shop-content .shop-goods .product-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#main-right #shop-wrap .shop-content .shop-goods .product-lists li {
    margin-bottom: 10px;
}

#main-right #shop-wrap .shop-content .shop-goods .product-lists .product-info {
    text-align: center;
}

#main-right #shop-wrap .shop-content .shop-goods .product-lists li h2,
#main-right #shop-wrap .shop-content .shop-goods .product-lists li span {
    font-size: 12px;
}

#main-footer  {
    background-color: #fafbfc;
    border-top: solid 1px #e4e8eb;
    padding-bottom: 92px;
}

#main-footer .news-lists {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 24px 0;
}

#main-footer .news-lists li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#main-footer .news-lists li img {
    margin-right: 15px;
}

#main-footer .news-lists li .news-info {
    width: 172px;
    font-size: 13px;
}

#main-footer .news-lists li .news-info span {
    color: #58c464;
}

#main-footer .corp-lists {
    padding-top: 25px;
    border-top: solid 1px #e4e8eb;
}

#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;
}

#main-footer .corp-lists li a {
    font-size: 12px;
}

어려운점

• 코드가 길어지면서 오타가 생기면 찾기가 어려움

• display와 justify 등의 기능이 아직까지 의문점이 많이 듦

해결방법

• 복습이나 기타 무료강의를 보면서 이해하려고 함

학습소감

• 웹페이지를 뜯어봐도 혼자서 실제로 만들어낼 수 있을지 계속 의문이 듦. 생각보다 비슷하지만 수많은 코드가 들어가 있어 미미한 오타가 있으면 찾아내기 어려울 것 같다는 생각을 함.

• 웹프로그래밍을 잘 몰라서 그런것인지 프론트엔드에 관심이 떨어져서인지 모르겠으나 배울수록 흥미롭게 느껴지지 않는 것은 무엇 때문인지 고민하게 됨.

• 복습을 한다해도 영상에 한계가 있는 것 같아서 책을 찾아보고 있는데 어떤 책이 유용한지 모르겠음.