Web/HTML CSS JS 5

[SCSS] 기초 정리 / Sass

Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s sass-lang.com SCSS를 배우는 것은 Sass와 동일 컴파일 > Sass문법을 CSS로 변환해줌 parcel-bundler패키지를 통해 scss파일을 css파일로 변환해서 동작시킴 - SCSS > CSS 변환해..

Web/HTML CSS JS 2022.10.11

[JS] 정규표현식 RegExp / 정규식

🟡 정규표현식 RegExp = 정규식 - 정규표현식 테스트 사이트 RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com -역할 문자 검색 search 문자 대체 replace 문자 추출 extract 🔵 정규식 생성 - 생성자 함수 방식 new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') - 리터럴(Literal) 방식 생성자 함수 방식보다 편함 /표현/옵션 /[a-z]/gi 🔵 메소드 메소드 문법 설명 test 정규식.test(문자열) 일치 여부(Boolean) 반환 match 문자열...

Web/HTML CSS JS 2022.10.04

[JS] local storage / Query String

Window.localStorage - Web API | MDN localStorage** **읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데 developer.mozilla.org 🟡 localStorage vs sessionStorage - localStorage 도메인에 종속됨 반영구적 - 따로 지우지 않는 이상 데이터는 만료되지 않음 - sessionStorage 페이지를 닫을 때 데이터 사라짐 🔵 localStorage - key, value 형태로 데이터 저장하기 localStorage.setItem('key..

Web/HTML CSS JS 2022.10.04

[JS] 기초 정리 / IIFE / 호이스팅 / 타이머 함수 / 전개 연산자

var : 함수 레벨의 유효범위 let, const : 블록 레벨의 유효범위 가짐 Truthy : true, {}, [], 2, 'false', '2' Falsy : false, '', null, undefined, 0, -0. NaN - 즉시실행함수 IIFE (Immediately-Invoked Function Expression) // IIFE 방법 1 (function () { console.log(a + 2) }) (); // IIFE 방법 2 (function () { console.log(a + 2) } ()); - 호이스팅 (Hoisting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 const x = 5 plus() function plus() { console.log(x + 3)..

Web/HTML CSS JS 2022.09.29

[HTML / CSS] 기초 정리

크로스 브라우징 : 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법 크로스 브라우징 이슈가 예전보다 조금씩 사라지고 있음 뷰포트 Viewport : 하나의 웹 페이지가 렌더링되는 구역 🔵 웹 이미지 비트맵 : 확대/축소 시 계단 현상, 정교하고 다양산 색상 표현가능 (jpg, png) 벡터 : 확대/축소에서 품질저하X, 용량 변화X, 정교한 이미지 표현하기 어려움 (svg) Material Design JPG : 압축률이 좋음, 손실 압축(용량 쉽게 조절 가능) PNG : 비손실 압축, Alpha Channel 지원(투명한 부분 사용가능) GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보들 저장, 8비트(256) 색상만 지원 WEBP : 구글이 개발한 이미지 포맷, 손실..

Web/HTML CSS JS 2022.09.29
728x90