오늘부터 항해16기에 본과정에 들어가기 전 필수코스를 진행했습니다.
이전까지 들었던 웹개발 종합반 복습을 포함해 CSS 강의와 SQL 강의 중
하나를 선택해 8/3 ~ 8/7 까지 오후 3시부터 오후 9시까지 진행된 예정인데요.
저는 프론트엔드 개발자를 준비하고 있기에 CSS 강의를 선택했습니다.
때문에 이번 'CSS 기초강의' 카테고리에선
5일 동안 배울 내용과 수업을 들으면서 어려웠던 점에 대한 내용을 기술할 예정입니다.
click 메서드를 이용한 모달창 구현하기
clcik 메서드란
클릭 시에 특정 이벤트가 발생하기 위해서는 click() 함수를 사용합니다.
사용방법으로는 클릭하고 싶은 요소를 선택자(class, id 등)로 작성하고, 다음과 같이 선택한 요소에 .click(function(){특정 이벤트}) 를 붙여주면 됩니다.
$("클릭할 요소").click(function(){특정 이벤트})
띵동코딩\모멘텀\momentum_third.html
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<title>모멘텀앱 - 따라만들기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
body,
h1,
h2,
h3,
p,
div,
a {
margin: 0px;
padding: 0px;
text-decoration: none;
font-weight: normal;
background-size: cover;
color: white;
}
/* 현재 날씨 */
.currentWeather {
margin-left: auto;
font-size: 28px;
width: 120px;
height: 50px;
}
/* main 섹션 */
.main {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 75vh;
}
/* 현재시간 */
.currentTime {
font-size: 160px;
font-weight: 600;
}
/* 인사 */
.greeting {
font-size: 60px;
}
/* 실시간 조언 */
.footer {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 58px;
width: auto;
}
/* 오늘 중요 일정 */
.todayFocus {
margin-top: 30px;
font-size: 20px;
}
.focusTitle {
font-size: 30px;
font-weight: bold;
}
.focusTitle > li > input {
width: 25px;
height: 25px;
display: none;
}
.focusTitle > li > i {
display: none;
}
.focusTitle > li:hover > input {
display: block;
}
.focusTitle > li:hover > i {
display: block;
}
.focusTitle > li {
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.focusTitle > li > span {
margin: 0px 10px;
}
/* 모달 창 띄울 아이콘 */
.todoIcon {
font-size: 40px;
position: absolute;
right: 180px;
bottom: 40px;
cursor: pointer;
}
/* 모달 창 */
.modal-box {
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
width: 300px;
padding: 20px;
border: none;
border-radius: 10px;
position: absolute;
margin: auto;
margin-top: 180px;
background: rgba(255, 255, 255, 0.8);
}
.modal-box > input {
width: 280px;
height: 50px;
border-radius: 10px;
border: none;
text-align: center;
margin-bottom: 10px;
}
.modal-box > button {
width: 280px;
height: 50px;
border-radius: 10px;
border: none;
}
</style>
<script>
$(document).ready(function () {
renderGalleryItem();
renderCurrentWeather();
renderCurrentTime();
renderAdvice();
$('#todoIcon').click(function () {
$('#modal-box').fadeIn().css('display', 'flex');
$('#todoIcon').hide();
});
$('#main').click(function () {
$('#modal-box').fadeOut();
$('#todoIcon').show();
});
});
//배경 사진 함수
function renderGalleryItem() {
let url = 'https://api.thecatapi.com/v1/images/search';
fetch(url)
.then((res) => res.json())
.then((data) => {
let imgurl = data[0]['url'];
$('#background').css('background-image', `url('${imgurl}')`);
});
}
//배경 사진 함수
function renderGalleryItem() {
let url = 'https://api.thecatapi.com/v1/images/search';
fetch(url)
.then((res) => res.json())
.then((data) => {
let imgurl = data[0]['url'];
$('#background').css('background-image', `url('${imgurl}')`);
});
}
//현재 날씨
function renderCurrentWeather() {
let url = `https://goweather.herokuapp.com/weather/{seoul}`;
fetch(url)
.then((res) => res.json())
.then((data) => {
let temperature = data['temperature'];
temp_html = `${temperature}`;
$('#currentWeather').append(temp_html);
});
}
//현재 시간
function renderCurrentTime() {
let url = `http://worldtimeapi.org/api/timezone/Asia/Seoul`;
fetch(url)
.then((res) => res.json())
.then((data) => {
let time = data['datetime'].substr(11, 5);
let temp_html = `${time}`;
$('#currentTime').append(temp_html);
});
}
//실시간 조언
function renderAdvice() {
let url = `https://api.adviceslip.com/advice`;
fetch(url)
.then((res) => res.json())
.then((data) => {
let advice = data['slip']['advice'];
let temp_html = `${advice}`;
$('#advice').append(temp_html);
});
}
</script>
</head>
<body id="background">
<!-- 날씨 -->
<div id="currentWeather" class="currentWeather"></div>
<div class="main" id="main">
<!-- 시간 -->
<div id="currentTime" class="currentTime"></div>
<!-- 인사 -->
<div class="greeting">Hello, Jessy.</div>
<div id="modal-box" class="modal-box">
<input type="text" />
<button>Add to the list</button>
</div>
<!-- 오늘 중요 일정 -->
<div class="todayFocus">Today</div>
<div class="focusTitle">
<li>
<input type="checkbox" />
<span>Publish Blog Post</span>
<i class="bi bi-trash3"></i>
</li>
</div>
</div>
<!-- 실시간 조언 -->
<div id="advice" class="footer"></div>
<div id="todoIcon" class="todoIcon">
<i class="bi bi-plus-circle"></i>
</div>
</body>
</html>
'항해 16기 > CSS 사전강의' 카테고리의 다른 글
| [Lev.2] Netflix 클론코딩 (0) | 2023.08.04 |
|---|---|
| [Lev.1-5] 부트스트랩 활용하기 (0) | 2023.08.03 |
| [Lev.1-4] 부트스트랩 (0) | 2023.08.03 |
| [Lev.1-3] HTML, CSS 복습하기 (0) | 2023.08.03 |
| [LEV.1-2] CSS 활용하기 (0) | 2023.08.03 |
