1. wrapper vs l_wrapper우리는 과제를 할 때 wrapper 보단 l_wrapper를 자주 사용했다. 그 이유는 레이아웃을 잡을때, header, main, footer 등으로 큰 레이아웃을 잡고, 그 아래 하위로 l_wrapper로 각 시멘틱 태그 아래 넣어주어 전체적인 레이아웃을 틀을 잡았었다.하다보니 l_wrapper와 wrapper를 나누어 사용할 때가 있었다. 이 둘의 차이점은 무엇일까? wrapper : 이는 레이아웃 클래스가 아니고, 공공재 또한 아니면 그저 전체적으로 크게 묶을 때 사용한다. 예를 들면 아래와 같은 이미지를 만들때, l_wrapper가 아닌 wrapper로 전체적으로 감싸고 그리고 하위에 상세하게 레이아웃을 잡는 것이다.  l_wrapper : 이는 공공재,..

1. index란?우선 순위를 주는 속성이며, 웹페이지에서 요소들이 서로 겹칠 때 어떤 요소가 앞에 보이고, 어떤 요소가 뒤에 보일지 정할 수 있다. z-index는 단독으로 사용 불가능flex-items는 단독으로 사용 가능position로 가능하다. -> z-index를 발동시키는 조건은 position 초기값인 static만 아니면 된다.absolute, relative, fixed, sticky로 설정된 요소에 적용 가능하다.px가 아닌 숫자로 입력해야하며, 숫자가 크면 클수록 우선순위로 둔다.z-index는 음수 값을 가질수도 있다. 음수 값이 지정된 요소는 양수 값이 있는 요소들보다 뒤에 위치하게 된다. 예를 들어 z-index: 1은 대부분의 다른 요소들보다 뒤쪽에 위치하게 만든다.즉, 스테..

1. position: absoluteposition: absolute는 가장 가까운 position: relative, absolute, fixed 또는 sticky가 적용된 조상 요소를 기준으로 한다. 만약 그러한 요소가 없다면, 뷰포트를 기준으로 한다.제공받는 컨테이닝 블록의 가용공간을 너비, 높이 개념으로 늘리는 것이다. left: 0, top: 0, right: 0, bottom: 0 이렇게 하면 가용공간을 늘리기 때문에 margin: auto가 가능하여 정렬이 가능하다. 하지만 이는 요소의 가로 세로 크기가 지정이 되어있을 때만 유효한다.  또한 이는 단축속성이 있는데,inset 0 0 0 0; 이며 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽 과 같이 padding, marigin의 단축속성과 같은..

1. 연산자연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을피연산(operand)라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. // 산술 연산자5 * 4 // 20// 문자열 연결 연산자'my name is ' + 'error' // 'my name is error'// 할당 연산자color = 'red' // 'red'// 비교 연산자3 > 5 // false// 논리 연산자true & false // false// 타입 연산자typeof 'hi' // string 피연산자가 '값'이라는 명사의 역할을 한..

1. 데이터 타입(Data Type)이란데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖고 있다.자바스크립트(ES6)는 7개의 데이터 타입을 제공한다.7개의 데이터 타입은 원시 타입(Primitive type)과 객체 타입(Object/reference type)으로 분류한다구분데이터 타입설명원시 타입숫자 타입 Number숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재문자열 타입 String문자열불리언 타입 Boolean논리적 참(true)과 거짓(false)undefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌 타입 SymbolES6에서 추가된 7번째 타입객체타입객체, 함수, 배열 ..

1. aspect-ratioCSS에서 요소의 가로 세로 비율을 지정하는 속성이다. 이 속성을 사용하면, 요소의 크기를 동적으로 조정할 때도 가로와 세로의 비율이 일정하게 유지되도록 한다. 2. 장점이는 유연한 레이아웃으로, 비율을 고정해두면 다양한 화면 크기에서 일관된 디자인을 유지할 수 있다.미디어 요소, 이미지, 비디오 등에서 특정 비율을 유지해야 할 때 유용하다.즉, 콘텐츠가 로드되기 전에도 안정적인 레이아웃을 유지할 수 있다. 3. 예시div { aspect-ratio: 16 / 9;} 위 코드는 div 요소의 가로 세로 비율을 16:9로 설정이 된다. 즉, 너비가 160px이면 높이는 90px로 너비로, 너비가 320px이면 높이는 180px로 조정이 된다. 이 비율은 요소의 크기가 변하더라도..