9월 23일 개발일지

x축으로 정렬된 네비 부분

html 작성

<header id="shop-header">
	<div id="shop-header-top"></div>
    <div id="shop-header-middle"></div>
    <nav>
    	<div class="shop-container">
        <ul>
        	<li><a href="#">홈</a></li>
            <li><a href="#">백화점</a></li>
            <li><a href="#">아울렛</a></li>
            <li><a href="#">스타일</a></li>
         </ul>
        </div>
        </nav>
        </header>
        
        
     
            

css 작성

#shop-header nav 
{ width: 100%; border-top: solid 1px #e8e8e8;
 width: 100%; border-bottom: solid 1px #e8e8e8; }
 
 #shop-header nav ul { display: flex; flex-wrap; 
 align-items: center; padding: 13px 0 8px 0; }
 
 #shop-header nav ul li { margin-right: 16px

행사 리스트 부분

html 작성

<main role="main' id="shop-main">
<div class="shop-container">

<div class=list-wrap">
	<div class="list-item">
    	<div class="categroy-warp shop-border">
    <div class="categroy=-wrap shop-border">
    
    	<div class="category-left">
        <h3>카테고리</h3>
        <ul>
            <li><a herf="#">패션의류</a></li>
            <li><a herf="#">패션잡화</a></li>
            <li><a herf="#">화장품</a></li>
            <li><a herf="#">디지털/가전</a></li>
        </ul>
        </div>
        <div class="category-right"></div>
        	<div class="category-right-top"></div>
            <div class="category-right-bottom"></div> 
            </div>

    
    </div>
    </div>
    
<div class="list-item"></div>
<div class="list-item"></div>
<div class="list-item"></div>
<div class="list-item"></div>
</div>

</main>

*shop-border는 공간의 테두리를 만드는 것

css 작성

#shop-header nav ul li { margin-right: 16px; }


#shop-main .list-wrap
{ display: flex; 
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stertch; }



#shop-main .list-item 
{ width: 308px; height: 496px;
background-color= yellow;

margin-bottom; 20px;