0615

벨로그용·2022년 6월 15일

ai스쿨

목록 보기

16/60

1)학습한 내용

*html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM</title>
	<link rel="stylesheet" href="css/product.css">
</head>
<body>
	<div id="container">
			<h1 id="heading">에디오피아 게뎁</h1>
			<div id="prod-pic">
				<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
				<div id="small-pic">
					<img src="images/coffee-pink.jpg" class="small">
					<img src="images/coffee-blue.jpg" class="small">
					<img src="images/coffee-gray.jpg" class="small">
				</div>
			</div>			
			<div id="desc">
				<ul>
					<li>상품명 : 에디오피아 게뎁</li>
					<li class="bluetext">판매가 : 9,000원</li>
					<li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
					<li>적립금 : 180원(2%)</li>
					<li>로스팅 : 2019.06.17</li>
					<button>장바구니 담기</button>
				</ul>				
				<a href="#" id="view">상세 설명 보기</a>				
			</div>
			
			<div id="detail">									
					<hr>
					<h2>상품 상세 정보</h2>
					<ul>
						<li>원산지 : 에디오피아</li>
						<li>지 역 : 이르가체프 코체레</li>
						<li>농 장 : 게뎁</li>
						<li>고 도 : 1,950 ~ 2,000 m</li>
						<li>품 종 : 지역 토착종</li>
						<li>가공법 : 워시드</li>
					</ul>
					<h3>Information</h3>
					<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
					<h3>Flavor Note</h3>
					<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
			</div>
	</div>
	<script src="./js/showBig.js"></script>
</body>
</html>

*css

	#container { 
			width:600px;
			margin:0 auto;
		}
		#prod-pic, #desc { 
			float:left;
		}
		#prod-pic { 			
			margin:20px 20px auto 10px;
			padding:0;
		}
		#cup { 			
			box-shadow:1px 1px 2px #eee;
			outline:1px dashed #ccc;			
			outline-offset: -7px;
		}
		#small-pic {
			margin-top:20px;
			list-style: none;
			padding:0;			
		}
		#small-pic > li {
			float:left;
			margin-right:10px;
		}
		.small {
			width:60px;
			height:60px;
		}
		#small-pic img:hover {
			cursor:pointer;
		}		
		#desc {  
			width:300px;
			padding-top:20px;
			margin-bottom:50px;
		}
		.bluetext {
			color:#4343ff;
			font-weight:bold;
		}
		#desc button {
			margin-top:20px;
			margin-bottom:20px;
			width:100%;
			padding:10px;
		}
		#desc ul {
			list-style:none;
		}
		#desc li{
			font-size:0.9em;
			line-height:1.8;
		} 
		#desc a {
			text-decoration: none;
			font-size:0.9em;
			color:blue;
			padding-left:40px;
		}
		hr {
			clear:both;
			border:1px dashed #f5f5f5;
		}
		#detail {
			padding-top:10px;
			display:none;
		}
		#detail li {
			font-size:0.9em;
			line-height:1.4;
		}
		h1 { 
			font-size:2em;
		}
		h2 {
			font-size:1.5em;
			color:#bebebe;
			font-weight:normal;
		}
		h3 {  
			font-size:1.1em;
			color:#222;
		}
		p { 
			font-size:0.9em;
			line-height:1.4;
			text-align: justify;
		}

*결과: