Dev Log#17-7月20日
今日の勉強内容
✅ 1. Naver Copy実習-中間領域(main right)フレームワーク
✅ 1-2. Naver Copy実習-中間領域(main right)設計
✅ 2. Naver Copy実習-下部フレームワーク
✅ 2-2. Naver Copy実習-下部フレームワーク
✅ 3. きょうの学習後期
1.NAVER CAPICAT実習-中間エリア(main right)フレームワーク
👉 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>
👉 html(ショッピング) <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_lists">
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
</ul>
<div class="shop_goods">
<ul class="product_lists">
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/107x146">
<div class="product_info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
1-2. Naver Copy実習-中間領域(main right)設計
👉 css(ログイン、バナー)
/* main_right */
#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%;
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-wrap: nowrap;
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;
}
👉 css(ショッピング)#main_right #shop_wrap .shop_title {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 12px 0;
}
#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;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
}
#main_right #shop_wrap .shop_content {
border: solid 1px #e4e8eb;
padding: 0 0 22px;
}
#main_right #shop_wrap .shop_content .shop_goods {
padding: 55px 8px;
}
#main_right #shop_wrap .shop_content .commerce_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 12px 4px;
background-color: #f7f9fa;
border-bottom: solid 1px #dae1e6;
}
#main_right #shop_wrap .shop_content .commerce_lists li {
font-size: 12px;
margin-left: 10px;
margin-bottom: 5px;
}
#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(1),
#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(9) {
margin-left: 0;
}
#main_right #shop_wrap .product_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#main_right #shop_wrap .product_lists li {
margin-bottom: 10px;
}
#main_right #shop_wrap .product_lists .product_info {
text-align: center;
}
#main_right #shop_wrap .product_lists h3,
#main_right #shop_wrap .product_lists span {
font-size: 12px;
}
2.NAVERCAPICAT実習-下部フレームワーク
👉 html
<footer id="main_footer">
<div class="container">
<ul class="news_lists">
<li>
<img src="https://via.placeholder.com/160x86">
<div class="news_info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<p>SW 개발자를 위한 교육</br>
지원꿀팁과 생생한 후기들
</p>
</div>
</li>
<li>
<img src="https://via.placeholder.com/160x86">
<div class="news_info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<p>SW 개발자를 위한 교육</br>
지원꿀팁과 생생한 후기들
</p>
</div>
</li>
<li>
<img src="https://via.placeholder.com/160x86">
<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>
2-1. Naver Copy実習-ボトムデザイン
li:first-child:before
を指定し、content: initial;
を適用して解決する./* main_footer */
#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;
}
#main_footer .news_lists li {
display: flex;
flex-wrap: wrap;
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;
}
#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_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;
}
👉 結果きょうの学習後期
今日はNaverホームページの右側とfooterエリアでcatを作る練習時間があります.昨日の授業で頭と左の領域の実習をしましたが、今日は便利な実習と応用ができます.今日新しく学んだ内容はfooterで使用します:beforeは字の行間に句点を挿入します.次にfirst−childとbeforeを繰り返し適用して最前線の釣り竿を除去することを学習した.今日は何の難点もない.明日も真剣に!👩🏻💻
Reference
この問題について(Dev Log#17-7月20日), 我々は、より多くの情報をここで見つけました https://velog.io/@juhuii/Dev-Log-17-7월-20일テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol