2021.06.10(NAVERショッピング2編)
117454 ワード
学習の内容
[NAVERショッピングホームページ部分]
<div class="list_item">
<div class="list_half list_half_top shop_border">
<div class="list_half_header list_half_bg">
<div class="half_overlay"></div>
<h3 class="shop_title_border">백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_3">
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
</ul>
</div>
<div class="list_half list_half_bottom shop_border">
<div class="list_half_header">
<span class="headline">hot deal</span>
<h3>백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_2">
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
</ul>
</div>
</div>#shop_main .list_item .list_half {
width: 100%;
height: 240px;
background-color: #ffffff;
}
#shop_main .list_item .list_half.list_half_top {
position: absolute;
left: 0;
top: 0;
}
#shop_main .list_item .list_half.list_half_bottom {
position: absolute;
left: 0;
bottom: 0;
}
#shop_main .list_item .list_half .list_half_header {
position: relative;
width: 100%;
height: 62px;
background-color: #ffffff;
border-bottom: solid 1px #e7e7e7;
text-align: center;
padding-top: 10px;
}
#shop_main .list_item .list_half .list_half_header .headline {
display: inline-block;
border: solid 1px #000000;
padding: 2px 4px;
margin-bottom: 5px;
}
#shop_main .list_item .list_half .list_half_header h3,
#shop_main .list_item .list_half .list_half_header span {
font-size: 14px;
}
#shop_main .list_item .list_half .list_half_header .half_overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#shop_main .list_item .list_half .list_half_header.list_half_bg {
background-color: green;
border-bottom: solid 1px #ffffff;
padding-top: 0;
}
#shop_main .list_item .list_half .list_half_header.list_half_bg .shop_title_border {
position: relative;
display: inline-block;
padding: 2px 4px;
border: solid 1px #ffffff;
color: #ffffff;
top: 50%;
transform: translateY(-50%);
}
#shop_main .list_item .list_half .content_lists {
overflow: hidden;
height: 177px;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li {
float: left;
width: 33.33%;
height: 100%;
border-right: solid 1px #f0f0f0;
text-align: center;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li:last-child {
border-right: none;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li img {
width: 100%;
height: 100px;
margin-bottom: 5px;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li h3 {
font-size: 12px;
margin-bottom: 5px;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li span {
font-size: 11px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
padding-top: 11px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li {
width: 130px;
height: 150px;
margin-right: 8px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li:last-child {
margin-right: 0;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li .content_image_wrap {
position: relative;
width: 130px;
height: 90px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li .content_image_wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li .content_image_wrap .discount {
position: absolute;
display: block;
width: 42px;
height: 42px;
background-color: orange;
border-radius: 50%;
font-size: 14px;
color: #ffffff;
line-height: 42px;
text-align: center;
top: 6px;
right: 5px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li h3 {
font-size: 12px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li .price {
color: #62a7ee;
font-size: 11px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li .price em {
font-size: 13px;
font-weight: bold;
font-style: normal;
}
<div class="list_item">
<div class="list_half shop_border">
<div class="list_half_header">
<span class="headline">hot deal</span>
<h3>백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_2">
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
</ul>
</div>
<ul class="list_row_3 shop_border">
<li>
<div class="list_image_wrap shop_border">
<img src="https://via.placeholder.com/90x60">
</div>
<div class="list_row_info">
<span>멜론티켓</span>
<h3>흥행 돌풍 마마, 돈크라이</h3>
</div>
</li>
<li>
<div class="list_image_wrap shop_border">
<img src="https://via.placeholder.com/90x60">
</div>
<div class="list_row_info">
<span>멜론티켓</span>
<h3>흥행 돌풍 마마, 돈크라이</h3>
</div>
</li>
<li>
<div class="list_image_wrap shop_border">
<img src="https://via.placeholder.com/90x60">
</div>
<div class="list_row_info">
<span>멜론티켓</span>
<h3>흥행 돌풍 마마, 돈크라이</h3>
</div>
</li>
</ul>
</div>#shop_main .list_item .list_row_3 {
border-top: none;
background-color: #ffffff;
}
#shop_main .list_item .list_row_3 li {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: solid 1px #f0f0f0;
padding: 14px 19px 11px 19px;
}
#shop_main .list_item .list_row_3 li:last-child {
border-bottom: none;
}
#shop_main .list_item .list_row_3 li .list_image_wrap {
width: 90px;
height: 60px;
margin-right: 10px;
}
#shop_main .list_item .list_row_3 li .list_image_wrap img {
width: 100%;
height: 100%;
}
#shop_main .list_item .list_row_3 li .list_row_info span {
font-size: 11px;
}
#shop_main .list_item .list_row_3 li .list_row_info h3 {
font-size: 12px;
}
<div class="list_item">
<div class="list_half list_half_top shop_border">
<div class="list_half_header list_half_bg">
<div class="half_overlay"></div>
<h3 class="shop_title_border">백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_3">
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
</ul>
</div>
<div class="list_half list_half_bottom shop_border">
<div class="list_half_header">
<span class="headline">hot deal</span>
<h3>백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_2">
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
</ul>
</div>
</div>
<div class="list_item">
<div class="list_half list_half_top shop_border">
<div class="list_half_header">
<span class="headline">hot deal</span>
<h3>백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_2">
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
</ul>
</div>
<div class="list_half list_half_bottom shop_border">
<div class="list_half_header">
<span class="headline">hot deal</span>
<h3>백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_2">
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
</ul>
</div>
</div>
<div class="list_item">
<div class="list_half list_half_top shop_border">
<div class="list_half_header">
<span class="headline">hot deal</span>
<h3>백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_2">
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
</ul>
</div>
<div class="list_half list_half_bottom shop_border">
<div class="list_half_header list_half_bg">
<div class="half_overlay"></div>
<h3 class="shop_title_border">백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_3">
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
</ul>
</div>
</div>
<div class="list_item">
<div class="list_half list_half_top shop_border">
<div class="list_half_header list_half_bg">
<div class="half_overlay"></div>
<h3 class="shop_title_border">백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_3">
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작소 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
</ul>
</div>
<div class="list_half list_half_bottom shop_border">
<div class="list_half_header">
<span class="headline">hot deal</span>
<h3>백화점 상품 그대로</h3>
</div>
<ul class="content_lists content_lists_2">
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
<li>
<div class="content_image_wrap shop_border">
<img src="https://via.placeholder.com/130x90">
<span class="discount">50%</span>
</div>
<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
<span class="price">
<em>21,900</em> 원
</span>
</li>
</ul>
</div>
</div>
<div class="brand_wrap shop_border">
<ul class="brand_lists">
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
<li><img src="https://via.placeholder.com/64x64"></li>
</ul>
</div>#shop_main .brand_wrap {
background-color: #ffffff;
}
#shop_main .brand_wrap .brand_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 18px 18px;
}
#shop_main .brand_wrap .brand_lists li {
width: 64px;
height: 64px;
}
#shop_main .brand_wrap .brand_lists li img {
width: 100%;
height: 100%;
}
[NAVERショッピングプッシュ部]
<footer id="shop_footer">
<div class="shop_container">
<div class="policy_wrap">
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
</div>
<p>네이버㈜는 통신판매중개자이며, 통신판매의 당사자가 아닙니다. 상품, 상품정보, 거래에 관한 의무와 책임은 판매자에게 있습니다.</p>
</div>
</footer>
</body>
</html>#shop_footer {
padding-bottom: 180px;
text-align: center;
}
#shop_footer .policy_wrap {
border-top: solid 2px #5d5d5d;
padding-top: 27px;
margin-bottom: 11px;
}
#shop_footer .policy_wrap span {
/*background-color: #d7d7d7;*/
font-size: 11px;
}
#shop_footer .policy_wrap span:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #d7d7d7;
vertical-align: -1;
}
#shop_footer .policy_wrap span:first-child:before {
content: initial;
}
#shop_footer p {
font-size: 11px;
color: #888;
margin-bottom: 11px;
}
https://pixabay.com/ko/
https://unsplash.com/
学習内容の難点
レイアウトフレームワークを作成して書き込む、部分のみ変更する、位置を移動するなどの操作はそれほど難しくありませんが、content list 3の右側のコンテンツの右側の部分は100%埋め込まれません.
解決策
開発者ツールではwidth値が同じでborder値が同じであるが充填されていないため,width 33.33%を小数点1つ増加させるように数値を修正してフレームワークに適合させる方法を試み,問題を解決した.
学習の心得.
これは非常に重要な授業で、似たようなレイアウトが多く構成する必要がある場合は、コードの重複使用を減らし、レイアウトを迅速に構成できる汎用cssを作成することが望ましいことを教えてくれます.
Reference
この問題について(2021.06.10(NAVERショッピング2編)), 我々は、より多くの情報をここで見つけました https://velog.io/@lstem12/2021.06.10-naver-shopping-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol