qwef

$color-black : #000; $color-white : #fff; body{font-family: 'Noto Sans KR', sans-serif; background-color: $color-black;} h1{color: $color-white;} h1+img:nth-of-type(1) {background-color: rgb(248, 0, 124); width: 100px;} 그냥 $변수명 : 값 하면 됨. 쓸때도 $변수명 하면 됨.

뭐 -webkit- -moz- -ms- -o- 여러가지 브라우저에 대한 지원을 하게 자동으로 붙여주는 거다. 예를 들어 익스플로어에서 기본 display:flex; 가 안먹힐 때 display:-ms-flex; 이걸 같이 넣어두면 이 위걸 적용한다. 근데 우리가 모든 브라우저에 대해 저걸 일일히 써주기는 너무.. 힘빠진다. 이럴 때 자동으로 붙여주는 node.js 플러그인이 있다. 근데 굳이 벤터 프리픽스 붙이지 말고, https://poiemaweb.com/css3-vendor-prefix CSS3 Vendor Prefix | PoiemaWeb CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다. poiemaweb.com ..

dist가 최종적으로 빌드된 파일들이 있는 곳인데, 안들어가는게 있을 때가 있다. 그럴 때 억지로 넣거나 그러면 경로문제나 그런 게 있을 수 있다. parcel plugin static files copy 이거 이용하면 된다. { "name": "parcel_project", "version": "1.0.0", "description": "this is package of parcel-bundler", "main": "index.js", "scripts": { "serve": "parcel index.html", "build": "parcel build index.html" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "..

dist 폴더가 자동으로 생기는 데, 이게 빌드된 파일들이다. 그래서 서버에는 이걸 올려야 한다.

파비콘은 인덱스폴더가면 자동으로 로드됨. 있을 시에. 파비콘은 위에 아이콘. 웹브라우저 탭에 나타나는 아이콘 파비콘 연결하기 보통 favicon 이런 .ico 확장자는 인덱스 폴더가면 자동으로 로드되는데, 이상하게 node.js는 저걸 최종적으로 빌드되는 파일들인 dist 폴더에 안 넣어둔다. 그래서 우리가 직접 넣어줘야 하는데, 그냥 넣으면 경로문제나 그런게 있을 수 있어서, 우리가 따로 이렇게 정적으로 넣고 싶은 파일들이 있으면 지원해주는 플러그인이 있는데, https://qwefdg3.tistory.com/370

.container{ h1 { } } 이런 식으로 씀 부모자식 관계 $color-black : #000; $color-white : #fff; body{font-family: 'Noto Sans KR', sans-serif; background-color: $color-black;} .container{ h1{ color: $color-white; & + img { width:350px; } } } &는 자기 자신임. scss는 html에 연결하면 자동으로 종속성 깔리게끔 해놨나 봄.

보호되어 있는 글입니다.

node js 설치 npm 설치 nvm 설치 프로젝트 할 곳에 npm init -y -y는 yes 그러면 { "name": "parcel_project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 이렇게 생성됨. main이 index.html 같은 거임. 저기다 파일 이름 넣어주면 됨. "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, 우리가 npm 관련해서..

일종의 컴파일러.. 라고 보기에는 좀 그렇고, 일단은 기본적으로 웹브라우저는 html, css, javascript만 읽을 수 있다. 웹팩이나 번들러는 이 이외의 것을 html, css, javascript 로 바꿔주는 것이다. 또한 사용하는 js 버전끼리 다를 수 있는데, 이런 것을 해석해서 맞춰주는 역할 도 한다. parcel-bundler 구성없는 단순한 자동 번들링 소/중형 프로젝트에 적합 자동으로 설정됨. 편하긴 한데 단점도 됨. webpack 매우 꼼꼼한 구성 중/대형 프로젝트에 적합. 꼼꼼하게 사용자가 설정함. 그래서 많은 부분을 내 맘대로 할 수 있음. 둘다 종속성 관리 잘 해줘야 함.. 버전 같은거..

보호되어 있는 글입니다.