css / grid 기본 > 자유게시판 1

css / grid 기본

thwn4750 contents are below.

References: 05-thwn4750 contents: Go Click
Other Blog: Blog ArtRobot (Title: css / grid 기본) More ...
Publish Date: (2024-06-28|6:52 pm), Modified Date: (2024-07-01|8:36 am)


--- Blog Post Contents
ES6 / Destructuring assignment
Destructuring assignment (구조분해할당) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식 배열의 구조분해할당 rest parameter와 함께 사용 dafault parameter와 함께 사용 다차원 배열 다차원 배열의 모양도 두 배열을 모두 같게 맞춰주면 분해할당 할수 있다. 두 변수의 값을 서로 교환하기 객체의 구조분해할당 {추출할 속성 명: 할당하고자 하는 변수 명} 추출할 속성 명과 할당하고자 하는 변수명이 같을 경우, property shordhand에 따라 생략 가능 하다. 객체의 원하는 일부 속성만 받을 수도 있다. 중첩된 객체에서의 구조분해할당 객체안의 객체에서도 일부만 추출할 수 있고, 이미 추출했던 객체도 다....... (Publish Date: 2021-01-27)

ES6 / Arrow function
arrow function 1. 기존의 함수 식에서 'function'을 빼고 ()뒤에 '=>'을 붙여준다. 2. 실행 컨텍스트에 return값(또는 식)만 존재하는 경우 중괄호 { }를 생략할 수 있다. (return 객체의 경우 중괄호 필수) 3. 함수가 받는 매개변수가 1개인 경우 ( )을 생략할 수 있다. (매개변수가 없는 경우는 무조건 써야 함) 실행컨텍스트 생성시 this를 바인딩 하지 않는다. 즉 this값이 없기 때문에 외부 스코프에 있는 this를 그대로 사용한다. arrow function이 block scope는 아니다. (var 사용시 scope의 영향을 받으므로 function scope) (Publish Date: 2021-01-27)

ES6 / enhanced object 향상된 객체
shorthand property 프로퍼티의 key와 value에 할당할 변수명이 동일한 경우 value는 생략 가능하다 함수에서 객체를 리턴할 때, destructuring assignment 구조분해할당 concise method 객체의 method를 더 간결하게 쓸 수 있다. (: function 생략) 새로운 축약형 메서드의 경우 prototype에 constructor가 없기 때문에 생성자함수로 사용할 수 없다. computed property 객체에 새로운 속성을 추가하거나 객체 자체를 선언시 속성에 대괄호([ ]) 표기법으로 속성 이름에 변수를 넣을 수 있다. (기존에는 선언시 속성에 변수명은 불가능하고 추가시 대괄호를 사용하여 가능하였음) own property enumeration order (고정된 프로퍼티 열거 순서) 객....... (Publish Date: 2021-01-27)

ES6 / Rest parameter / Spread operator
rest parameter(나머지 변수) 지정한 매개변수 값 외의 매개변수들의 배열 매개변수 전체를 나머지변수로 받아들여 arguments를 대신할 수 있다. 나머지 변수는 무조건 마지막에 1번만 할 수 있다. 나머지 변수에 해당하는 값이 없을 경우 나머지 변수는 빈배열이 된다. spread operator(펼치기 연산자, 전개 연산자) 배열의 요소들을 펼쳐주는 역할을 한다. 배열을 합치는 concat()의 역할을 대신할 수 있다. 배열의 요소를 함소의 인수로 사용하고자 할 때 사용하던 apply()를 대신 할 수 있다. 다른 인자 값들과 함께 사용할 수 있다. 여러번 사용할 수 있다. 문자열에도 spread operator를 사용할 수 있다. 얕은 복사만 수행한다. unshift()나....... (Publish Date: 2021-01-27)

