flex와 grid의 차이 flex는 컨텐츠이고, grid는 컨테이너다. 즉, flex는 1차원 레이아웃 시스템(수직, 수평 중 택 1)이고 grid는 2차원 레이아웃 시스템(수직, 수평 둘 다 가능)으로 분류된다. flex는 항목을 한 방향으로 레이아웃을 할 수 있고, grid는 항목을 두 방향으로 레이아웃 할 수 있다. 복잡한 레이아웃 설계가 필요할 때 grid를 사용하면 좋다. flex Flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에서 효율적으로 요소를 배치, 정렬, 분산 할 수 있는 방법을 제공하는 css3..

여러 파일로 하나의 어플레케이션을 분리할 때, 각각의 파일들을 모듈이라고 부름 1) 모듈 내보내기 export const func = () => {}; export const a = 1; 2) 모듈 가져오기 Import fileObj from ʻ./file.jsʼ; fileObj .func(); Import { func, a } from ʻ./file.jsʼ; func(); 3) 모듈 시스템 내보내지 않은 변수는 외부로 노출되지 않아 자원 보호가 가능함 CommonJS const func = require(ʻ./file.jsʼ) ES Modules Import func from ʻ./file.jsʼ; export const bark = () => { console.log('Bow-wow'); }; imp..

프로퍼티의 key가 숫자이며 프로퍼티 간의 순서를 가지는 객체 1) 배열 생성 : [] 대괄호나 배열 생성자로 생성 const array = []; const array = new Array(length); 2) 배열 접근 array[index] -> index는 0부터 시작 const colors = ['red', 'blue', 'green', 'pink', 'mint']; console.log(typeof colors); // object -> 배열도 객체로 구현한 것이기 때문 console.log(colors[2]); // 인덱스 접근, 인덱스는 0부터 시작 //green console.log(colors.length); // 자체적으로 length라는 프로퍼티가 있음 //5 3) 배열 관련 함수 ..

1. 객체 기본 객체는 사전적인 정의로 실제 존재하는 것을 의미함 1) 객체 생성: {}중괄호나 객체 생성자로 생성 const obj = {}; const obj = new Object(); 2) 객체 구조 사람 = { key: value} // 이 때 중괄호 안에 들어가는 key: value를 프로퍼티(property)라고 함 3) 객체 접근 점 표기범 : obj.key 대괄호 표기법 : obj[key] 사람. 성별 사람. 말하다() 2. 객체 응용 1) 객체 관련 함수 삭제 : delete obj.name; 프로퍼티 유무 : property1 in obj 반복 : for (변수 in obj) { // 변수를 이용한 코드 } 옵셔널 체이닝 : obj?.property?.subProperty 구조 분해 ..

1. 미디어 쿼리 화면(screen), 티비(tv), 프린터(printer)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다. 미디어 쿼리는 1) link요소에 media 속성으로 적용하는 방법 2) 스타일 시트 내에서 @media를 사용하는 방법 @media screen and (max-width: 768px) { body { background-color: lightgreen; } } 미디어 타입은 스크린이고 화..

animation 사용시에 css 최적화 하는 방법 1. css핵 (translate Z or translate 3D)사용하기 하드웨어 가속을 활성화하여 대상이 되는 엘리먼트를 빠르게 렌더링 처리하는 방법 하드웨어 가속은 중앙처리장치(CPU)가 하는 일은 그래픽 처리 장치(GPU)가 분담하여 처리해서 컴퓨터의 성능을 최대한 끌어올리고 브라우저 렌더링을 빠르게 할 수 있게 한다. 일반적인 css animation, trnasform, traslation 속성에는 하드웨어 가속이 적용되지 않기 때문에 브라우저를 속여서 강제로 3D 처리를 하도록 브라우저에 지시해 하드웨어를 가속하는 방법 transform: translate3d(0,0,0); transform: translateZ(0) 하지만 이러한 방법은 ..