커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
1-4 잘 따라갔는데 마지막에 누르면 추가버튼이 나오고, 다시 누르면 등록하기 버튼이 번갈아 나오는 부분에서 진행이 안됩니다.
undefined주차
오*춘
댓글
3
・
추천
0
・
조회수
11
조회수
11
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
추가하기 취소하기 버튼을 누르면 다른 창으로 옮겨가는 것은 되었는데, 마지막 부분에 추가하기를 누르면 취소하기 창이 뜨고, 취소하기 창을 누르면 추가하기 창이 번갈아 뜨도록 했는데, 설명하신 대로 따라간 것 같은데 번갈아 하는 것이 일어나지 않고, 그냥 떠 있기만 합니다.
여기까지는 진행이 되었습니다.
이거 다음에 밑줄친 부분만 추가로 넣었는데, 번갈아 나타나지 않고, 그냥 두 쪽이 떠있습니다.
강사님 설명으로는 번갈아 나옵니다.
작성한 코드 및 에러 메세지
아래는 오류가 나는 코드이고, 다음에 나오는 것은 마지막부분 제외하고 잘 진행될 때까지 코드입니다.
<!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>
html,
body,
h1,
h2,
h3,
p,
a,
span {
margin: 0;
padding: 0;
}
.wrap {
width: 1050px;
margin: auto;
}
.card {
width: 320px;
height: 340px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 16px 10px;
border: 1px solid black;
}
.card-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.card-image {
background-image: url('https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F5005%2F2022%2F12%2F09%2F0000714471_001_20221209211602717.jpg&type=sc960_832');
background-position: center;
background-size: cover;
width: 100%;
height: 200px;
}
.card>span {
margin: 8px;
}
.card-title {
font-size: 18px;
font-weight: bold;
}
.period {
color: yellowgreen;
font-size: 14px;
}
.tags {
color: gray;
font-size: 14px;
word-break: keep-all;
}
.url-form {
align-items: center;
justify-content: space-around;
}
.plus-form {
align-items: center;
justify-content: center;
cursor: pointer;
}
</style>
<script>
$(document).ready(() => {
showPlusForm();
})
const showUrlForm = () => {
$('#url-form').show();
$('#plus-form').hide();
}
const showPlusForm = () => {
$('#url-form').hide();
$('#plus-form').show();
}
</script>
</head>
<body>
<div class="wrap">
<h1>오늘의 전시</h1>
<div class="card-wrap">
<div class="card">
<div class="card-image"></div>
<span class="card-title">제목</span>
<span class="period">기간</span>
<span class="tags">#설명회 #설명회 #설명회 #설명회 #설명회 #설명회 #설명회 #설명회</span>
</div>
<div id="url-form" class="url-form card">
<input type="text">
<div>
<button onclick="showPlusForm()">취소하기</button>
<button>등록하기</button>
</div>
</div>
<div id="plus-form" onclick="showUrlForm()" class="plus-form card">
<span>+</span>
<span>추가하기</span>
</div>
</div>
</div>
</body>
</html>오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
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>
html,
body,
h1,
h2,
h3,
p,
a,
span {
margin: 0;
padding: 0;
}
.wrap {
width: 1050px;
margin: auto;
}
.card {
width: 320px;
height: 340px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 16px 10px;
border: 1px solid black;
}
.card-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.card-image {
background-image: url('https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F5005%2F2022%2F12%2F09%2F0000714471_001_20221209211602717.jpg&type=sc960_832');
background-position: center;
background-size: cover;
width: 100%;
height: 200px;
}
.card>span {
margin: 8px;
}
.card-title {
font-size: 18px;
font-weight: bold;
}
.period {
color: yellowgreen;
font-size: 14px;
}
.tags {
color: gray;
font-size: 14px;
word-break: keep-all;
}
.url-form {
align-items: center;
justify-content: space-around;
}
.plus-form {
align-items: center;
justify-content: center;
cursor: pointer;
}
</style>
<script>
const showUrlForm = () => {
alert('URL 폼아 보여져라!')
}
const showPlusForm = () => {
alert('Plus 폼아 보여져라!')
}
</script>
</head>
<body>
<div class="wrap">
<h1>오늘의 전시</h1>
<div class="card-wrap">
<div class="card">
<div class="card-image"></div>
<span class="card-title">제목</span>
<span class="period">기간</span>
<span class="tags">#설명회 #설명회 #설명회 #설명회 #설명회 #설명회 #설명회 #설명회</span>
</div>
<div class="url-form card">
<input type="text">
<div>
<button onclick="showPlusForm()">취소하기</button>
<button>등록하기</button>
</div>
</div>
<div onclick="showUrlForm()" class="plus-form card">
<span>+</span>
<span>추가하기</span>
</div>
</div>
</div>
</body>
</html>
댓글 알림
