---만든 페이지---
소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>고양이갤러리</title>
<style>
* {
margin: 0;
padding: 0px;
}
li {
list-style: none;
}
.li {
float: left;
padding: 10px;
}
.li2 {
list-style: none;
}
.ul {
display: inline-block;
}
a {
text-decoration: none;
color: black;
}
img {
width: 430px;
height: 280px;
border: 0;
padding: 20px 0px;
}
body {
background-color: aliceblue;
}
h1,
span {}
#wrap {
margin: 50px auto;
width: 2000px;
background-color: white;
}
#wrap2 {
width: 2000px padding:30px;
height: 1600px;
}
#header {
padding: 50px;
}
#nav {
margin-left: 30px;
display: block;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#aside {
margin-left: 30px;
width: 1580px;
height: 800px;
float: left;
}
#content {
width: 390px;
height: 800px;
float: right;
}
#content h3 {
margin-top: 30px;
}
#content li {
margin-left: 10px;
}
.search {
float: right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>고양이갤러리</h1>
<p>고양이갤러리</p>
</div>
<div id="nav">
<ul class="ul">
<li class="li">고양이갤러리</li>
<li class="li">고양이분양</li>
<li class="li">고양이사료</li>
</ul>
<ul class="search">
<li class="li"><input type="text">
<input type="button">검색</li>
</ul>
</div>
<div id="wrap2">
<div id="aside">
<h2 style="padding:10px 0px">고양이사진</h2>
<p style="padding:10px 0px">2018년 6월 28일</p>
<img src="http://cafefiles.naver.net/20140703_284/rtrt1459_1404367102154siu8p_JPEG/%B9%CC%B3%C9_8.jpg">
<h3>러시안블루</h3>
<p>러시아산으로 추측되나 2차대전 때 거의 사라지다시피 했던 혈통의 맥을 잇는
과정에서 스칸디나비아와 영국의 고양이들이 교배에 참가했다고 한다.
푸르스름한 은빛 털색과 신비한 초록 눈빛, 수줍음이 많으면서도 어쩐지 웃고 있는 듯한 표정, 늘씬하면서도 다부진 체격에서 넘치는 매력은
‘단모종의 귀족’이라는 별명에 어긋남이 없다. [네이버 지식백과] 러시안블루 [Russian Blue] (고양이 기르기, 2004. 9. 10., 김영사)</p>
<img src="http://post.phinf.naver.net/MjAxODA2MDdfOTMg/MDAxNTI4MzcxNTk5MDg1.1hrBxELLlxLBs7Ak0rkhm0as4vpg-XtuS2GXrFP9oQAg.
WGDjneSRqzpDiPsbNLyDBLkelnm_ftWcWMAsg9G0xGkg.JPEG/mug_obj_201806072039599489.jpg">
<h3>터키쉬앙고라</h3>
<p>신16세기 터키 앙카라에서 프랑스로 전해진 터키시 앙고라 고양이는 귀족들에게 큰 인기를 얻었다. 그 중 리슐리외 추기경은 고양이를 무척 아낀 것으로 유명하다.
그는 신비한 오드아이 눈빛과 아름다운 하얀 털을 가진 터키쉬 앙고라의 모습에 매료 되어 더욱 특별하게 아꼈다고 한다.
그가 죽을 당시 유언 중 하나로 고양이들을 죽을 때까지 돌보는 조건으로 하녀 한 사람에게 연금과 고양이와 같이 살 집도 하나 남겼다고 한다.</p>
<img src="http://blogfiles1.naver.net/data19/2006/12/4/222/%C6%E4%B8%A3%BD%C3%BE%C8_1-bearpoohss.jpg">
<h3>페르시안</h3>
<p>긴 털을 가진 장모종의 대표적인 품종으로 털이 가늘고 길고 풍성하다. 털에서는 부드러운 감촉과 윤기가 나는데 목과 가슴에 장식털이 많다.
털의 색깔과 무늬의 모양에 따라 페르시아고양이의 종류를 구분하는데 매우 다양하다. 털이 길어 커 보이지만 실제로 체형은 중간 정도이며 튼튼하다.
다리는 굵고 짧은 편이며 꼬리 역시 굵고 짧지만 털이 매우 길고 풍성하게 나 있다. 얼굴은 다른 품종과는 다르게 넓고 둥글며 뺨은 볼록하다.
두 눈 사이의 간격은 멀고 눈 모양은 둥글고 크다. 코는 폭이 넓고 짧은데 일부 페르시아고양이는 코가 위로 들려있는 들창코 모양인 경우도 있다.
페르시안 친칠라라는 페르시안에서 갈라져 나온 품종이 있다.</p>
</div>
<div id="content">
<ul>
<h3>카테고리</h3>
<li class="li2">고양이갤러리</li>
<li class="li2">고양이분양</li>
<li class="li2">고양이사료</li>
<li class="li2">경기도고양시</li>
</ul>
<ul>
<h3>최근글</h3>
<li class="li2"><a href="#">러시안블루</a></li>
<li class="li2"><a href="#">터키쉬앙고라</a></li>
<li class="li2"><a href="#">페르시안</a></li>
<li class="li2"><a href="#">아비시니안</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
'프로그래밍 > HTML.CSS' 카테고리의 다른 글
| CSS 선택자 (0) | 2018.06.28 |
|---|---|
| CSS 속성 (0) | 2018.06.27 |
| HTML - 첫번째 수업 (0) | 2018.06.26 |
| 웹표준 - HTML (0) | 2018.06.26 |
