TIL CSS 레이아웃/셀렉터 정리

grid와 flex 차이

출처: https://cecibenitezca.medium.com/

flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.

Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다.

요약하자면, 

Grid : 수직 and 수평
Flex : 수직 or 수평

Tailwind CSS란?

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다.

 

Tailwind의 장점:

• 클래스 이름을 짓는데 에너지를 낭비하지 않습니다. 무언가를 스타일링하기 위해 sidebar-inner-wrapper 같은 바보같은 이름을 추가하지 않고, 단지 유연한 컨테이너에 대해 완벽한 추상적인 이름에 대해 더이상 고민하지 않아도 됩니다.
• CSS는 더이상 커지지 않습니다. 기존 방식을 사용하면 새 기능을 추가할 때마다 CSS 파일이 더 커집니다. 유틸리티로 모든것을 재사용할 수 있으므로 새로운 CSS를 작성할 필요가 거의 없습니다.
• 코드 수정을 더 안전하다 느낍니다. CSS는 전역적이고 무언가 변경할 때 어떤 부분이 깨질지 완벽하게 알고 있을 수 없습니다. HTML에 있는 클래스는 로컬이므로 다른 변경에 대한 걱정 없이 클래스를 수정할 수 있습니다.

Atomic / Utility-First CSS란?

두 가지 같은 개념인지는 모르겠지만, 비슷한 개념인 것 같습니다. 

Atomic CSS 방법론이란, 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법입니다.

 

Utility First 또는 Functional CSS라고도하는 Atomic CSS의 이점을 자세히 설명하고 보여주는 다양한 콘텐츠 모음입니다.

Atomic CSS 라는 용어 는 특정 라이브러리 나 프레임 워크가 아닌 아키텍처 철학을 나타내며 정적 (예 : Tachyons , Tailwind ) 및 프로그래밍 방식 (예 : Styled Components , Emotion , Theme UI , ACSS.io ) 접근 방식을 모두 포함합니다. 관련 용어에 대한 명확한 정의와 정보는 Let 's Define Exactly What Atomic CSS is를 참조하십시오 .

이 접근 방식을 개척 한 많은 사람들은 OOCSS 에 대한 Nicole Sullivan 의 2009-2011 년 작업에서 영감 을 받았습니다 .

출처 : https://johnpolacek.github.io/the-case-for-atomic-css/

The Case for Atomic / Utility-First CSS

section div 셀렉터(후손 셀렉터)와 section > div (자식 셀렉터)의 차이

출처: 코드스테이츠

Flexbox란?

flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.

Flex 요소에 방향 지정하기 (flex-direction)

flexbox는 박스가 수직으로 분할되는 것이 기본값입니다. 그러나 방향을 설정해주면, 수평으로도 분할할 수 있습니다. flex-direction 속성은 부모 박스요소에 적용합니다. 자식 박스에 특별한 속성을 주지 않아도, 부모 요소에 의해 자식 요소가 영향을 받습니다.

• row (기본값)
• column

Flex 속성 주는 법

부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법입니다. 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됩니다.

요약하자면,

display: flex; -> 부모
flex: 1 0 auto; -> 자식
flex-direction: column; -> 부모

flex 속성의 기본값과 의미

자식 박스에 어떠한 속성도 주지 않으면, 왼족에서부터 오른쪽으로 콘텐츠 크기만큼 배치됩니다. 자식 요소의 flex 속성을 추가하지 않으면, flex: 0 1 auto; 기본값이 적용됩니다.

 

flex 속성에는 세가지 영역이 적용되는데, margin이나 padding에서 띄어쓰기를 기준으로 의미하는 바가 구분되는 것은 동일합니다. 그러나, flex 속성에 적용되는 세 가지는 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는 값이 적용됩니다.

flex: grow, shrink, basis

이 순서와 기본값은 반드시 기억하세요. "flex: grow shrink basis", "flex: 0 1 auto"

margin이나 padding에서 상하좌우 각 방향을 따로 지정할 수 있었던 것처럼, flex에서 적용되는 grow, shrink, basis도 각 값을 따로 지정할 수 있습니다.

 

grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라집니다. 부모 박스 안에 n개의 자식 박스가 있다고 가정합니다. 각 자식 박스가 갖는 grow값의 총 합이 n이라면, grow 속성 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미입니다. grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미합니다. 

 

출처 : https://ishadeed.com/article/css-flex-property/

grow(늘린다) : 아이템들의 basis를 제외한 여백 부분을 grow에 지정된 숫자의 비율로 나누어 가진다

shrink(줄인다) : grow의 반대라고 생각하면 쉽다. basis 값보다 작아질 수 있는지.

(0으로 세팅하면 basis보다 작아지지 않아 고정폭을 쉽게 만들 수 있다.)

basis(기본 크기) : 아이템의 기본 크기

 

flex-grow 속성만 사용했을 때에 각 자식 박스가 차지하는 크기를 계산할 수 있나요? (basis, shrink는 기본값으로 둔다고 가정)

new width = ( (flex grow / total flex grow) x free space) + width

Variables
flex grow	provided from css
total flex	need to calculate
free space	need to calculate
width	provided from css

free space = parent width - total children widths

total flex = flex-grow를 다 더한 값

https://www.samanthaming.com/flexbox30/22-flex-grow-calculation/

Day 22: flex-grow calculation | SamanthaMing.com

flex-basis 속성의 의미를 이해하고 있나요? (디테일한 규칙 빼고, 의미만!)

안쪽 박스의 수직/수평 정렬을 정하는 속성 이름

수직 정렬 : align-items
수평 정렬 : justify-contents

---

그 외 용어 정리

와이어 프레임 : 화면 단위의 레이아웃을 설계하는 작업

 

목업 : 실제 틀을 만들어보기 전, 실물과 비슷하게 시제품을 제작하는 작업

 

프로토타입 : 처음부터 종료까지 핵심 동작이 가능하게 구현된 앱

 

하드 코딩 : 데이터를 코드 내부에 직접 입력하는 것

 

와이어 프레임과 프로토타입을 이해하기 좋은 블로그 글:

https://brunch.co.kr/@cliche-cliche/71

07화 와이어프레임과 프로토타입 구별하기

절대 단위와 상대 단위

px,% 의 차이?
👉 px: 화면에 크기를 고정하는 단위
👉 % : 부모 요소의 영향을 받아서 %을 쓸 수 있다.

em의 의미는 무엇인가요?
👉 자기자신(넓이) font-size 영향을 받는다.
👉 font-size는 상속영향을 받는다.
👉 상속에 영향을 받기때문에 유지보수가 힘들다.

rem은 무엇인가요?
👉 최상단의 부모의 font-size에 영향을 받는다.

vw / vh는 무엇인가요?
👉 veiw width / veiw heigth
👉 화면에 보이는 전체 사이즈이다.
👉100이 최대 사이즈(화면전체 사용한다)
👉화면 축소하면 축소하는 만큼 유동적으로 바뀜

-vmin / vmax
👉사이즈가 유동적으로 변할때 최소 or 최댓값을 백분율로 나눠서 화면에 보여줌

 

참고: https://ishadeed.com/article/css-flex-property/

Digging Into the Flex Property - Ahmad Shadeed