커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
Javascript는 작동을 안하고 css도 연결이 풀렸습니다.
인생사진 쏙쏙 코딩네컷 v0
1주차
서*
댓글
4
・
추천
0
・
조회수
13
조회수
13
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
Javascript를 넣고 클래스를 부여하고 나니 그전에 text-description클래스의 부여했던 CSS가 작동하지 않습니다.
클릭도 작동을 안합니다. 하지만 이상하게 첫번째는 작동을 합니다. 제가 뭘 따라가지 못한건가요?
Body안에 Span에 desc2와 desc3 각각 id 준것들도 빨간색으로 변해서 문제가 있다고 뜹니다.
마지막에 </html>닫는 태그도 문제있다고 하는데 저는 뭐가 문제인지 모르겠습니다..
첫번째 사진과 텍스트는 show도 hide도 잘먹고 CSS도 먹었습니다. 클릭하면 팝업도 뜹니다. 근데 2번째 부터 클릭도 안되고 CSS도 적용안되고 show도 hide도 먹지 않았습니다. 커서 포인터로 변경되는 것만 먹네요. 코드창에도 문제가 있다고 빨간색으로 뜨는데 못알아듣겠습니다…
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
<!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>
/* 이서윤체 폰트 적용을 위한 코드 */
@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태그 자체에 css 요소 부여 */
body {
font-family: "LeeSeoyun";
margin: 0;
display: flex;
justify-content: center;
background-image: url("./background.png");
}
.container {
width: 390px;
background-color: #ff9d73;
height: 100%;
}
.photos{
margin-top: 30px;
}
.photo-frame {
background-color: white;
margin: 15px 20px;
height: 200px;
background-size: cover;
position: relative;
cursor: pointer;
}
.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('./img1.png');
}
#image2{
background-image: url('./img2.png');
}
#image3{
background-image: url('./img3.png');
}
#image4{
background-image: url('./img4.png');
}
.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;
}
.video {
width: 100%;
height: 100%;
}
/* opacity : 투명도를 의미해요! 0% 투명하다. 즉 다 보인다. */
.showText {
opacity: 0;
}
/* transition : 나타날 때 0.5초동안 천천히 나타나는 효과를 주라는 의미에요 */
.hideText {
opacity: 1;
transition: opacity 0.5s linear ;
}
</style>
<script>
// 텍스트가 보여지는 기능
// 1. 몇 번째 사진에 마우스가 올라갔는지 확인(if문)
// 2. 해당 사진을 찾아 hideText class를 지워주고, showText는 삽입해줌
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 {
document.querySelector("#desc3").classList.remove("hideText");
document.querySelector("#desc3").classList.add("showText");
}
}
// 텍스트가 감춰지는 기능
// 1. 몇 번째 사진에서 마우스가 벗어났는지 확인(if문)
// 2. 해당 사진을 찾아 shotText class를 지워주고, hideText는 삽입해줌
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 {
document.querySelector("#desc3").classList.remove("showText");
document.querySelector("#desc3").classList.add("hideText");
}
}
// 클릭 기능
// 1. 선택된 사진의 숫자를 가진 텍스트를 alert 형태로 출력해줌
function alertText(number) {
alert(`${number}번째 추억이에요! 눌러주셔서 감사합니다 :)`);
}
</script>
</head>
<body>
<div class="container">
<div class="photos">
<div id="image1" class="photo-frame"
onmouseover="hideText(1)"
onmouseout="showText(1)"
onclick="alertText(1)"
>
<span id="desc1" class="photo_description">
작년 9월 동해 갔을 때 ;)
</span>
</div>
<div id="image2" class="photo-frame"
onmouseover="hideText(2)"
onmouseout="showText(2)"
onclick="alertText(2)
>
<span id="desc2" class="photo_description">
작년 할로윈 파티
</span>
</div>
<div id="image3" class="photo-frame"
onmouseover="hideText(3)"
onmouseout="showText(3)"
onclick="alertText(3)
>
<span id="desc3" class="photo_description">
코딩공부 시작한 날
</span>
</div>
<div class="photo-frame">
<iframe
src="https://www.youtube.com/embed/TWz1btekxfs"
frameborder="0"
class="video"
></iframe>
</div>
</div>
<div class="footer">
<p class="f-title">Happy Lunch Time</p>
<p class="f-date">2023.02.10</p>
</div>
</div>
</body>
</html>
댓글 알림
