★ main.css에 있는 style태그들은 가시성 때문에 사용함을 미리 작성합니다.
반응형 레이아웃(웹사이트)를 만들 때 사용하는 문법이다.
@media 타입 and (기능)
@media (기능)
@media (기능) and (기능)
타입은 여러가지가 있으며 기본 값 : all , 적지 않아도 된다.
이외 여러가지 값 : screen, print, tv ...
+) 추가 개념
@charset "" : 인코딩
@import url('') : import를 사용해서 url연결
@keyframes : 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법
1, 2, 3번을 하나씩 주석해 보면서 실행해 보자.
<!--index.html-->
<div class="group">
<div class="box"></div>
</div>
.box {
width: 100px;
height: 100px;
background-color: orange;
}
/* 1. 600 이하이거나 800 이상일 때 적용, or을 하려면 not을 사용해야한다 */
@media not all and (max-width: 600px) and (min-width: 800px) {
/* 2. 세로너비가 더 길 때 */
/* @media (orientation: portrait) { */
/* 3. 가로 너비가 더 길 때 */
/* @media (orientation: landscape) { */
.box {
width: 300px;
background-color: royalblue;
}
}
변수를 선언하고 그 변수를 var로 호출해야 한다.
<!--index.html-->
<div class="group1">
<div class="box"></div>
</div>
<div class="group2">
<div class="box"></div>
</div>
/* +) 추가 내용 => html === :root(가상클래스선택자) */
/* :root { */
.group1 {
/* 1. 일반적인 호출
group1 영역에서만 선언된 변수 이므로 아래처럼 사용을 해도 group1의 box에서만 적용 됨 */
--primary: orange;
/* 2. 스코프에 따라 색이 적용되는 예시 */
--danger: green;
}
.box {
width: 100px;
height: 200px;
/* 1. 일반적인 호출 */
/* background-color: var(--primary); */
/* 2. 스코프에 따라 색이 적용되는 예시 */
background-color: var(--danger, red);
margin: 20px;
border: 4px solid;
}
index.html에서 link 태그로 css 파일을 연결할 때 아래와 같이 태그 안에 media를 선언하여 적용할 수 있다.
<!--index.html-->
<link rel="stylesheet" href="./main-sm.css" media="(max-width: 600px)">
<!--body-->
<div class="group">
<div class="box"></div>
</div>
.box {
width: 300px;
height: 300px;
background-color: royalblue;
}
Node.js는 Chrom V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경).
node.js.org 페이지에 가서 설치보다는 node version manager를 이용하여 다운받고 버전을 관리하는 것을 권장한다.
https://github.com/coreybutler/nvm-windows에 들어가서
Downloads Now를 클릭하여 Release 페이지로 이동한다.
아래로 내려가서 nvm-setup.zip을 다운받고 압축을 풀어 설치를 하면되는데 ★이때 관리자권한으로 설치한다.
설치를 하고 vscode를 실행하여 터미널을 열어 $nvm --version
을 입력하면 현재 버전을 확인할 수 있다.
이후 nvm을 사용하여 원하는 버전을 설치하고 관리하면 된다.
$nvm ls
: nvm을 통해서 설치된 node.js의 목록
$nvm install 14.16.0
: 14.16.0 버전의 node.js를 설치한다.
$nvm uninstall 14.16.0
: 14.16.0 버전의 node.js를 제거한다.
$nvm use 14.16.0
: 14.16.0 버전의 node.js를 사용한다.
$node --version
: 현재 사용하고 있는 node.js의 버전
NPM(Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리.
$npm init -y
: package.json 파일을 생성한다.
이렇게 생성할 파일로 패키지관리를 직접한다.
$npm install parcel-bundler -D
: node_modules폴더와 package-lock.json을 설치한다. package-lock.json은 자동관리된다.
$npm install lodash
: lodash설치
이렇게 설치를 한 뒤 node_modules파일을 제거를 해도 한번 설치를 한 pakage는 내역이 남게 되고 $npm install
를 입력하면 이 내역들을 확인하고 다시 깔리게 된다.
$npm install -D XXX
$npm install XXX
index.html과 main.js를 만들고 난 뒤 package.json의 scripts부분을 아래와 같이 수정해 준다.
"scipts": {
"dev" : "parcel index.html"
},
이후 터미널을 열어 $npm run dev
를 입력하면 Server running at http://localhost:1234가 나오는데 이를 눌러보면 우리의 프로젝트가 열리게 된다.
main.js에서 다음 코드를 추가해 준다.
import _ from 'lodash';
이는 lodash를 가지고 오는 내용을 작성했으면
node_modules -> lodash -> package.json에 명시가 되어져있는 main옵션에
lodash.js를 실제로 가지고 와서 우리의 main.js에서 활용이 된다라는 것을 의미한다.
import _ from 'lodash';
console.log("hello world");
console.log(_.camelCase("hello world"));
"scipts": {
"dev" : "parcel index.html"
"build": "parcel build index.html"
},
build를 추가함으로서 사용자들이 보는 용도의 결과물이 출력된다.
이후 $npm run build
으로 실행시키게 되면 dist라는 폴더가 생성되고, 확인해보면 여러 js파일들이 만들어진 것을 확인할 수 있다.
index.html을 열어보면 코드가 붙어있는 형태로 바뀌어 있다.(난독화)
즉, dist폴더 안에 있는 내용들은 개발자가 보는 용도가 아니므로 용량감소를 위해 압축버전으로 만들어준 것이고 이 역할을 parcel-bundler이라는 패키지가 해준다.
번들(Bundle) : 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업이다.
★ git에 위의 내용들을 push할 때, 파일과 용량이 많아 업로드하는데 시간이 오래 걸리므로
.gitignore에 node_modules/, dist/, .cache/ 를 추가하고 push를 하자.
package.json과 package-lock.json에 버전이 명시가 되어있어 언제든지 npm i
또는 npm install
로 node_modules를 깔 수 있다.
유의적 버전(Semantic Versioning, SemVer) : ^ Major . Minor . Patch
ex) ^12.14.1