[CSS] 13. 실습:pet

in Web on CSS


실습: pet



지금까지 html과 css에 대해 배워보았는데요~

이제부터 직접 실습을 해보겠습니다~

수업시간에 한 코드를 올리도록 하겠습니다! 


/* reset */



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:12px;line-height:1.5;font-family:'돋움',dotum,sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}





/* -----------pet.css--------------- */


.wrap{width: 800px; margin: auto;}
.header,.footer{background: #333; color:#fff; style:none}
.contents{border: 5px solid #000; /* border 속성에는 세미콜론 안붙는다 */
		padding: 15px}
p{padding:15px; text-align:center}
h1,.header ul,p{margin: 0; padding: 0}
.header{overflow: hidden; padding: 15px}
h1{float: left;}
.header ul{float: right;}
.header ul li{float: left; list-style: none; margin: 10px;}
.header ul li a{color: #fff; text-decoration: none}
.header ul li a:hover{color:orange; text-decoration: underline !important} /* important는 우선순위를 앞으로 해준다 */
		/* .header ul li: hover a {...}  부모에게 먼저 설정후 자식을 건드리면 important 안해도 됨*/
h3{ height: 22px; background: url(pet_bgicon.png);
		background-repeat:no-repeat; text-indent:30px}  /* text-indent는 들여쓰기 */
.box{ background : #eee}





/* -----------pet1.html--------------- */


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>강아지키우기</title>
	<link rel="stylesheet" href="pet.css">
</head>
<body>
	<div class="wrap">
		<div class="header">
			<h1>입양하기</h1>
			<ul>
				<li><a href="pet1.html">애완견 종류</a></li>
				<li><a href="pet2.html">입양하기</a></li>
				<li><a href="pet3.html">건강돌보기</a></li>
				<li><a href="pet4.html">더불어살기</a></li>
			</ul>
		</div>
		<div class="contents">
			<h3>활달한 강아지</h3>
			<p>
			<dl>
				<dt><strong>요크셔 테리어</strong></dt>
				<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
			</dl>
			<dl>
				<dt><strong>말티즈</strong></dt>
				<dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
			</dl>
			<dl>
				<dt><strong>포메 라이언</strong></dt>
				<dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.</dd>
			</dl>
			<dl>
				<dt><strong>골든 리트리버</strong></dt>
				<dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
			</dl>
			</p>
			
			<h3>온순한강아지</h3>
			<p>
			<dl>
				<dt><strong>쉬즈</strong></dt>
				<dd>얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>
			</dl>
			<dl>
				<dt><strong>퍼그</strong></dt>
				<dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>
			</dl>
			<dl>
				<dt><strong>래브라도 리트리버</strong></dt>
				<dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장 좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
			</dl>
			</p>
			
			<h3>사납지만 복종적인 강아지</h3>
			<p>
			<dl>
				<dt><strong>미니어쳐핀셔</strong></dt>
				<dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
			</dl>
			<dl>
				<dt><strong>푸들</strong></dt>
				<dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>
			</dl>
			<dl>
				<dt><strong>폭스테리어</strong></dt>
				<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
			</dl>
			</p>
			<div class="box">
			<h3>건강한 강아지는</h3>
			<ul>
				<li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
				<li>털에 윤기가 있는 것을 골라야 합니다.</li>
				<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
				<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
				<li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
			</ul>
			</div>
		</div>
		<div class="footer">
			<p>copyright 2014 funnycom</p>
		</div>
	</div>
</body>
</html>





/* -----------pet2.html--------------- */


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>강아지키우기</title>
	<link rel="stylesheet" href="pet.css">
	<style>
	img {padding: 7px;
		box-shadow:0 0 5px #333;
		float: right;
		margin-left: 10px;}	
	</style>
</head>
<body>
	<div class="wrap">
		<div class="header">
			<h1>입양하기</h1>
			<ul>
				<li><a href="pet1.html">애완견 종류</a></li>
				<li><a href="pet2.html">입양하기</a></li>
				<li><a href="pet3.html">건강돌보기</a></li>
				<li><a href="pet4.html">더불어살기</a></li>
			</ul>
		</div>
		<div class="contents">
			<h2>강아지용품</h2>
			<img src="pet_puppy.png" alt="">
			<h3>강아지 집</h3>
			<p>
			강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가
			다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 
			박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.
			</p>
			<h3>강아지 먹이</h3>
			<p>
			강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.
			</p>
			<h3>밥 그릇, 물병</h3>
			<p>
			밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.
			</p>
			<h3>이름표, 목줄</h3>
			<p>
			강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자
			하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.
			</p>
			
		</div>
		<div class="footer">
			<p>copyright 2014 funnycom</p>
		</div>
	</div>
</body>
</html>





/* -----------pet3.html--------------- */


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>건강돌보기</title>
	<link rel="stylesheet" href="pet.css">
</head>
<body>
	<div class="wrap">
		<div class="header">
			<h1>건강돌보기</h1>
			<ul>
				<li><a href="pet1.html">애완견 종류</a></li>
				<li><a href="pet2.html">입양하기</a></li>
				<li><a href="pet3.html">건강돌보기</a></li>
				<li><a href="pet4.html">더불어살기</a></li>
			</ul>
		</div>
		<div class="contents">
			
			<h3>검사와 접종</h3>
			<ul>
				<li>예방접종</li>
				<li>종합검진</li>
				<li>스케일링</li>
				<li>중성화수술</li>
			</ul>
			<h3>예방접종</h3>
			<ol>
				<li>종합백신(DHPPL), 코로나장염</li>
				<li>종합백신(DHPPL), 코로나장염</li>
				<li>종합백신(DHPPL), 켄넬코프</li>
				<li>종합백신(DHPPL), 켄넬코프</li>
				<li>종합백신(DHPPL), 광견병</li>
				<li>코로나 장염</li>
				<li>켄넬코프</li>
				<li>광견병</li>
			</ol>
			<ul>
				<li><strong>(DHPPL) :</strong> 다섯가지 질병에 대한 예방 접종</li>
				<li><strong>코로나장염:</strong> 코로나 바이러스성 장염을 예방하는 백신</li>
				<li><strong>켄넬코프 :</strong> 켄넬코프 감기 예방 접종</li>
			</ul>
			<p>태어난 첫 해에는 6~8주 후부터 2주 간격으로 총 5회 접종을 하고 그 다음부터는 1년에 한번씩 접종하면 된다.</p>
			<h3>애완견에 해로운 음식</h3>
			<dl>
				<dt>닭뼈</dt>
				<dd>닭뼈는 개의 이빨로 깨물수 없고 닭뼈를 그대로 삼키면 목이나 위를 찌를 수 있다</dd>
				<dt>차가운 우유</dt>
				<dd>강아지는 몸이 미숙하여 설사의 원인이 될 수있다</dd>
				<dt>양파</dt>
				<dd>개의 혈액에 한해 강한 독성을 가지고 있어 적혈구를 녹인다. 심하면 급성 빈혈로 목숨이 위태로울 수 있다. 파 종류는 모두 안좋다.</dd>
			</dl>
		</div>
		<div class="footer">
			<p>copyright 2014 funnycom</p>
		</div>
	</div>
</body>
</html>





/* -----------pet4.html--------------- */



<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>강아지키우기</title>
	<link rel="stylesheet" href="pet.css">
	<style>
	img {padding: 7px;
		box-shadow:0 0 5px #333;
		margin-left: 10px;}	
	video{width:70%; }	/* 부모의 크기에 맞춘다 */
	
	</style>
</head>
<body>
	<div class="wrap">
		<div class="header">
			<h1>입양하기</h1>
			<ul>
				<li><a href="pet1.html">애완견 종류</a></li>
				<li><a href="pet2.html">입양하기</a></li>
				<li><a href="pet3.html">건강돌보기</a></li>
				<li><a href="pet4.html">더불어살기</a></li>
			</ul>
		</div>
		<div class="contents">
			
		<figure>
			<img src="pet_suni.jpg" alt="">
			<figcaption>오랜만의 외출에 신난 순이</figcaption>
		</figure>
		<h3>애완동물과 외출할 때 주의할 사항</h3>
		<ul>
			<li>인식표 부착하기</li>
			<li>목줄 등 안전조치하기</li>
			<li>배설물 수거하기</li>
			<li>예방접종 실시하기</li>
		</ul>
		
		<h3>귀염둥이들이의 일상</h3>
		<video src="pet_mypuppy.ogv" controls autoplay></video>
		</div>
		<div class="footer">
			<p>copyright 2014 funnycom</p>
		</div>
	</div>
</body>
</html>




실행결과