1. [M플릭스] 프로젝트
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>M플릭스</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.main {
color: white;
background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
background-position: center;
background-size: cover;
}
body {
background-color: black;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
padding: 20px;
border-radius: 5px;
}
.form-floating > input {
background-color: transparent;
color: white;
}
.form-floating > label {
color: white;
}
.input-group > label {
background-color: transparent;
color: white;
}
.mypostingbox > button {
width: 100%;
}
</style>
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-danger">Mflix</a></li>
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">킹덤</h1>
<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.</p>
<button type="button" class="btn btn-outline-light">영화 기록하기</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<option selected>별점선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger">기록하기</button>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2. Javascript에 대해
Javascript
: 웹페이지에 움직임을 줄 때 사용. 서버를 만드는데도 쓰임
Javascript 범용성
자바스크립트 하나로 프론트엔드, 백엔드 모두 가능하다. 뿐만 아니라 IOS와 안드로이드 앱, 게임 개발 엔진이나 IoT 애플리케이션 개발까지도 가능하다.
개발자 도구
브라우저 화면에서 우클릭 후 검사를 누르게 되면 개발자 도구 화면을 볼 수 있다.
console.log()를 통해 console 탭에서 제대로 된 값이 출력되는지 확인이 가능하다.
3. 변수와 기본연산
변수
변수는 값을 담는 상자로, 자바 스크립트에서는 변수를 let으로 선언한다.
기본연산
사칙연산, 문자열 더하기가 기본적으로 가능하다.
let age = 20
let name = 'bob'
console.log(age + name) // 20bob
console.log(age, name) // 20 bob
let a = 2
let b = 3
console.log(a + b) // 5
4. 리스트와 딕셔너리
리스트
: 순서를 가지고 있는 배열
let a_list = []
let fruits = ['사과','수박','딸기','감']
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이
console.log(a.length) // 4
딕셔너리
: key-value 형태의 값을 저장할 수 있는 자료구조
let a_dict = {}
let person = {'name':'영수','age':27}
console.log(person)
console.log(person['name']) // 영수
console.log(person['age']) // 27
리스트와 딕셔너리의 조합
let persons = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(persons[0]['name']) // 영수
console.log(persons[1]['age']) // 15보기에도 깔끔하고 추가되는 것이 있더라도 .push 함수를 이용해 쉽게 추가가 가능하다.
5. 조건문과 반복문
조건문
: 조건에 맞춰 다르게 수행하도록 제어하는 명령문
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
반복문
: 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
조건문과 반복문
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
6. JQuery
JQuery
: HTML의 요소들을 조작하는 Javascript를 미리 더 쉽게 작성해 둔 라이브러리
순수 Javascript만 사용하면 코드가 길고 복잡할 뿐만 아니라 브라우저 간 호환성 문제도 고려해야 하기 때문에 사용한다.
그리고 미리 짜둔 코드를 가져와 사용하는 것이기 때문에 사용 전 아래와 같이 import를 필수적으로 해줘야 한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
class와 비슷하게 태그에 id로 이름표를 붙여줘야 한다.
$(‘#title’).text(‘쥬라기월드’)→ id가 title인 태그의 text를 쥬라기월드로 변경하겠다는 의미
$(‘#q1’).empty()→ id가 q1인 태그의 내용을 지우겠다는 의미
let temp_html = `<p>감자</p>`→ 태그 자체로 변수 선언 (백틱(`)을 사용해줘야 함)
$(‘#q1’).append(temp_html)→ id가 q1인 태그에 temp_html을 추가하겠다는 의미
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
.button-part {
display: flex;
height: 50px;
}
</style>
<script>
function checkResult(){
let a = ['사과','배','감','귤']
$('#q1').text(a[1])
let b = {'name':'영수','age':30}
$('#q2').text(b['name'])
let c = [
{'name':'영수','age':30},
{'name':'철수','age':35}
]
$('#q3').text(c[1]['age'])
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr/>
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1">테스트</div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2">테스트</div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3">테스트</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let people = [
{ 'name': '서영', 'height': 165 },
{ 'name': '현아', 'height': 170 },
{ 'name': '영환', 'height': 175 },
{ 'name': '서연', 'height': 162 },
{ 'name': '지용', 'height': 190 },
{ 'name': '예지', 'height': 168 }
]
$('#q2').empty();
people.forEach(a => {
let name = a['name'];
let height = a['height'];
let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`;
$('#q2').append(temp_html);
});
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>
'내일배움캠프(Sparta) > 웹개발 A to Z' 카테고리의 다른 글
| [웹개발 A to Z] 5주차 (배포, 깃허브) (0) | 2023.09.08 |
|---|---|
| [웹개발 A to Z] 4주차 (Firebase, Firestore) (0) | 2023.09.08 |
| [웹개발 A to Z] 3주차 (Fetch) (0) | 2023.09.08 |
| [웹개발 A to Z] 1주차 (HTML, CSS) (0) | 2023.09.07 |
