[TIL] 24-10-29
모달 적용하기
오늘은 팀장님이 만든 html에 모달을 적용해서 멤버별 최애 음식점을 만들어 봤다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&family=Noto+Sans+KR:wght@100..900&display=swap"
rel="stylesheet"> <!-- 글꼴 불러오기-->
<title>CSSJBR</title>
<style>
* {
font-family: "Noto Sans KR", sans-serif;
}
.title {
font-family: "Dancing Script", serif;
margin-top: 200px;
height: 200px;
margin: 0 auto;
font-size: 60px;
text-align: center;
color: #ff3d00;
line-height: 180px;
}
.title>img {
width: 70px;
float: left;
margin-top: 60px;
margin-left: 100px;
}
.six {
margin: 30px;
}
.black {
background-color: rgb(59, 59, 59);
height: 3px;
margin: 0 auto;
margin-bottom: 70px;
margin-left: 30px;
margin-right: 30px;
}
.menu {
background-color: white;
box-shadow: 0px 0px 3px 0px black;
width: 350px;
height: 350px;
font-size: 25px;
float: left;
margin-left: 50px;
margin-top: 20px;
line-height: 70px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.home {
width: 35px;
}
.labtop {
width: 30px;
}
.book {
width: 30px;
}
.ping {
width: 30px;
}
.subtitle {
margin-top: 600px;
border: 3px solid #ff3d00;
border-radius: 40px;
margin: 0 auto;
width: 500px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 15px;
}
.information {
width: 1280px;
height: 1000px;
margin-left: 450px;
margin-right: 50px;
}
.information>p {
text-align: center;
font-size: 20px;
}
.introduce {
display: flex;
}
.cssjbr {
width: 400px;
height: 500px;
margin-left: 20px;
margin-top: 50px;
}
.cssjbr>p {
text-align: center;
font-size: 15px;
}
.cssjbrbox {
border: 3px solid #ff3d00;
border-radius: 40px;
height: 400px;
text-align: center;
}
.emoji {
display: inline-block;
width: 400px;
height: 500px;
margin-left: 20px;
margin-top: 50px;
}
.emoji>p {
text-align: center;
font-size: 15px;
}
.emojibox {
border: 3px solid #ff3d00;
border-radius: 40px;
height: 400px;
text-align: center;
}
.object {
display: inline-block;
width: 400px;
height: 500px;
margin-left: 20px;
margin-top: 50px;
}
.object>p {
text-align: center;
font-size: 15px;
}
.objectbox {
border: 3px solid #ff3d00;
border-radius: 40px;
height: 400px;
text-align: center;
}
.favorite-restaurant {
width: 1280px;
margin-left: 450px;
margin-right: 50px;
display: grid;
}
.fav-res {
width: 400px;
margin-left: 20px;
margin-top: 50px;
}
.fav-res-box {
border: 3px solid #ff3d00;
border-radius: 40px;
height: 200px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fav-res-box > p{
margin: 0;
}
.fav-res-subtitle {
grid-column: span 3;
border: 3px solid #ff3d00;
border-radius: 40px;
margin: 0 auto;
width: 500px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 15px;
}
#modal {
display: none;
background-color: yellowgreen;
width: 600px;
height: 500px;
overflow-y: auto;
margin: auto;
padding: 0 15px 0 15px;
position: fixed;
transform: translate(125%, -98%);
border-radius: 50px;
} /* 모달창 */
#modal #modal-content {
text-align: center;
padding: 50px;
width: 100%;
} /* 모달창 내용 */
#modal #modal-close {
float:right;
font-size: 40px;
padding-right: 10px;
display: inline;
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
} /* 모달창 x 버튼 */
#modal img {
max-width: 100%;
height: auto;
max-width: 300px;
max-height: 200px;
} /* 모달창 이미지 */
#modal a {
color:aquamarine;
}
#modal a:hover {
text-decoration: underline;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",() => {
const modal = document.getElementById("modal");
const modalContent = document.getElementById('modal-content')
function modalOn(content) {
modalContent.innerHTML = content;
modal.style.display = "flex";
} // 모달 켜는 함수
function modalOff() {
modal.style.display = "none";
} // 모달 종료 함수
const clickModal = document.querySelectorAll(".fav-res-box"); // fav-res-box 클래스를 가진 모든 요소 선택
clickModal.forEach(clic =>{
clic.addEventListener("click", () => {
const content = clic.getAttribute("data-content");
modalOn(content);
}) // 클릭 시 data불러오고 모달 켜는 함수 실행되도록
}) // 여러개의 요소가 있기때문에 forEach로 반복
const closeModal = document.getElementById("modal-close");
closeModal.addEventListener("click", modalOff); // 클릭 시 모달 종료 함수 실행
})
</script>
</head>
<body>
<div class="title">
<img
src="data:image/png;base64,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">
<!--캐치테이블 로고-->
<b class="six">CSSJBR</b>
<!--조 이름-->
</div>
<div class="black">
<!--구분선-->
</div>
<div>
<div>
<nav class="menu">
<!--사이드 네비게이터-->
<ul>
<li><img class="home" src="home.png"><a href="#" title="팀 소개"> 팀 소개</a></li>
<li><img class="labtop" src="labtop.png"><a href="#" title="멤버 소개"> 멤버 소개</a></li>
<li><img class="book" src="book.png"><a href="#" title="방명록"> 방명록</a></li>
<li><img class="ping" src="ping.png"><a href="#" title="멤버들이 추천하는 맛집"> 멤버들이 추천하는 맛집</a></li>
</ul>
</nav>
</div>
<div class="favorite-restaurant"><!--정보 들어갈 공간-->
<div class="fav-res-subtitle"><!--네비게이터 항목-->
<p>멤버들이 추천하는 맛집</p>
</div>
<div class="fav-res"><!--박스 1-->
<div class="fav-res-box">
<p>맛집 1</p>
</div>
</div>
<div class="fav-res"><!--박스 2-->
<div class="fav-res-box">
<p>맛집 2</p>
</div>
</div>
<div class="fav-res"><!--박스 3-->
<div class="fav-res-box">
<p>맛집 3</p>
</div>
</div>
<div class="fav-res"><!--박스 4-->
<div class="fav-res-box" data-content="<p>김지웅의 OO동 맛집!</p><p>OO동 수제버거</p><img src='https://cdn.ypsori.com/news/photo/201901/14732_14780_325.jpg'><br><a href = 'https://example.com' target = '_black' > 식당 지도 링크</a><p>⭐⭐⭐ 맛있다</p>">
<p>김지웅</p>
<p>OO동 XX집</p>
</div>
</div>
<div class="fav-res"><!--박스 5-->
<div class="fav-res-box">
<p>맛집 5</p>
</div>
</div>
<div class="fav-res"><!--박스 6-->
<div class="fav-res-box">
<p>맛집 6</p>
</div>
</div>
</div>
<div id="modal">
<div id="modal-close">
×
</div>
<div id="modal-content">
</div>
</div>
</div>
</body>
</html>
.favorite-restaurant {
width: 1280px;
margin-left: 450px;
margin-right: 50px;
display: grid;
}
.fav-res-subtitle {
grid-column: span 3;
border: 3px solid #ff3d00;
border-radius: 40px;
margin: 0 auto;
width: 500px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 15px;
}
팀명과 네비게이션 메뉴를 제외한 컨텐츠 구역인 favorite-restaurant에 grid를 넣고, fav-res-subtitle이라고 지은 제목에 grid-colum: span 3;을 넣어서, 제목 클래스가 3개의 열을 차지하도록 설정했다.
이 속성을 사용함으로써, 자연스럽게 다른 행들도 3개씩 한줄로 배치되었다.
문제점
그런데 창을 줄이면 위 사진과 같이 모달이 전부 보이지 않고 스크롤을 내려도 계속해서 따라와, 모달창을 전부 볼 수 없다.
#modal {
display: none;
background-color: yellowgreen;
width: 600px;
height: 500px;
overflow-y: auto;
margin: auto;
padding: 0 15px 0 15px;
position: fixed;
transform: translate(125%, -98%);
border-radius: 50px;
}
아직 확신을 하진 못하지만 transform: translate(125%, -98%); 이 설정때문일지도 모르겠다.
내일 이 문제를 해결하고 다른 팀원들꺼 병합해서 네비게이션 클릭시 컨텐츠만 바뀌는 걸 알아봐야겠다.
+ 오늘 못들은 깃허브 강의
오늘 배운것
모달창
<script>
document.addEventListener("DOMContentLoaded",() => {
const modal = document.getElementById("modal");
const modalContent = document.getElementById('modal-content')
function modalOn(content) {
modalContent.innerHTML = content;
modal.style.display = "flex";
} // 모달 켜는 함수
function modalOff() {
modal.style.display = "none";
} // 모달 종료 함수
const clickModal = document.querySelectorAll(".fav-res-box"); // fav-res-box 클래스를 가진 모든 요소 선택
clickModal.forEach(clic =>{
clic.addEventListener("click", () => {
const content = clic.getAttribute("data-content");
modalOn(content);
}) // 클릭 시 data불러오고 모달 켜는 함수 실행되도록
}) // 여러개의 요소가 있기때문에 forEach로 반복
const closeModal = document.getElementById("modal-close");
closeModal.addEventListener("click", modalOff); // 클릭 시 모달 종료 함수 실행
})
</script>
물론 어제 작성한거지만 오늘도 잘 이해 안되는것 몇번 더 봤다.
마우스 올리면 밑줄 생기게 하기
#modal a {
color:aquamarine;
}
#modal a:hover {
text-decoration: underline;
}
grid 배열과 한줄에 있을 요소 개수 정하기
.favorite-restaurant {
width: 1280px;
margin-left: 450px;
margin-right: 50px;
display: grid;
}
.fav-res-subtitle {
grid-column: span 3;
border: 3px solid #ff3d00;
border-radius: 40px;
margin: 0 auto;
width: 500px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 15px;
}
컨텐츠 전체에 grid를 적용하고 제목이 3개의 영역을 먹도록 해서, 1줄에 3개씩 배치되도록.
grid-column을 요소 박스에 직접 넣어도 가능할 듯.
요소 겹치기
#modal {
display: none;
background-color: yellowgreen;
width: 600px;
height: 500px;
overflow-y: auto;
margin: auto;
padding: 0 15px 0 15px;
position: fixed;
transform: translate(125%, -98%);
border-radius: 50px;
} /* 모달창 */
position: fixed를 통해 요소를 겹쳐서 놓을 수 있었다.