강아지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>강아지</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans KR';
}
li {
list-style: none;
}
#wrap {
margin: 20px auto;
width: 850px;
height: 940px;
}
header {
width: 100%;
height: 200px;
background: #f46474;
color: #FFFFFF;
}
header #nav {
float: left;
width: 60%;
margin: 110px 40px 20px;
}
header #nav li {
float: left;
text-align: center;
font-size: 20px;
width: 25%;
height: 40px;
line-height: 40px;
}
header #logo {
float: right;
width: 30%;
height: 100%;
padding: 10px;
background-image: url("./image/nav2.png");
background-size: cover;
background-repeat: no-repeat;
}
section {
width: 100%;
height: 690px;
margin: 10px 0;
}
h2 {
padding: 20px 0;
}
article {
width: 610px;
float: left;
}
article div {
width: 300px;
height: 300px;
float: left;
padding: 20px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #CCC;
}
article div:nth-child(2n) {
margin: 0;
}
article h3 {
margin-bottom: 20px;
}
article p {
font-size: 0.8em;
line-height: 25px;
}
aside {
width: 200px;
height: 370px;
float: right;
background: url("./image/pet.png");
background-repeat: no-repeat;
}
footer {
clear: both;
width: 100%;
height: 50px;
background: #444444;
}
footer p {
text-align: center;
line-height: 50px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<div id="logo">
</div>
<ul id="nav">
<li>애완견 종류</li>
<li>입양하기</li>
<li>건강돌보기</li>
<li>더불어살기</li>
</ul>
</header>
<section>
<h2>강아지 용품 준비하기</h2>
<article>
<div>
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요. 집을 구입하실 때는 박음질이 잘 되어 있는지,
세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div>
<h3>강아지 먹이</h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야
합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</div>
<div>
<h3>밥그릇, 물병</h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다. 물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로
대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</div>
<div>
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다
방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</div>
</article>
<aside>
<div id="sideimg"></div>
</aside>
</section>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</div>
</body>
</html>요안도라
기본 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joandora</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
body {
background: linear-gradient(skyblue, white);
background-repeat: no-repeat;
}
#wrap {
margin: 10px auto;
width: 1000px;
height: 820px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
}
#header {
width: 100%;
height: 350px;
}
#back_img {
width: 100%;
height: 300px;
position: relative;
background-image: url(./image/bg.png);
background-repeat: no-repeat;
background-size: cover;
}
#back_img h1 {
position: absolute;
top: 50px;
left: 30px;
color: #FFFF00;
font-family: Arial, Helvetica, sans-serif;
font-size: 3.2em;
}
#header ul {
width: 100%;
height: 50px;
background: darkgreen;
}
#header ul li {
float: left;
width: 200px;
height: 100%;
text-align: center;
}
#header ul li a {
line-height: 50px;
color: #EEE;
}
#section {
width: 100%;
height: 400px;
}
#contents {
float: left;
width: 75%;
padding: 10px;
}
h2 {
margin: 10px 0;
}
h4 {
margin-bottom: 10px;
}
h4::before {
content: "*";
margin-right: 5px;
}
#section p {
font-size: 1em;
margin-bottom: 10px;
}
#gallery {
float: right;
width: 25%;
height: 100%;
background: rgba(255, 255, 0, 0.4);
padding: 10px;
}
#gallery li {
width: 100%;
height: 33%;
margin-bottom: 5px;
background: chocolate;
background-size: cover;
}
#gallery li:nth-child(1) {
background-image: url(./image/1.jpg);
}
#gallery li:nth-child(2) {
background-image: url(./image/2.jpg);
}
#gallery li:nth-child(3) {
background-image: url(./image/3.jpg);
}
#footer {
clear: both;
width: 100%;
height: 70px;
background: rgb(50, 107, 107);
}
#footer div {
width: 100%;
height: 50%;
line-height: 35px;
text-align: center;
}
#footer div p {
color: #FFFFFF;
}
#footer div:last-child p {
font-style: italic;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="back_img">
<h1>Joandora</h1>
</div>
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약 하기</a></li>
</ul>
</div>
<div id="section">
<div id="contents">
<h2>요안도라 소개</h2>
<h4>요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다.</h4>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이
많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p>내일은 두달 여동안 밖거리에 만든 게스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>그리고 이것저것 사소한 정리를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을
설렘으로
만나고 함께하고, 도시의 바쁜 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.</p>
<p>그럼 이 홈페이지를 공식적으로 체계적으로 갖추면서, 그동안 공사로 어수선해 올려드리지 못한 집 안팎 사진들을 상세하게 올리고 당신을 만날 채비를 마치겠습니다.</p>
</div>
<ul id="gallery">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="footer">
<div>
<p>제주특별자치도 남제주군 성산읍 수산리 000 번지</p>
</div>
<div>
<p>Copyright © All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>미디어 쿼리 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joandora</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
body {
background: linear-gradient(skyblue, white);
background-repeat: no-repeat;
}
#wrap {
margin: 10px auto;
width: 1000px;
height: 820px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
}
#header {
width: 100%;
height: 350px;
}
#back_img {
width: 100%;
height: 300px;
position: relative;
background-image: url(./image/bg.png);
background-repeat: no-repeat;
background-size: cover;
}
#back_img h1 {
position: absolute;
top: 50px;
left: 30px;
color: #FFFF00;
font-family: Arial, Helvetica, sans-serif;
font-size: 3.2em;
}
#header ul {
width: 100%;
height: 50px;
background: darkgreen;
}
#header ul li {
float: left;
width: 200px;
height: 100%;
text-align: center;
}
#header ul li a {
line-height: 50px;
color: #EEE;
}
#section {
width: 100%;
height: 400px;
}
#contents {
float: left;
width: 75%;
padding: 10px;
}
h2 {
margin: 10px 0;
}
h4 {
margin-bottom: 10px;
}
h4::before {
content: "*";
margin-right: 5px;
}
#section p {
font-size: 1em;
margin-bottom: 10px;
}
#gallery {
float: right;
width: 25%;
height: 100%;
background: rgba(255, 255, 0, 0.4);
padding: 10px;
}
#gallery li {
width: 100%;
height: 33%;
margin-bottom: 5px;
background: chocolate;
background-size: cover;
}
#gallery li:nth-child(1) {
background-image: url(./image/1.jpg);
}
#gallery li:nth-child(2) {
background-image: url(./image/2.jpg);
}
#gallery li:nth-child(3) {
background-image: url(./image/3.jpg);
}
#footer {
clear: both;
width: 100%;
height: 70px;
background: rgb(50, 107, 107);
}
#footer div {
width: 100%;
height: 50%;
line-height: 35px;
text-align: center;
}
#footer div p {
color: #FFFFFF;
}
#footer div:last-child p {
font-style: italic;
}
@media screen and (max-width:1024px) {
#wrap {
width: 580px;
height: 910px;
}
#header {
width: 100%;
height: 250px;
}
#back_img {
width: 100%;
height: 200px;
}
#header ul li {
width: 100px;
}
#section {
height: 590px;
}
#contents,
#gallery {
float: none;
width: 100%;
}
#contents {
height: 440px;
}
#gallery {
height: 150px;
background: none;
}
#gallery li {
float: left;
width: 33%;
margin-right: 0.5%;
height: 100%;
}
#gallery li:last-child {
margin: 0;
}
#footer {
font-size: 0.8em;
}
}
@media screen and (max-width:600px) {
#wrap {
width: 60%;
min-width: 320px;
height: 1570px;
}
#header {
width: 100%;
height: 300px;
}
#back_img {
width: 100%;
height: 100px;
background: #041800;
}
#back_img h1 {
top: 30px;
left: 15px;
font-size: 2.5em;
}
#header ul {
height: 200px;
padding: 5px;
background: none;
}
#header ul li {
float: none;
width: 90%;
margin: 0 auto;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
border: 1px solid #BBB;
border-radius: 10px;
}
#header ul li:last-child {
margin-bottom: 0;
}
#header ul li a {
line-height: 0;
color: blue;
font-size: 0.9em;
}
#section {
height: 1200px;
}
#contents,
#gallery {
float: none;
width: 100%;
}
#contents {
height: 570px;
}
#contents p {
font-size: 0.9em;
}
#gallery {
height: 630px;
}
#gallery li {
float: none;
width: 100%;
/*320px*/
height: 200px;
}
#gallery li:last-child {
margin: 0;
}
#footer p {
font-size: 0.8em;
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="back_img">
<h1>Joandora</h1>
</div>
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약 하기</a></li>
</ul>
</div>
<div id="section">
<div id="contents">
<h2>요안도라 소개</h2>
<h4>요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다.</h4>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이
많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p>내일은 두달 여동안 밖거리에 만든 게스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>그리고 이것저것 사소한 정리를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을
설렘으로
만나고 함께하고, 도시의 바쁜 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.</p>
<p>그럼 이 홈페이지를 공식적으로 체계적으로 갖추면서, 그동안 공사로 어수선해 올려드리지 못한 집 안팎 사진들을 상세하게 올리고 당신을 만날 채비를 마치겠습니다.</p>
</div>
<ul id="gallery">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="footer">
<div>
<p>제주특별자치도 남제주군 성산읍 수산리 000 번지</p>
</div>
<div>
<p>Copyright © All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
velog, GitHub, Notion 등에 작업물을 정리하고 있습니다.