1. 학습 내용
3. 네이버 오른쪽
로그인 구조 ~ 쇼핑
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 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">
<ul class="commerce_list">
<li><a href="#">홈플</a></li>
<li><a href="#">알리</a></li>
<li><a href="#">아마존</a></li>
<li><a href="#">알라딘</a></li>
<li><a href="#">11번</a></li>
<li><a href="#">G마켓</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>
<li><a href="#">LF몰</a></li>
<li><a href="#">티몬</a></li>
<li><a href="#">위메프</a></li>
<li><a href="#">GS샵</a></li>
<li><a href="#">CJ몰</a></li>
</ul>
<div class="shop_goods">
<ul class="product_list">
<li>
<a href="#">
<img src="https://via.placeholder.com/107px*146px">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>CSS
#main_right #account {
width: 100%;
border: solid 1px #dae1e6;
padding: 16px 16px 12px 16px;
margin-bottom: 12px;}
- 로그인 부분의 위치와 테두리 넓이 설정
#main_right #account p {
font-size: 12px;
padding-left: 3px;
margin-bottom: 11px;}
- 설명란 설정
#main_right #account a {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 14px;
background-color: #19ce60;
text-align: center;
font-size: 13px;
border-radius: 2px;
color: #ffffff;
font-weight: 700;}
- 로그인 모양의 색, 크기, 위치와 안의 글자의 특징
#main_right #account .account_sub {
display: flex;
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: #000000;
margin-bottom: 20px;}
#main_right #shop_wrap .shop_title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
font-size: 13px;
padding: 12px 0;}
#main_right #shop_wrap .shop_title .right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;}
#main_right #shop_wrap .shop_title .right h4 {
margin-left: 15px;}
#main_right #shop_wrap .shop_content {
border: solid 1px #e4e8eb;
padding: 0 0 22px 0;}
#main_right #shop_wrap .shop_content .shop_goods {
padding: 55px 8px 0 8px;}
#main_right #shop_wrap .shop_content .commerce_list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 12px 4px;
background-color: #f7f9fa;
border-bottom: solid 1px #dae126;}
#main_right #shop_wrap .shop_content .commerce_list li {
font-size: 12px;
margin-left: 10px;
margin-bottom: 5px;}
#main_right #shop_wrap .shop_content .commerce_list li:nth-child(1),
#main_right #shop_wrap .shop_content .commerce_list li:nth-child(9) {
margin-left: 0;}
#main_right #shop_wrap .product_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;}
#main_right #shop_wrap .product_list li {
margin-bottom: 10px;}
#main_right #shop_wrap .product_list h3,
#main_right #shop_wrap .product_list span {
font-size: 12px;}
#main_right #shop_wrap .product_list .product_info {
text-align: center;}4. 네이버 하단
HTML
<footer id="main_footer">
<div class="container">
<ul class="news_lists">
<li>
<img src="https://via.placeholder.com/160px*86px">
<div class="news_info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<p>
SW개발자를 위한 교육<br>
지원꿀팁과 생생한 후기들!
</p>
</div>
</li>
<li>
<img src="https://via.placeholder.com/160px*86px">
<div class="news_info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<p>
SW개발자를 위한 교육<br>
지원꿀팁과 생생한 후기들!
</p>
</div>
</li>
<li>
<img src="https://via.placeholder.com/160px*86px">
<div class="news_info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<p>
SW개발자를 위한 교육<br>
지원꿀팁과 생생한 후기들!
</p>
</div>
</li>
</ul>
<ul class="corp_list">
<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>
<li><a href="#">네이버 정책</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</div>
</footer>CSS
#main_footer {
background-color: #fafbfc;
border-top: solid 1px #e4e8eb;
padding-bottom: 92px;}
#main_footer .news_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 24px 0;}
-부스트 캠프 x축으로 정렬
#main_footer .news_lists li {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;}
- 사진과 내용 x축으로 정렬
#main_footer .news_lists li img {
margin-right: 15px;}
#main_footer .news_lists li .news_info {
width: 172px;}
#main_footer .news_lists li .news_info span,
#main_footer .news_lists li .news_info h3,
#main_footer .news_lists li .news_info p {
font-size: 13px;}
#main_footer .news_lists li .news_info span {
color: #58c464;}
#main_footer .corp_list {
padding-top: 25px;
border-top: solid 1px #e4e8eb;}
#main_footer .corp_list li {
display: inline-block;
vertical-align: middle; }
- 가로로 배치하고 왜 vertical-align이 들어가야하는 지
#main_footer .corp_list li:first-child:before {
content: initial;}
#main_footer .corp_list li:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #e4e8eb;
vertical-align: -1;
- 세로 선의 위치를 올린다.
content를 통해 빈문자를 설정하며 작대기만 나타나게 한다.}
#main_footer .corp_list li a {
font-size: 12px;}2. 학습 중 어려웠던 점
inline-block에 대한 이해가 아직 어렵다.
3. 해결 방안
다른 매체를 통해 학습해보기
4. 학습 소감
한번 배웠던 것이지만 실전에 적용하려니 적절한 상황도 모르겠고 왜 쓰이는지도 이해하기 어렵다.
안녕하세요!