Ju

filter 전체 속성 (이미지에 그래픽 효과 적용) filter : none; (효과 없음) filter : blur(); (블러 효과) filter : brightness(); (밝고 어두움 정도) filter : contrast(); (대비) filter : drop-shadow(); (그림자) filter : grayscale(); (그레이스케일) filter : hue-rotate( deg); (색조) filter : invert(); (반전) filter : opacity(); (투명도) filter : saturate(); (채도) filter : sepia(); (세피아 효과) filter : url(); (이미지 경로) · 다중 효과 가능 (filter: grayscale(0.5) blu..

언어 설정 디바이스에서 사이트가 잘 보이도록 뷰포트 설정 검색 키워드 설정(키워드 여러개 가능) 검색 시 나오는 제목 밑 설명 문서의 저자 정의 n초 뒤 다른 페이지로 리다이렉트 링크 공유 시 뜨는 썸네일과 텍스트 박스 커스텀 // 링크 클릭시 이동되는 실제 주소

Flex Container(부모 요소) flex container 지정 display: flex; => 기본 가로방향 배치. 자신이 가진 내용의 width 만큼 차지. height는 컨테이너의 높이만큼 display: inline-flex; => block과 inline-block의 관계와 동일. inline-block처럼 동작(컨테이너가 요소만큼만 차지) flex-direction - flex container의 자식 요소 방향 설정 flex-direction: row; => 가로방향(기본값) flex-direction: column; => 세로방향 flex-direction: row-reverse; => 역순으로 가로방향 flex-direction: column-reverse; => 역순으로 세로방향..

변수 - 중괄호 안에서 선언 되었으면 내부에서만 사용 가능 - 중괄호 안에서 선언 되었어도 전역변수로 설정 시 !global 속성 추가 // 변수 선언 $변수이름: blue; // 사용 시 .text { color: $변수이름; } .box1 { $color: #111 !global; // 내부에서 선언 했지만 전역변수 background: $color; } .box2 { background: $color; // 전역변수기에 에러 안남 } 부모 선택자 (&) // & 사용하여 부모 선택 .fs { &-small { font-size: 12px; } &-medium { font-size: 14px; } &-large { font-size: 16px; } } // 컴파일 시 .fs-small { font-s..

class로 작성 시 // WordRelay.jsx const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word: '리엑트', // 끝말잇기 첫 단어 value: '', // 사용자 입력 값 result: '', // 정답/오답 텍스트 } onSubmitForm = (e) => { e.preventDefault(); // submit 기본 이벤트 방지 if( this.state.word[this.state.word.length -1] === this.state.value[0] ) { // word의 마지막 글자와 value의 첫글자가 같다면 this.setState(..

webpack과 babel 사용 webpack 사용하기 - 사용할 폴더에 접근 (cd ./폴더이름) - npm init (package.json 생성) - npm i react react-dom (react 설치. i = install) - npm i -D webpack webpack-cli (-D = 개발에서만 사용) - 폴더에 webpack.config.js 파일 생성 (중요한 메인 옵션은 entry, module, output) // webpack.config.js const path = require('path'); const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = { name:..

v-bind: => html의 속성에 vue에 선언된 값을 사용하고 싶을때 (v-bind: 또는 앞에 : 만 붙여주어 사용) v-once => html코드로 출력이 된 이후에 어떤 후처리가 있더라도 처음에 출력한 값을 유지 v-html="" => html태그를 data에 작성하여 태그 삽입할때 (v-html="태그들어있는데이터") v-model="" => input의 value v-model.lazy.trim="label" html 요소에 함수 쓰기 (앞에 v-가 붙으면 뷰가 통제해 data, methods에 접근하여 사용가능. 따옴표 안에는 스크립트 코드) v-on:click="함수이름 또는 함수코드" v-on:click="" === @click=" v-for="" => html요소 반복해서 여러개 사..

typescript 설치 npm install -g typescript tsconfig.json 생성 (아래와 같이 설정) { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "checkJs": true, // 일반 js 파일에서도 에러체크 여부 "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'pres..