학습 목표
- Javascript의 사용 방식에 대해 이해하고, 문법에 익숙해진다.
- JQuery를 활용하여 HTML을 조작할 수 있다.
오늘의 목표는 익숙해지기
시작은 저번에 배운것을 복습하는 것 부터
주요 복습 내용은
- Bootstrap 활용
- Google-font 활용
- <style> 에서 본문내용의 위치와 크기, 모양을 조정
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타플릭스</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=Dokdo&family=Dongle&family=Jua&display=swap');
* {
font-family: 'Jua', 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 {
background-color: transparent;
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.mypostingbox>button {
width: 100%;
}
</style>
<script>
function hey() {
alert('안녕하세요') ;
}
</script>
</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">spartatlix</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">Custom jumbotron</h1>
<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.</p>
<button onclick="hey()" type="button" class="btn btn-outline-light">영화 기록하기</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
</div>
<div class="mypostingbox">
<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="inputGroupSelect01">
<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">
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">
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">
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">
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>
복습 강의를 바탕으로 만든 스크립트
복잡하고 길어 보이지만, bootstrap 에서 코드 뭉치를 복붙 하는것이 90% 이고
나머지는 원하는 내용으로 수정하면 된다.
중요한 것은 내가 원하는 것을 bootstrap 에서 찾아 오는것과
어느 부분에 붙여 넣어야 하는지만 잘 기억하면 된다.
다음 내용으로 Javascript 에 대해
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
더보기
브라우저가 JavaScript를 주로 사용하는 이유는 역사적으로 JavaScript가 웹 브라우저에서 실행되는 스크립트 언어로 사용되어 왔기 때문입니다. 웹 페이지의 동적인 기능을 구현하기 위해 JavaScript가 개발되었으며, 많은 웹 개발자들이 JavaScript를 사용하여 웹 애플리케이션을 구축하고 유지 관리해왔습니다. 결국, Javascript가 브라우저한테 명령을 내리는 ‘표준’이라고 생각하시면 됩니다 !
자바스크립트를 통해서 서버도 만들 수 있습니다! 즉, 자바스크립트 하나로 프론트엔드, 백엔드를 다 가능하다는 거죠. 또한 IOS와 안드로이드 앱은 물론 게임 개발 엔진이나 IoT(사물 인터넷) 애플리케이션 개발도 가능합니다. 웹 개발을 위해서는 거의 필수적이며 다양한 분야에서 널리 사용되고 있는 자바스크립트 본격적으로 배우러 가시죠 !
라고 소개가 되어있는데,
이전에 7일차에 미리 배웠던 Javascript 톺아보기 와 거의 동일한 설명이었다.
당장은 html과 css로 만들어 놓은 내용에 '작동, 움직임' 을 더해주는 언어 라고 이해를 하면 될 듯 하다.
가장 처음 배운 것은 펑션과 콘솔
<script>
function hey() { console.log('안녕하세요') }
</script>
그리고 웹 페이지에는 이러한 script 구문이 연산되는 console 부분이 존재하고
이 부분은 개발자가 확인하기 위해 있다는것을 알았다.
다음으로
let a = 2
let b = 3
console.log(a+b) // 5
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국변수의 선언과 console.log 로 확인하는 내용이다. 기본적인 사칙연산과 문자열 더하기 또한 가능
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = ['사과','수박','딸기','감'] // 로 선언 가능
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이 구하기
console.log(a.length) //4리스트는 순서를 갖는다는게 중요하다 ! (0 부터 시작)
- 딕셔너리: 키(Key)-밸류(Value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = {'name':'영수','age':27} // 로 선언 가능
console.log(a)
console.log(a['name']) // 영수
console.log(a_dict['age']) // 27
활용 부분은 내용이 약간 복잡해 보이기 때문에 다음 시간에 학습 하도록 해야겠다 !
복습 부분에서 시간을 너무 쓰기도 했고 ,
오늘 사전캠프 면담도 진행하느라 시간이 부족했다.
'사전캠프' 카테고리의 다른 글
| 11일차 - 알고리즘 풀이 (1) | 2024.07.03 |
|---|---|
| 10일차 - [왕초보] 웹개발 종합반 (1) | 2024.07.02 |
| 8일차 - 액셀보다 쉽고 빠른 SQL (0) | 2024.06.28 |
| 7일차 - Javascript 톺아보기 (0) | 2024.06.27 |
| 6일차 - [왕초보] 웹개발 종합반 (0) | 2024.06.26 |