웹개발 종합반 2주차 정리
js는 웹페이지에 움직임을 더해주는 것
스파르타플릭스
부트 스트랩을 이용해서 홈페이지를 제작했다.
부트스트랩은 우리가 css를 link href을 이용해서 연결시키고 사용하는 것처럼 마찬가지로 link href를 통해 부트스트랩과 html페이지를 연결한 뒤, 클래스를 호출하여 홈페이지를 보다 더 간단하게 꾸미는 것이다.
ui, li, form, input
\<div class="row row-cols-1 row-cols-md-4 g-4">
열을 3개에서 4개로 바꾸고 싶으면 cols-md-3 g-4를 위처럼 바꾸면 된다.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
이 코드를 보면 label과 input이 있는데, 두 항목에 css를 넣지 않으면 이러한 결과가 나온다. 허나 내가 해야 하는 것은 아래 흰색 상자들의 배경을 투명하게 하고 폰트를 그에 맞게 해야 한다.
.form-floating input{
background-color: transparent;
color: #ffffff;
}
.form-floating label{
color: #ffffff;
}
이렇게 css를 넣으면 된다. 왜 label에도 color을 넣는지 처음에 의문이었는데, 만약 label에 color을 넣지 않으면 영화 이미지 주소라는 텍스트(입력 전)가 검은색으로 변하며 색이 보이지 않는 것이었다. 즉 label은 input에 placeholder 같은 느낌이었던 것. 그렇다면 왜 input에도 color를 넣는가? 답은 label과 비슷하다. input은 텍스트를 적은 이후 보여지는 텍스트의 색을 바꿔준 것이기 때문에 둘 다 설정해야 하는 것이었다.
결과물
<!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>
@font-face {
font-family: 'LeeSeoyun';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'LeeSeoyun';
}
body {
background-color: #000000;
}
.main {
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;
color: #ffffff;
}
.mycard {
width: 1200px;
margin: 30px auto 0 auto;
}
.mypostingbox {
width: 500px;
margin: 30px auto 30px auto;
border: 1px solid white;
padding: 20px;
border-radius: 10px;
}
.form-floating input {
background-color: transparent;
color: #ffffff;
}
.form-floating label {
color: #ffffff;
}
.input-group label {
background-color: transparent;
color: #ffffff;
}
.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">Spartaflix</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">
<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="mycard">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/cnoC/image/HwCM8Xt9_EeGworRFtdly9PqucA"
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://pbs.twimg.com/ext_tw_video_thumb/1565935609906364416/pu/img/HuNme7ONsAaHti1R.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://i.namu.wiki/i/I4GHVecCEwMNGXCyrcznDx9K5Zs-2WS2iTJuqtJKKSjzgldP3ueB65OtkkbvP-TcS18Xq2f3aghSEzjTLD43uA.gif"
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://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/cnoC/image/8S9rCPwFJBsx5WRO-j4tU8dQpMQ"
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>JS에 대해
Q1. 왜 브라우저를 움직이게 하기 위해 js를 사용해야 할까?
역사적으로 js가 웹브라우저에서 실행되는 스크립트 언어로 사용되어 오면서 표준이 됐고, 이에 따라 브라우저나 렌더링 시스템들이 js에 맞춰서 개발됐기 때문이다.
Q2. js와 java의 차이는 뭘까?
java와 js의 차이는 인도와 인도네시아처럼 아무 관련이 없다.
본론
js를 공부할 때 꼭 기억해야 할 5가지
- 변수
- 자료형
- 함수
- 조건문
- 반복문
변수
변수는 하나의 값을 저장할 수 있는 저장공간 으로, 단위는 하나의 값을 저장할 수 있는 공간이지만 안에 들어있는 값은 언제든지 사용자가 바꿀 수 있기에 변수라는 이름이 붙여졌다.
변수는 편리성을 가진 문법이다. 에이+에이=에이에이 일 때 귀찮게 에이라고 반복해서 적는 대신 에이=a라고 선언함으로써 에이라는 단어를 변수인 a로 간편하게 넣을 수 있다. 또한 만일 나중에 에이 -> 에프 라고 적을 때 에이+에이를 에프+에프라고 일일히 수정하는 대신 에이=a를 에프=a라고 선언함으로써 간편하게 수정이 가능한 것이다.
변수의 이름은 나중에 나 또는 타인이 알아보기 쉽게 직관적으로 지어야 한다.
변수를 선언문은 총 3가지로 각각 var, let, const이다.
var은 변수를 선언하면서 동시에 값을 초기화 하는 것이다.
let은 블록 스코프 지역 변수를 선언, 동시에 값을 초기화 하는 것이다.
const는 블록 스코프 읽기 전용 상수를 선언하는 것이다.
이렇게 보면 차이점이 무엇인지 잘 이해가 가지 않는데, 간단하게 나누자면, var은 중복 선언 가능, let은 중복 선언 불가능/재할당 가능, const는 중복 선언 불가능, 재할당 불가능이다.
몸이 안 좋아서 이 이후는 내일 작성하겠다.
※ JS는 대소문자를 구분하기에 나중에 변수를 지을 때 Number과 number은 다름을 인지해야한다.
변수 선언은 let
console.log(변수); 는 콘솔창에 값을 띄울 때 사용하는데, 일반적인 페이지에서는 볼 수 없다. 관리자 페이지(f12)의 console에서 확인할 수 있는데, (사용하는 이유는)
+) js는 서버를 만들 때도 사용한다.
참고문헌
https://colossus-java-practice.tistory.com/1
[Chapter 1 변수] 1. 변수란 무엇인가?
프로그래밍을 배우는데 있어서 첫 시간에 배운 내용은 변수였다. 프로그래밍에서 말하는 변수란 무엇일까? 목표 : 일반적인 의미가 아닌 프로그래밍에서 말하는 변수의 뜻을 정확하게 말할 수
colossus-java-practice.tistory.com
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types
문법과 자료형 - JavaScript | MDN
이 장은 JavaScript의 기본 문법과 변수 선언, 자료형 및 리터럴을 다룹니다.
developer.mozilla.org
https://80000coding.oopy.io/e1721710-536f-43f2-823b-663389f5fbfa
var, let, const 차이점
변수 선언 방식
80000coding.oopy.io
'캠프 > 웹개발 종합반' 카테고리의 다른 글
| 웹개발 종합반 1주차 정리 (0) | 2024.07.15 |
|---|
