웹 프로그래밍 #19

Jeongmin Heo·2021년 7월 22일
대구AI스쿨
0

웹 프로그래밍

목록 보기
19/50

💻 학습 내용

main_contents

html

<div class="list_item">
	<div class="list_half list_half_top shop_border">
	 	<div class="list_half_header list_half_bg">
	 		<div class="half_over_lay"></div>
	 		<h3 class="shop_title_border">백화점 상품 그대로</h3>
	 	</div>

	 	<ul class="content_lists content_lists_3">
	 		<li>
	 			<img src="img/puppy.jpg">
	 			<h3>생활공작소 과탄산소다</h3>
	 			<span>1.5kg x 4입</span>
	 		</li>
         		<li>
	 			<img src="img/puppy.jpg">
	 			<h3>생활공작소 과탄산소다</h3>
	 			<span>1.5kg x 4입</span>
	 		</li>
     			<li>
	 			<img src="img/puppy.jpg">
	 			<h3>생활공작소 과탄산소다</h3>
	 			<span>1.5kg x 4입</span>
	 		</li>
	 					

	<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>
	 			<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>

	 		</ul>

	 	</div>
</div>

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_over_lay{
	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;
	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;
	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.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: 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;

	font-size: 14px;
	color: #ffffff;

	top: 6px;
	right: 5px;

	border-radius: 50%;

	line-height: 42px;
    text-align: center;
}

#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;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li .price em{
	font-size: 14px;
    font-weight: 700;

    font-style: normal;
}

#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;
	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: 0;
}

#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;
}

⭐️ 이미지를 감싸는 서랍장안에 이미지를 넣고 z-index를 활용해서
할인율도 넣어줘야 함
먼저 나오는 img는 3차원 span은 2차원으로 겹쳐질 수 있다

⭐️ em태그는 태생적으로 italic(기울임체) 이다.
기울임 효과를 없애려면 font-style:normal; 로 작성해주면 된다

main_brand_wrap

html

<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>

css


#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 img{
	width: 100%;
	height: 100%;
}

html

 <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>

css

#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;

}

#shop_footer .policy_wrap span:before{
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 8px;
	background-color: #d7d7d7;
	vertical-align: -1px;
}


#shop_footer p{
	font-size: 12px;
	color: #888;
	margin-bottom: 11px;
}

이미지를 무료로 다운 받을 수 있는 사이트

pixabay : https://pixabay.com/ko/ (무료 이미지 상업적 이용도 가능함)
unsplash https://unsplash.com/

📝 마무리


생활공작소 과탄산소다가 y축 정렬만 되고 x축 정렬이 되지 않았다.
문제가 뭘까…코드가 틀린게 없는데 모르겠다..혼란스러웠다.
^^..클래스 호출하는데 #사용했다. #은 id 호출..잊지말자..헷갈리지 말자..


이미지 height 값을 px이 아닌 %입력해놔서 177px 높이값이 적용이 되지 않았다. 단위를 정확히 작성하자!

대체로 어제와 비슷한 내용이라서 큰 어려움이 없었다. class값을 다양한 것을 하나의 div 태그에 적용하니 헷갈리는 부분이 많았다.
태그가 많아지고 복잡해지니 오류를 찾아내는데 시간이 많이 걸렸다.
다음 부터는 하나 작성하고 제대로 적용되는지 확인하는 시간을 가져야 겠다.

profile
Jeongmin Heo
이전 포스트

웹 프로그래밍 #18

다음 포스트

웹 프로그래밍 #20

0개의 댓글