[大邱AI学校]開発ログ19日目210722
138446 ワード
学習内容
1.NAVERショッピングマンハッタン(2)
1)NAVERショッピングホームページ(2)
プライマリラベルlitst wrapの後に作成<!-- 네이버 쇼핑 메인 (2) -->
<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 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>
<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>
</div>
</main>
</body>
</html>
css↓/* 네이버 쇼핑 메인 (2) */
#shop_main .list_item .list_half {
width: 100%;
height: 240px;
background-color: #ffffff;
/* 위에서 list_item을 position: relative;로 변경한다. list_half_top과 bottom을 absolute로 사용할 것이기 때문*/
}
#shop_main .list_item .list_half_top {
position: absolute;
left: 0;
top: 0;
}
#shop_main .list_item .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: 7px;
}
#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);
}
/* 다음에 나오는 list_half_bg의 초록색 배경 위에 half_overlay의 검은색이 위로 덮여지는 이유 */
/* list_half_bg는 2차원. half_overlay는 3차원이기 때문에 z축이 더 높기 때문 */
/* shop_title_border의 흰색 글자가 검은색 위로 보이는 이유 */
/* half_overlay, shop_title_border 둘 다 3차원이기 때문에 뒤에 나오는 3차원의 z축이 더 높기 때문 */
#shop_main .list_item .list_half .list_half_header.list_half_bg {
background-color: green;
padding-top: 0;
border-bottom: solid 1px #ffffff;
}
#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;
/*font-size: 14px;*/ /* .list_half_header h3 에서 적용되었음 */
top: 50%;
transform: translateY(-50%);
}
#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 {
font-size: 14px;
}
#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%; /* 부모의 높이값을 기준으로 100%라는 뜻. content_lists에서 높이값을 설정해 준다. */
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: 13px;
margin-bottom: 5px;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li span {
font-size: 12px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
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: 13px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li .price {
color: #62a7ee;
font-size: 12px;
}
/* price 태그 안에 있는 모든 글자의 글자크기와 색을 지정 */
#shop_main .list_item .list_half .content_lists.content_lists_2 li .price em {
font-size: 14px;
font-weight: bold;
font-style: nomal; /* em태그는 font-style: italic;이 기본 적용된다. (기울어진 글자) */
}
#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: 1px solid #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;
}
#shop_main .list_item .list_row_3 li .list_image_wrap img {
width: 100%;
height: 100%;
margin-right: 10px;
}
#shop_main .list_item .list_row_3 li .list_row_info span {
font-size: 12px;
}
#shop_main .list_item .list_row_3 li .list_row_info h3 {
font-size: 13px;
}
/* span태그와 h3태그의 글자크기를 바꾸기 전에는 flex가 줄바꿈 현상이 일어나서 제대로 적용되지 않았다. x축 정렬이 되지 않았었음 */
最初の行のショッピングリストは、最初の行の内容を組み合わせてhtmlを生成します.
<!-- 네이버 쇼핑 메인 (2) -->
<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 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>
<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>
</div>
</main>
</body>
</html>/* 네이버 쇼핑 메인 (2) */
#shop_main .list_item .list_half {
width: 100%;
height: 240px;
background-color: #ffffff;
/* 위에서 list_item을 position: relative;로 변경한다. list_half_top과 bottom을 absolute로 사용할 것이기 때문*/
}
#shop_main .list_item .list_half_top {
position: absolute;
left: 0;
top: 0;
}
#shop_main .list_item .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: 7px;
}
#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);
}
/* 다음에 나오는 list_half_bg의 초록색 배경 위에 half_overlay의 검은색이 위로 덮여지는 이유 */
/* list_half_bg는 2차원. half_overlay는 3차원이기 때문에 z축이 더 높기 때문 */
/* shop_title_border의 흰색 글자가 검은색 위로 보이는 이유 */
/* half_overlay, shop_title_border 둘 다 3차원이기 때문에 뒤에 나오는 3차원의 z축이 더 높기 때문 */
#shop_main .list_item .list_half .list_half_header.list_half_bg {
background-color: green;
padding-top: 0;
border-bottom: solid 1px #ffffff;
}
#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;
/*font-size: 14px;*/ /* .list_half_header h3 에서 적용되었음 */
top: 50%;
transform: translateY(-50%);
}
#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 {
font-size: 14px;
}
#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%; /* 부모의 높이값을 기준으로 100%라는 뜻. content_lists에서 높이값을 설정해 준다. */
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: 13px;
margin-bottom: 5px;
}
#shop_main .list_item .list_half .content_lists.content_lists_3 li span {
font-size: 12px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
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: 13px;
}
#shop_main .list_item .list_half .content_lists.content_lists_2 li .price {
color: #62a7ee;
font-size: 12px;
}
/* price 태그 안에 있는 모든 글자의 글자크기와 색을 지정 */
#shop_main .list_item .list_half .content_lists.content_lists_2 li .price em {
font-size: 14px;
font-weight: bold;
font-style: nomal; /* em태그는 font-style: italic;이 기본 적용된다. (기울어진 글자) */
}
#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: 1px solid #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;
}
#shop_main .list_item .list_row_3 li .list_image_wrap img {
width: 100%;
height: 100%;
margin-right: 10px;
}
#shop_main .list_item .list_row_3 li .list_row_info span {
font-size: 12px;
}
#shop_main .list_item .list_row_3 li .list_row_info h3 {
font-size: 13px;
}
/* span태그와 h3태그의 글자크기를 바꾸기 전에는 flex가 줄바꿈 현상이 일어나서 제대로 적용되지 않았다. x축 정렬이 되지 않았었음 */
2）ブランドロゴドロップダウンリスト
mainタグの後に作成
<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>
</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;
}
#shop_main .brand_wrap .brand_lists li {
width: 64px;
height: 64px;
}
#shop_main .brand_wrap .brand_lists li img {
width: 100%;
height: 100%;
}
3) footer
<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>/* footer */
#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 {
font-size: 12px;
}
#shop_footer .policy_wrap span:first-child:before {
content: initial; /* before에서 적용한 것 적용하지 않음 */
}
#shop_footer .policy_wrap span:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 5px 0 0;
background-color: #d7d7d7;
vertical-align: -1;
}
#shop_footer .policy_wrap p {
font-size: 12px;
color: #888;
margin-bottom: 11px;
}
2.参考になる無料画像サイト
1) pixabay
https://pixabay.com/ko/
商業用途にも使用可能
画像をダウンロードし、パスを入力します.
2) unsplash
https://unsplash.com/
商業用途にも使用できます.
3）ブランド会社ロゴ
会社のロゴは常に各ブランドのウェブサイトで提供されています.
難点と解決策
1) line-height
2）h 3の利益値
いきなりh 3の利潤値を適用して、1時間くらい苦労しました.
利潤値は適用されなかったが、上下18.6 pxの利潤に慌てた.
もとはcssは最初に*記号を使ってすべての毛利とダウンジャケットの値を消しましたが、あちらに注釈があります...
デフォルト値を正しく作成し直したため、正しく適用されました.
学習の心得.
line-heightのように知っているcss属性も実際の仕事で応用されたことがあり、なぜそのように使われているのかを長い間理解していた.
また、h 3の利益値を中間的に適用して、いつも先生がやったようにするので、h 3にもデフォルトの利益値があることを知っていますが、エラーが発生した場合、原因を探すのに多くの時間がかかりました.
最後の脚注部分は、ポリシー部分でbeforeセレクタを使用して操作レバーを追加したもので、講義とは異なり、文字と適切すぎるため、marging-right値が単独で適用されます.
また、私はずっと画像のサムネイルだけを置いていますが、サムネイルの時はhtmlに横長値を付けて指定するので、cssにwidthやheightを付ける必要はありません.
実際、画像を直接入れると、サムネイルで指定したサイズはhtmlから削除する必要があるため、cssでimg空間のwidthとheight値を指定する必要があります.
Reference
この問題について([大邱AI学校]開発ログ19日目210722), 我々は、より多くの情報をここで見つけました
https://velog.io/@seona056/대구AI스쿨-개발일지-18일차-210722
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について([大邱AI学校]開発ログ19日目210722), 我々は、より多くの情報をここで見つけました https://velog.io/@seona056/대구AI스쿨-개발일지-18일차-210722テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol