오늘부터 항해16기에 본과정에 들어가기 전 필수코스를 진행했습니다.
이전까지 들었던 웹개발 종합반 복습을 포함해 CSS 강의와 SQL 강의 중
하나를 선택해 8/3 ~ 8/7 까지 오후 3시부터 오후 9시까지 진행된 예정인데요.
저는 프론트엔드 개발자를 준비하고 있기에 CSS 강의를 선택했습니다.
때문에 이번 'CSS 기초강의' 카테고리에선
5일 동안 배울 내용과 수업을 들으면서 어려웠던 점에 대한 내용을 기술할 예정입니다.
Jquery
Jquery 란?
- 엘리먼트를 선택하는 강력한 방법과
- 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
- 자바스크립트 라이브러리입니다.
※ 라이브러리는 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들입니다.
자주 쓰는 Jquery 코드
직접 선택자
1. $("#id 이름")
- 해당 id 이름을 가진 엘리먼트를 가리킵니다.
2. $("#id 이름 > 태그(a / h1.. / div...)")
- 해당 id 의 자식 태그를 가리킵니다.
메서드
1. $("엘리먼트").val() / $("엘리먼트").val(새 값)
- 선택한 엘리먼트에 지정한 value 값을 반환 또는 변환합니다.
2. $("엘리먼트").text() / $("엘리먼트").text(새 텍스트)
- 선택한 엘리먼트에 포함하는 텍스트를 반환하거나 새 텍스트로 변환합니다.
3. $("#엘리먼트").css("속성") / $("엘리먼트").css("color","blue");
- 선택한 엘리먼트에 스타일(css) 속성값을 반환 또는 변환합니다.
4. $("엘리먼트").attr() / $("엘리먼트").attr("src","다른 url");
- 선택한 엘리먼트에 속성값을 반환 또는 변환
객체 편집 메서드
1.$("엘리먼트").append()
- 선택한 엘리먼트의 마지막 위치에 새 요소를 추가합니다.
2. $("엘리먼트").empty()
- 해당 엘리먼트의 요소의 하위 내용들을 모두 삭제합니다.
3. $("엘리먼트").remove()
- 해당 엘리먼트를 삭제합니다.
효과 메서드
1. $("#엘리먼트").hide()
- 노출되어 있는 요소를 숨깁니다.
2. $("#엘리먼트").show()
- 숨겨져 있던 요소를 노출시킵니다.
JQuery - JQuery 기본문법
직접 선택자 종류 사용법 설명 전체 선택자 $("*") 모든 요소를 선택 아이디 선택자 $("#아이디 명") id 속성에 지정한 값을 가진 요소를 선택 클래스 선택자 $(".클래스 명") 클래스 속성에 지정한 값
soft91.tistory.com
fetch
fetch 란?
fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.
XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다.
fetch 의 기본 골격
fetch(url)
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})
netflix 클론코딩
띵동코딩\자바스크립트\ netflix.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>
<title>넷플릭스 - 따라만들기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* {
font-family: 'Noto Sans KR', sans-serif;
}
body,
h1,
h2,
h3,
p,
a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
background-color: black;
}
/* gnb */
.gnb {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.gnb > a {
margin: 0px 40px;
color: white;
}
.gnb > a:hover {
color: gray;
}
.gnb > a:last-child {
margin-right: auto;
}
/* main */
.main {
color: white;
padding: 20px;
}
.main > p {
margin-top: 40px;
margin-bottom: 10px;
font-size: 20px;
}
/* today */
.today {
background-image: url('https://image.tmdb.org/t/p/w500/nHf61UzkfFno5X1ofIhugCPus2R.jpg');
background-position: center;
background-size: cover;
height: 250px;
padding: 50px;
font-size: 32px;
}
/* top */
.top > img {
margin: 2px;
}
.top > img:hover {
margin: 2px;
width: 220px;
height: 320px;
}
#today > p {
font-size: 20px;
margin-top: 20px;
}
/* recommend */
.recommend > img {
margin: 2px;
}
</style>
<script>
$(document).ready(function () {
movie();
});
function movie() {
let base_url = 'https://image.tmdb.org/t/p/w500';
let url =
'https://api.themoviedb.org/3/movie/popular?api_key=127d1ec8dfd28bfe9f6b8d15f689cdd4&language=ko-KR&page=1';
fetch(url)
.then((res) => res.json())
.then((data) => {
let movies = data['results'];
//오늘의 영화
let rand = Math.floor(Math.random() * 10);
let today_movie = movies[rand];
let today_image = base_url + today_movie['backdrop_path'];
let today_title = today_movie['title'];
let today_overview = today_movie['overview'];
$('#today').css('background-image', `url(${today_image})`);
$('#today > h1').text(today_title);
$('#today > p').text(today_overview);
// TOP 10 영화
for (let i = 0; i < 10; i++) {
let top_movie = movies[i];
let top_image = base_url + top_movie['poster_path'];
let temp_html = `<img width="200" src="${top_image}">`;
$('#top').append(temp_html);
}
// 추천 영화
for (let i = 0; i < movies.length; i++) {
let recommend_movie = movies[i];
let recommend_image = base_url + recommend_movie['poster_path'];
if (recommend_movie['vote_average'] > 7.5) {
let temp_html = `<img width="200" src="${recommend_image}">`;
$('#recommend').append(temp_html);
}
}
});
}
</script>
</head>
<body>
<!-- gnb -->
<div class="gnb">
<img
width="130"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Logonetflix.png/1200px-Logonetflix.png"
/>
<a href="#">홈</a>
<a href="#">TV프로그램</a>
<a href="#">영화</a>
<a href="#">내가 찜한 콘텐츠</a>
</div>
<!-- main -->
<div class="main">
<p>오늘의 영화</p>
<div id="today" class="today">
<h1></h1>
<p></p>
</div>
<p>오늘 한국의 Top 10 영화</p>
<div id="top" class="top"></div>
<p>오늘 한국의 추천 영화</p>
<div id="recommend" class="recommend"></div>
</div>
</body>
</html>
'항해 16기 > CSS 사전강의' 카테고리의 다른 글
| [Lev.3] To-do List (0) | 2023.08.05 |
|---|---|
| [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 |
