1) 학습한 내용
<-- shop.html -->
백화점 상품 그대로
<ul class="content_lists content_lists_3">
<li>
<img src="img/apple.jpg">
<h3>생활공작서 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="img/apple.jpg">
<h3>생활공작서 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>
<li>
<img src="img/apple.jpg">
<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 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>
</div>
</main>
<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>style.css
#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 {
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;
border: solid 1px #ffffff;
padding: 2px 4px;
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_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_3 li:last-child {
border-right: none;
}
#shop_main .list_item .list_half .content_lists_3 li img {
width: 100%;
height: 100px;
margin-bottom: 5px;
}
#shop_main .list_item .list_half .content_lists_3 li h3 {
font-size: 13px;
margin-bottom: 5px;
}
#shop_main .list_item .list_half .content_lists_3 li span {
font-size: 12px;
}
#shop_main .list_item .list_half .content_lists_2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 11px;}
#shop_main .list_item .list_half .content_lists_2 li {
width: 130px;
height: 150px;
margin-right: 8px;
}
#shop_main .list_item .list_half .content_lists_2 li:last-child {
margin-right: 0;
}
#shop_main .list_item .list_half .content_lists_2 li .content_image_wrap {
position: relative;
width: 130px;
height: 90px;
}
#shop_main .list_item .list_half .content_lists_2 li .content_image_wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#shop_main .list_item .list_half .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_2 li h3 {
font-size: 13px;
}
#shop_main .list_item .list_half .content_lists_2 li .price {
color: #62a7ee;
font-size: 12px;
}
#shop_main .list_item .list_half .content_lists_2 li .price em {
font-size: 14px;
font-weight: 700;
font-style: normal;
}
#shop_main .list_item .list_row_3{
background-color: #ffffff;
border-top: none;
}
#shop_main .list_item .list_row_3 li {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
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: 12px;
}
#shop_main .list_item .list_row_3 li .list_row_info h3 {
font-size: 13px;
}
#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%;
}
#shop_footer {
padding-bottom: 27px;
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: 12px;
}
#shop_footer .policy_wrap span:first-child:before {
content: initial;
}
#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 p {
font-size: 12px;
color: #888;
margin-bottom: 11px;
}
부모영역이 공간에 대한 구체적인 크기를 가지고 있어야지만 자식의 %크기가 정상적으로 동작한다.
font-weight 로 bold와 bolder값을 적용할수도 있다.
em태그는 태생적으로 font에 기울기가 적용된다.
sublime text 에서도 ctrl+f 로 써칭이 가능하다. 찾고싶은 영역을 빠르게 찾기 가능
상하, 좌우에 border값이 있을때 한부분만 border값을 none값을 넣을수도 있다. 반대로 이와 같은 방법으로 border값을 넣을수도 있다.
ex)
#shop_main .list_item .list_row_3{
border-top: none; //top부분만 지정하여 테두리를 삭제
}
p태그가 많다면 p태그안에 class를 지정하여 class를 기준으로 p태그를 선택
이미지를 무료로 다운로드 받을수 있는 사이트
https://pixabay.com/ko/
https://unsplash.com/
2) 학습내용 중 어려웠던 점
장문 싫어요 단결한거좋아요
3) 해결 방법
혼자로는 무리입니다..
4) 학습소감
집이너무가고싶네요 면접도 해야하는데 만사귀찮습니다..... 취업은 하곳파요