ES6 / Default parameter
default parameter 함수에서 매개변수에 기본값을 지정해 줄 수 있는 기능 위에서 f(0, null)을 실행시킬때 의도적으로 0과 null을 인자로 넘겨도 두 값이 false값이라 값이 없는 것처럼 인식하는 문제가 있었는데, ES5에서 이 부분을 해결하기 위해선 아래와 같이 작성한다 default parameter 사용 방법 매개변수 부분에 '매개변수 = 기본값'으로 설정해주면 된다 기본값은 누락된 파라미터(인자로 값이 오지 않음) 또는 undefined일 경우에만 해당된다. 기본값으로 단순 값뿐만 아니라 식도 가능하다. dafault parameter의 값은 let선언과 동일하다. 따라서 TDZ도 동일하게 적용받는다. 변수에 기본값으로 할당하고자 하는 값이....... (Publish Date: 2021-01-26)

ES6 / Template literal
backtick(`)으로 문자열을 선언하는 새로운 방식. multi line(줄바꿈) 기존 문자열 선언 방식은 줄바꿈을 할때 '/n'을 사용해야했지만 template literal 방식에서는 엔터를 사용해도 된다. 또한 들여쓰기나 띄어쓰기도 문자로 인식함으로 유의해야 한다. string interporation template literal 방식은 문자열에 변수를 쉽게 넣을 수 있다. 변수를 ${ }로 감싸주면 변수로 인식하게 된다. ${ } 내부에는 값 또는 식이 올수 있다. templata literal는 문자열이므로 자동으로 toString()처리가 된다. 중첩된 backtick의 처리 ${ }안의 backtick이 먼저 처리된다. template literal을 이용하여 객체의 내용을 html에 적용하기 templa....... (Publish Date: 2021-01-26)

ES6 / Variables : let, const
let과 const let과 const 둘다 block scope의 영향을 받고, hoisting의 경우에도 hoisting은 하지만 undefined를 인식하지 않기때문에 TDZ에 걸려서 reference error가 나오는 것은 동일하다. 또한 재선언될 수 없다.(재선언과 재할당은 다르다) 전역변수와 전역객체의 속성 var로 전역범위에서 변수 선언시 전역변수이면서 전역객체(window)의 속성이 되었지만, ES6의 변수는 전역범위에서 선언하더라도 전역객체의 속성이 되지 않음. let let : var와 비슷하다(block scope 영향의 차이). 변수에 값을 재할당 가능하다. (값 자체의 변경이 필요한 경우) 반복문 내에서 함수 실행 여기서 i의 값이 모두 10인 이유는 funcs의 배열에 i의 값이 들....... (Publish Date: 2021-01-26)

ES6 / Block scope
새로운 변수 : let/const scope : 유효범위, 허용범위 function scope : 함수로 인해서 생성되는 변수의 유효 범위 block scope : 블럭({ } 중괄호)으로 인해서 생성되는 변수의 유효 범위 let/const만 block scope의 적용을 받는다. block scope : if문/ for문/ while문/ switch문/ { } Hoisting과 TDZ 기존의 hoisting 방식은 스코프 안에서 변수를 끌어올려 선언하고 undefined를 변수에 할당(실제론 할당이 아니라 그냥 인식) 한 뒤, 실제 값이 할당된 위치에 가면 값을 할당하기 때문에, 값 할당 전에 조회해도 에러가 아닌 undefined가 나왔으나, let과 const에서는 hoisting을 하긴 하나, undefined를 할당하지 않고, 선언만하기 때문에 r....... (Publish Date: 2021-01-26)

css / grid 정렬/배치 순서
Flex와 정렬 방식은 거의 비슷하지만, direction에 따라 세로 가로축이 달라지는 것은 아니다. grid-container에 적용하는 정렬 속성 align-items : cell 안에서 세로 방향 정렬 justify-items : cell 안에서 가로 방향 정렬 place-items : align-items과 justify-items 축약형 stretch: 꽉 채워서 늘어나기 start: 시작 점부터 정렬 center: 가운데 정렬 end: 끝점으로 정렬 align-content : 각 cell을 세로 방향 정렬 justify-content : 각 cell을 가로 방향 정렬 place-content : align-content과 justify-content 축약형 stretch: 꽉 채워서 늘어나기 start: 시작 점으로 모으기 center: 가운데로 모으기 end: 끝점으로 모으기 space-between....... (Publish Date: 2021-01-19)

css/ grid 영역 이름으로 레이아웃 나누기
grid에서 라인을 지정하지 않고 이름을 지정한 뒤 시각적으로 item을 template에 할당하는 방법도 있다. grid-template-areas containter에서 css속성으로 grid 속성을 활용하여 레이아웃을 잡은 뒤, 어떠한 grid-item을 어디다가 할당할지를 grid-item에 이름을 정해 준 뒤, 해당 이름으로 영역을 지정하는 것. grid-template-areas : item 이름으로 영역 지정 grid-area : item에 이름 지정 각 grid 영역은 띄어쓰기(space)로 구분하고, 빈 영역은 할당된 이름값 외의 아무거나로 지정해주면 된다. (Publish Date: 2021-01-19)

css / grid-item
grid-item에 적용하는 속성 값 각 cell의 영역을 정할수 있는 방법으로 아래와 같은 속성이 있다. 속성 값은 grid-line값. grid-column-start(시작라인) grid-column-end(끝라인) grid-column (시작과 끝라인 동시에 쓰기) grid-row-start(시작라인) grid-row-end(끝라인) grid-row (시작과 끝라인 동시에 쓰기) - 기준점을 -(마이너스)로 아래 라인부터 거꾸로 지정할 수도 있음 - grid-column이나 gird-row 같은 축약형에서는 시작번호에서 1칸만 차지하게 할 경우 끝 라인을 생략해도 됨. - a라인부터 b라인까지라고 쓰는 방식 대신에, a칸부터 c칸 갯수 만큼도 가능함 (a/ span b) - 해당 cell이 1개의 라인크기 이상 점유할 경우, 나머지 ce....... (Publish Date: 2021-01-19)

css /grid-container
grid-container의 속성 grid-container는 grid-item이 담겨있는 부모 요소이고, 해당 요소에 display:grid; css속성을 적용해줘야 한다. grid가 적용되면 그 안의 요소들은 모두 block 속성을 가지게 된다. 이제 grid-container를 grid를 사용해서 레이아웃을 잡아보자 grid-template-columns(가로축, 열) grid-template-rows(세로축, 행) grid-template-columns와 동일 함. container의 높이(height)값이 있으면 자동으로 꽉 채우려고 성질을 가지고 있음. 만약에 높이 값이 없다면, item의 내용 크기 만큼의 높이를 가짐. minmax(최소값, 최대값) 각 cell의 colums과 row의 최소값과 최대값 넣기 auto-fill 갯수는 지정하지 않고 어떤 크기로 행....... (Publish Date: 2021-01-19)

css / grid 기본
Grid는 Flex와 같이 레이아웃 배치를 위해 만들어진 시스템이다! Flex와 Grid의 차이점은 flex에서의 한방향으로 제어와 달리 가로 세로를 동시에 제어할 수 있다는 점! 물론, 그렇다고 grid가 flex보다 무조건 좋다고 말할 순 없고, 각각 적재적소에 사용해야 한다. 예를 들어, 전체 골격은 grid로 잡고, 그 안에서는 flex로 한다던가.... 다만, internetExploer에서는 grid의 모든 기능이 지원되지 않기 때문에.... 해당 기능이 IE에서 지원해주는지 확인하고 사용해야 한다는 문제점... 하지만 기본적인 것은 지원하기때문에 아얘 못쓴다는 것은 아니다. (빨리 이세상 모든 IE가 없어졌으ㅁ....) Tip. Flex와 grid는 firepox로 확인하면 좋다....... (Publish Date: 2021-01-19)

---

추천1