✅ 오늘의 문제 : 자신이 좋아하는 영화 정리하기
👉 예시
✅ 오늘의 문제 풀이 인증
<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">
<title>javascript9</title>
<link rel="stylesheet" href="./9.css">
<script src="./9.js"></script>
<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=Bebas+Neue&display=swap" rel="stylesheet">
</head>
<body>
<header>
<span class="logo">NETFLEX</span>
</header>
<h1 class="main_text">나의 추천 영화</h1>
<div class="album">
<div class="images">
<img src="./img/이프온리.jpg" onclick="movie1()">
<img src="./img/안녕헤이즐.jpg" onclick="movie2()">
<img src="./img/찰리.jpg" onclick="movie3()">
<img src="./img/리틀.jpg" onclick="movie4()">
</div>
<div class="text_box">
<h1 id="movie_name">이프 온리</h1>
<h2 id="movie_year">2004</h2>
<h3 id="movie_genre">멜로/로맨스, 코미디, 드라마, 판타지</h3>
<h4 id="movie_content">눈앞에서 사랑하는 연인을 잃은 남자는 다음 날 아침, 자신의 옆에서 자고 있는 연인을 보고 소스라치게 놀란다.
<br> 기쁨도 잠시, 정해진 운명은 바꿀 수 없단 것을 깨달은 그는 더 늦기 전에 자신의 진정한 사랑을 전하기로 마음먹는데… <br>
네가 아니었다면 난 영영 사랑을 몰랐을 거야 사랑하는 법을 알게 해줘서 고마워, 사랑받는 법도.</h4>
</div>
</div>
</body>
</html><CSS>
body{
background-color: black;
color: rgba(240, 248, 255, 0.781);
}
header .logo{
color: rgba(224, 41, 41, 0.801);
font-size: 5rem;
font-weight: normal;
font-family: 'Bebas Neue', cursive;
}
.main_text{
font-size: 20px;
}<javascript>
function movie1(){
document.getElementById('movie_name').innerHTML="이프 온리"
document.getElementById('movie_year').innerHTML="2004"
document.getElementById('movie_genre').innerHTML="멜로/로맨스, 코미디, 드라마, 판타지"
document.getElementById('movie_content').innerHTML="눈앞에서 사랑하는 연인을 잃은 남자는 다음 날 아침, 자신의 옆에서 자고 있는 연인을 보고 소스라치게 놀란다.<br> 기쁨도 잠시, 정해진 운명은 바꿀 수 없단 것을 깨달은 그는 더 늦기 전에 자신의 진정한 사랑을 전하기로 마음먹는데… <br>네가 아니었다면 난 영영 사랑을 몰랐을 거야 사랑하는 법을 알게 해줘서 고마워, 사랑받는 법도."
}
function movie2(){
document.getElementById('movie_name').innerHTML="안녕헤이즐"
document.getElementById('movie_year').innerHTML="2014"
document.getElementById('movie_genre').innerHTML="드라마, 멜로/로맨스"
document.getElementById('movie_content').innerHTML="산소통을 캐리어처럼 끌고 호흡기를 생명줄처럼 차고 있는 헤이즐. 집에만 있는 자신을 걱정하는 가족에게 등 떠밀려<br> 어쩔 수 없이 참석한 암 환자 모임에서 꽃미소가 매력적인 어거스터스를 만난다. 두 사람은 소설책을 나눠 읽으며 급속도로<br>자신을 시한폭탄이라 생각하고 사랑하는 것들 과 선을 그었던 그녀와, 거절당할까 두려워 진실을 감춰왔던 어거스터스는<br> 서로에게 속마음을 털어놓기 시작하는데... 가까워지고,예측불허 이들의 사랑은 어떻게 될까?"
}
function movie3(){
document.getElementById('movie_name').innerHTML="찰리와 초콜릿 공장"
document.getElementById('movie_year').innerHTML="2005"
document.getElementById('movie_genre').innerHTML="판타지, 모험, 코미디, 가족"
document.getElementById('movie_content').innerHTML="전 세계 누구에게나 사랑 받는 세계 최고의 초콜릿 공장인 ‘윌리 웡카 초콜릿 공장’. 매일 엄청난 양의 초콜릿을<br> 생산해 세계 각국으로 운반하고 있지만 그 누구도 공장을 드나 드는 사람을 본 적이 없는 비밀의 공간이다. 어느 날,<br> 윌리 웡카가 5개의 웡카 초콜릿에 감춰진 행운의 '황금티켓'을 찾은 어린이 다섯 명에게 자신의 공장을 공개하고 그 모든<br> 제작과정의 비밀을 보여주겠다는 선언을 한다. 이제 전 세계 어린이들은 황금티켓을 찾기 위한 노력을 시작한다."
}
function movie4(){
document.getElementById('movie_name').innerHTML="리틀 포레스트"
document.getElementById('movie_year').innerHTML="2018"
document.getElementById('movie_genre').innerHTML="드라마"
document.getElementById('movie_content').innerHTML="시험, 연애, 취업… 뭐하나 뜻대로 되지 않는 일상을 잠시 멈추고 고향으로 돌아온 혜원은 오랜 친구인 재하와 은숙을 만난다<br> 남들과는 다른, 자신만의 삶을 살기 위해 고향으로 돌아온 ‘재하’, 평범한 일상에서의 일탈을 꿈꾸는 ‘은숙’과 함께 직접 키운<br> 농작물로 한끼 한끼를 만들어 먹으며 겨울에서 봄, 그리고 여름, 가을을 보내고 다시 겨울을 맞이하게 된 혜원. 그렇게 특별한<br> 사계절을 보내며 고향으로 돌아온 진짜 이유를 깨닫게 된 혜원은 새로운 봄을 맞이하기 위한 첫 발을 내딛는데…"
}<결과화면>
✅ 오늘의 한마디
👉 부족한 부분이 많지만 더 공부해서 완성도를 높이고 싶습니다.
'웹 공부 > javascript' 카테고리의 다른 글
| 코딩 스터디(모각코) 11일차 - 한 입 웹개발(JS) (0) | 2021.07.28 |
|---|---|
| 코딩 스터디(모각코) 10일차 - 한 입 웹개발(JS) (0) | 2021.07.27 |
| 코딩 스터디(모각코) 8일차 - 한 입 웹개발(JS) (0) | 2021.07.16 |
| 코딩 스터디(모각코) 7일차 - 한 입 웹개발(JS) (0) | 2021.07.13 |
| 코딩 스터디(모각코) 6일차 - 한 입 웹개발(JS) (0) | 2021.07.12 |