백엔드 분들께 프론트엔드 질문 받으면서 나도 다시 한번 본 부분들이다 ㅎㅎ
질문 받으면서 나도 확실히 정리할 수 있어 좋다 :)
Q. javascipt에서 0, '' 은 true로 취급하고 null, undefine만 false로 하고 싶은데 좋은 방법 있나요?
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
Nullish coalescing operator - JavaScript | MDN
널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.
developer.mozilla.org
const value = ''
const value2 = undefined
console.log(value ?? 'hello') // ""
console.log(!(value ?? 'hello')) // true
console.log(value2 ?? 'hello') // hello
console.log(!(value2 ?? 'hello')) // false?? 연산자를 이용해서 할 수 있어요~~
왼쪽 피연산자가 null or undefined면 오른쪽 값을 반환하고, 그게 아니라면('', 0 등 falsy한 값이라도) 왼쪽 값 그대로 반환한다. 여기에다가 ! 를 붙이면, 의도대로 true or false가 나온다.
Q. 간격 조정에 관해..
flex 하위에 두 가지 요소가 있고, 그 요소 간의 간격을 조정하는 상황이었다. 그래서 gap 속성을 말씀드렸다.
https://developer.mozilla.org/ko/docs/Web/CSS/gap
gap (grid-gap) - CSS: Cascading Style Sheets | MDN
CSS gap 속성은 행과 열 사이의 간격(거터)을 설정합니다. row-gap (en-US)과 column-gap (en-US)의 단축 속성입니다.
developer.mozilla.org
Q. 세로로 가운데 정렬 ! (align-items, align-content)
flex를 사용하고 있었고 방향이 row였다.
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
align-items - CSS: Cascading Style Sheets | MDN
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
developer.mozilla.org
처음에 align-content랑 헷갈려서 잘못 말씀드렸는데 계속 안돼서 '왜 안되지...?'하다가 '아..'하고 말씀드렸다.. ㅠㅠ
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
align-content - CSS: Cascading Style Sheets | MDN
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
developer.mozilla.org
align-content는 메인 축에 교차하는 방향으로 여러 줄이 됐을 때, 그 줄들이 어떻게 배치될 건지!
align-items는 메인 축에 교차하는 방향으로 한줄일 때, 그 줄 안의 아이템들이 어떻게 배치되는지..!!
우리는 한줄 내에서 메인 축에 교차하는 방향의 요소들의 배치를 정하는 거라서, align-items를 해야 했다..ㅎㅎ
https://codepen.io/asim-coder/pen/WrMNWR
Demo Flexbox 1
Forked from [Hugo Giraudel](http://codepen.io/HugoGiraudel/)'s Pen [Demo Flexbox 1](http://codepen.io/HugoGiraudel/pen/LklCv/). Forked from [Hugo Gi...
codepen.io
다른 분이 만드신 예시를 보니 좀 이해가 됐다 :)
Q. 일반적인(? 직선으로 위-아래, 왼쪽-오른쪽) 흐름에 벗어나게 어떤 요소와 관련되게 배치하기
absolute!
https://developer.mozilla.org/ko/docs/Web/CSS/position
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
조상 요소들 중에 position: relative인 요소가 있으면 가장 가까운 요소를 기준으로 배치되고, 그걸 기준으로 얼마나 떨어져있을지를 top, bottom, right, left로 정해준다고 말씀드렸다 ~
알게 된 점 : top, bottom, left, right를 지정하지 않으면 원래 위치(positon:static;일 때 위치) 그대로 배치됨.
그런데 위 그림처럼 조상의 왼쪽 위 끝에서 시작하는 게 아니라, 아래 그림처럼 오른쪽 하단에서부터 떨어뜨리고 싶다고 하셨다.
bottom에 - 값을 이용하면 된다~
더 좋은 방법이 있다면 알려주세요 ~
'프론트엔드💛' 카테고리의 다른 글
| click, drag 구분하기(with vue) 😯😊 (0) | 2022.12.16 |
|---|---|
| [A.C] 1, 2일차 - react 앱 생성 (0) | 2022.11.09 |
| 프론트엔드 프로젝트 용량이 너무 크다고요? (Rollup plugin visualize, Light house 등) (1) | 2022.10.18 |
| Tailwindcss font custom (0) | 2022.10.18 |
| 메일 HTML 코딩을 하면서 겪은 일들 (모바일, 다크모드) (0) | 2022.09.22 |