* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
1) 나중에 스스로 웹페이지를 호스팅하면서 만들때를 대비해 짜봤는데 사진을 저런식으로 구글드라이브에서 받아와도 상관없을까요?
2) 모바일에서 데스크탑 모드로 보기를 했을때 화면 사이즈가 작아서 그런지 사진이 잘리는 경우가있는데 이건 어떤걸로 조절할수있을까요? 안잘리고 비율유지하며 사이즈만 줄이고 싶습니다. PC로 했을때도 창을 최대한으로 줄이면 똑같은 경우가 있네요
3) image4에서 사진화질문제가 있어서 125%로 확대했는데 중간을 기준으로 확대가되어서 이걸 왼쪽을 기준으로 확대하는 방법은 뭐가있을까요? margin-left값을 주면되나요?
http://asd.xn--lg3b78g.xn--yq5b.xn--3e0b707e/
만든 사이트 링크입니다.
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="ko">
<head>
<title>인생이 심하게 꼬여버린새끼</title>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@font-face {
font-family: "LeeSeoyun";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body {
font-family: "LeeSeoYun";
margin: 0;
display: flex;
justify-content: center;
background-image: url("http://drive.google.com/uc?export=view&id=1vm1xFtPs1r7jPTddHevSCjq0H9xFKkxH");
background-size: cover;
background-repeat: no-repeats;
}
.container {
width: 600px;
background-color: #fb8654;
height: 100%;
}
.photos {
margin-top: 30px;
}
.photo-frame {
background-color: white;
margin: 15px 20px;
height: 300px;
background-repeat: no-repeat;
position: relative;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
}
.f-title {
color: white;
font-size: 25px;
font-weight: 900;
}
.f-date {
color: white;
font-size: 15px;
font-weight: 500;
}
#image1 {
background-image: url(https://d2gd6pc034wcta.cloudfront.net/images/logo@2x.png);
background-position-y: center;
background-position-x: center;
}
#image2 {
background-image: url(http://drive.google.com/uc?export=view&id=1P2geZfQ8oCEDA4pT6mivYICnN_mhjdVi);
background-position-y: center;
background-position-x: center;
background-size: cover;
}
#image3 {
background-image: url(http://drive.google.com/uc?export=view&id=1P7KQN1_Y9im4R5DvXTkvvlGOAuIjPCE9);
background-position-y: center;
background-position-x: center;
background-size: cover;
}
#image4 {
background-image: url(http://drive.google.com/uc?export=view&id=1jaqE1Zy6I7MrGD-QscfDVROktMDcpNrP);
background-position-y: center;
background-position-x: center;
background-size: cover;
background-size: 125%;
}
.photo_description {
color: white;
background-color: black;
width: fit-content;
padding: 0 20px;
margin-bottom: 10px;
border-radius: 10px;
position: absolute;
bottom: 0;
transform: translate(-50%);
left: 50%;
opacity: 0;
}
.showText {
opacity: 1;
transition: opacity 0.5s linear;
}
.hideText {
opacity: 0;
}
</style>
<script>
function showText(number) {
if (number === 1) {
document.querySelector("#desc1").classList.remove("hideText");
document.querySelector("#desc1").classList.add("showText");
} else if (number === 2) {
document.querySelector("#desc2").classList.remove("hideText");
document.querySelector("#desc2").classList.add("showText");
} else if (number === 3) {
document.querySelector("#desc3").classList.remove("hideText");
document.querySelector("#desc3").classList.add("showText");
} else{
document.querySelector("#desc4").classList.remove("hideText");
document.querySelector("#desc4").classList.add("showText");}
}
function hideText(number) {
if (number === 1) {
document.querySelector("#desc1").classList.remove("showText");
document.querySelector("#desc1").classList.add("hideText");
} else if (number === 2) {
document.querySelector("#desc2").classList.remove("showText");
document.querySelector("#desc2").classList.add("hideText");
} else if (number === 3){
document.querySelector("#desc3").classList.remove("showText");
document.querySelector("#desc3").classList.add("hideText");
}else {
document.querySelector("#desc4").classList.remove("showText");
document.querySelector("#desc4").classList.add("hideText");
}
}
function alertText(number) {
alert(`${number}번째 추억이에요! 눌러주셔서 감사합니다 :)`);
}
</script>
</head>
<body>
<div class="container">
<div class="photos">
<a href="https://www.acmicpc.net/user/rlatjdals104" target="_blank">
<div id="image1" class="photo-frame" onmouseover="showText(1)" onmouseout="hideText(1)"
onclick="alertText(1)"><span id="desc1" class="photo_description">파이썬 원툴의 발자취</span></div>
</a>
<div id="image2" class="photo-frame" onmouseover="showText(2)" onmouseout="hideText(2)"
onclick="alertText(2)"><span id="desc2" class="photo_description">벚꽃</span></div>
<div id="image3" class="photo-frame" onmouseover="showText(3)" onmouseout="hideText(3)"
onclick="alertText(3)"><span id="desc3" class="photo_description">전역</span></div>
<a href="https://github.com/d982h8st7/underconstruction/blob/main/web"target="_blank"><div id="image4" class="photo-frame"
onmouseover="showText(4)"
onmouseout="hideText(4)"
onclick="alertText(4)"><span id="desc4" class="photo_description">이 웹페이지를 만드는 과정</span></div></a>
</div>
<div class="footer">
<p class="f-title">Endeavor to Full stack Engineer</p>
<p class="f-title" title="역경을 딛고 별이 되어">Per aspera ad astra</p>
<p class="f-date">2023.03.26</p>
<p class="f-date"><a href="https://github.com/d982h8st7" target="_blank"><img
src="http://drive.google.com/uc?export=view&id=1fNPUKe82cptFZF8iSGe0wlvIk9foFG-R"
style="width: 10%; margin-left : 40%"></a>
<a href="https://www.instagram.com/sin_nar_ver/" target="_blank"><img
src="http://drive.google.com/uc?export=view&id=1pIBi0iPOtNVd1mcsP1ZzGATa5G1k-Zyp"
style="width:12%;margin: left 10px;"></a>
</p>
</div>
</div>
</div>
</body>
</html>
