주말동안 이 사진이랑 똑같이 만들어서 올려야 한당..
반응형 만들어보려다 실패...
어쩌다 보니 사이즈에 상관없이 틀이 고정되는 상황이 발생했당..
그리고 크게 보면 이렇게 되는데 이게 맞나....(아님)
90%~120%정도까지는 괜찮긴한데......
그냥 크기 고정으로 해야 겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrapper{
width: 60vw;
height: 100vh;
margin: 0 auto;
}
header{
width: 60vw;
height: 25vh;
background-image: url("1.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
header h1{
color: #ffffcc;
text-align: right;
padding-right: 30px;
padding-top: 12vh;
margin-bottom: 0;
text-shadow: 2px 2px 4px #333;
font-size: 2.5rem;
}
header h2{
color: #ffff00;
text-align: right;
padding-right: 30px;
margin-top: 0;
text-shadow: 1px 1px 2px #333;
font-size: 1.5rem;
}
#menu{
width: 60vw;
display: flex;
background: #271717;
color: white;
height: 6vh;
font-size: 1rem;
}
#menu div{
width: 120px;
text-align: center;
padding-top: 1%;
}
#menu div:nth-child(1){
margin-left: 50px;
}
main{
width: 60vw;
height: calc(100vh - (25vh + 6vh + 15vh)); /* header, menu, footer 제외한 값 */
overflow: auto;
display: flex;
box-sizing: border-box;
grid-template-columns: 3fr 1fr;
}
#left{
width: 45vw;
min-height: 54vh;
background: rgb(255, 194, 194);
padding: 10px 20px;;
box-sizing: border-box;
}
#left h5{
margin-bottom: 0;
}
#left p{
font-size: clamp(14px, 1vw, 22px);
}
.image-container1 {
width: calc(45vw - 40px);
box-sizing: border-box;
display: flex;
justify-content: center;
}
.image-container1 img {
max-width: 100%;
height: auto;
object-fit: cover;
padding:10px 0;
}
#right{
background: #dcfedc;
width: 15vw;
min-height: 54vh;
padding: 30px 10px;
box-sizing: border-box;
}
#right h5{
margin: 10px 0;
}
#right{
font-size: clamp(14px, 1vw, 22px);
}
.image-container2 {
width: calc(15vw - 20px);
box-sizing: border-box;
text-align: center;
}
.image-container2 img {
max-width: 100%;
height: auto;
object-fit: cover;
padding:10px 0;
}
footer{
width: 60vw;
height: 15vh;
background: #003300;
color: white;
text-align: center;
font-style: italic;
padding-top: 10px;
margin-top: 0;
}
@media (max-width: 768px) {
main {
flex-direction: column;
}
#left, #right {
width: 100%;
min-height: auto;
}
}
</style>
</head>
<body>
<div id = "wrapper">
<header>
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
</header>
<div id = "menu">
<div>이용 안내</div>
<div>객실 소개</div>
<div>예약 방법</div>
<div>예약 하기</div>
</div>
<main>
<div id = "left">
<h3>요안도라 소개</h3>
<h5>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다.</h5><br>
<p>성산의 날씨는 다음주 내낸 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 나가 앉아있는 시간이 많아질 듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도라 올레 입구에 곤색의 대문을 달았습니다.</p>
<p>
내일은 두달 여동안 밖거리에 만든 데스트하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>
그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께 하고, 도시의 바쁜 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
</p>
<div class="image-container1">
<img src="2.png" alt="빨간색 꽃 이미지">
</div>
</div>
<div id = "right">
<h5>¤ 알립니다.</h5>
<p>게스트하우스 예약은 전화 070-###-####로 직접 통화하시는 게 가장 정확하고 빠릅니다. 인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다.</p>
<div class="image-container2">
<img src="3.jpg" alt="돌담 사진">
<img src="4.jpg" alt="파란 지붕 하얀 집">
<img src="5.jpg" alt="곤색 대문">
</div>
</div>
</main>
<footer>
<p>제주특별자치도 남제주군 성산읍 수산리 000번지 요안도라</p>
<p>yoan##@naver.com</p>
<p>Copyright ©. All rights reserved.</p>
</footer>
</div>
</body>
</html>일단 여기서 css만 지우고 고정으로 다시 해봐야 겠다..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joandora</title>
<style>
*{
box-sizing: border-box;
}
#wrapper{
width: 780px;
height: 860px;
margin: 0 auto;
padding: 0;
}
header{
height: 180px;
background-image: url("1.png");
background-size: cover;
background-position: center;
}
header h1{
margin-top: 0;
margin-bottom: 0;
text-align: right;
color: #ffffcc;
padding-top: 70px;
padding-right: 30px;
text-shadow: 2px 2px 4px #333;
}
header h2{
margin-top: 0;
color: #ffff00;
text-align: right;
padding-right: 30px;
text-shadow: 1px 1px 2px #333;
}
#menu{
display: flex;
background: #271717;
height: 50px;
}
#menu div{
width: 120px;
text-align: center;
color: white;
padding: 5px;
font-size: 0.8rem;
}
#menu div:nth-child(1){
margin-left: 50px;
}
main{
height: 500px;
display: flex;
}
#left{
width: 585px;
height: 500px;
padding: 10px;
padding-bottom: 0;
}
#left img{
width: 565px; /* padding 사이즈 뺌 */
height: auto;
background-size: cover;
padding-top: 10px
}
#right{
background: #dcfedc;
width: 195px;
height: 500px;
padding: 10px;
}
#left p, #right p{
font-size: 0.7rem;
}
#right img{
width: 175px;
height: auto;
padding-bottom: 10px;
opacity: 0.4;
}
#right img:nth-child(5){
padding-bottom: 0px;
}
footer{
height: 130px;
background: #003300;
color: white;
text-align: center;
font-style: italic;
padding: 20px;
font-size: 0.7rem;
}
h5{
margin-bottom: 0;
}
</style>
</head>
<body>
<div id = "wrapper">
<header>
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
</header>
<div id = "menu">
<div>이용 안내</div>
<div>객실 소개</div>
<div>예약 방법</div>
<div>예약 하기</div>
</div>
<main>
<div id = "left">
<h3>요안도라 소개</h3>
<h5>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다.</h5>
<p>성산의 날씨는 다음주 내낸 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 나가 앉아있는 시간이 많아질 듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도라 올레 입구에 곤색의 대문을 달았습니다.</p>
<p>
내일은 두달 여동안 밖거리에 만든 데스트하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>
그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께 하고, 도시의 바쁜 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
</p>
<img src="2.png" alt="빨간색 꽃 이미지">
</div>
<div id = "right">
<h5>¤ 알립니다.</h5>
<p>게스트하우스 예약은 전화 070-###-####로 직접 통화하시는 게 가장 정확하고 빠릅니다. 인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다.</p>
<img src="3.jpg" alt="돌담 사진">
<img src="4.jpg" alt="파란 지붕 하얀 집">
<img src="5.jpg" alt="곤색 대문">
</div>
</main>
<footer>
<p>제주특별자치도 남제주군 성산읍 수산리 000번지 요안도라</p>
<p>yoan##@naver.com</p>
<p>Copyright ©. All rights reserved.</p>
</footer>
</div>
</body>
</html>
30분이면 끝나는 걸 rem, vw 이런 거 좀 써보겠다고 3시간 반을 헤맸다...
하지만 다시 도전해보고 싶은 걸...?
