[FE 기본기] Layout, CSS Logical Properties, Margin Collapsing 요약

CSS
- CSS3는 없다.
- CSS 명세가 방대해졌다.

 

Layout
- 크기와 위치
- CSS Box Model
    - CSS 레이아웃의 기본이 되는 원리
    - 엘리먼트의 크기를 정하는 표준
    - box-sizing 속성으로 크기 계산 방식 변경 가능
        - content; 너비와 높이를 설정하면, 컨텐츠 부분의 크기로 받아들이겠다.
        - border-box; 너비와 높이를 보더까지 포함한 크기로 받아들이겠다.
- runlayout.com

 

Flexbox
- 부모/자식/자식들 사이의 관계를 직관적으로 정의
- 이전에는 12 Column Grid를 사용하기도 했었다.
- 성배 레이아웃 문제를 해결
- flex-direction: row는 글쓰기 방향과 일치된다. (항상 왼 -> 오가 아님)
    - writing-mode: vertical-lr;을 사용하면 위->아래가 됨
    - direction: rtl;을 사용하면 오->왼이됨
- 아이템이 컨테이너의 너비를 넘겼다 -> flex-wrap
    - flex-wrap: wrap; 메인 축에 수직하는 방향으로 배치
    - flex-wrap: nowrap; 낑겨서 배치
- order 속성을 통해 DOM의 위치와는 상관 없이 아이템의 배치 순서를 설정가능 (아이템에 부여)
- flexbox froggy

 

Grid Layout
- 1차원적 Flexbox와 달리 2차원적인 구성
- 브라우저 별로 다른 명세를 지원할 수 있다.

 

CSS Logical Properties and Values Module
- 물리적인 프로퍼티나 값이 아닌 논리적은 프로퍼티와 값으로 레이아웃을 다룰 수 있게 하는 표준
    - inline : 글쓰기 방향 (width)
    - block : 글쓰기 방향에 수직 (height)
    - size : width나 height 대신 사용
    - start : 텍스트 흐름의 시작 위치
    - end : 텍스트 흐름의 끝 위치
    - 예) margin-inline-start: 20px;

 

Selector
- 엘리먼트 선택자
    - type, universal
    - pseudo (::after, ::selection, ::placeholder, ...)
- 속성 선택자
    - id, class
    - pseudo (:hover, :not(), :is(), :lang(), ...)
    - attribute ([class="example"], [attr~="str"], ...)
    - 특정성 : 구체적일 수록 우선 순위가 높다.
    - !important > 인라인 > 아이디 > 클래스, 수도, 속성 > 타입, 수도 엘리먼트
- <strong>, <header> 같은 태그엔 user-agent 스타일이 있다.
    - 브라우저의 기본적인 스타일

 

 

BEM
- block : 정보의 영역
- element : 블럭 내에서 특정 기능을 수행하는 컴포넌트
- modifier : 블럭이나 엘리먼트의 다른 버전을 명시할 때
- 예) .block__element--modifier

 

SMCSS
- scalable modular architecture for css
- 상태를 표현하는 규칙
- "is-"를 통해 상태를 표현
- 예) .button.is-primary

 

CSS-in-JS
- 공유하지 않으면 충돌도 없다.
- CSS를 JS에서 선언
- 클래스 이름을 달리해 충돌 방지

 

마진 병합 (Margin Collapsing)
- 수직 인접한 두 마진이 더 큰 쪽으로 병합되는 현상
- 자식의 마진이 부모의 마진보다 더 크면 차일드 마진으로 통합됨
- 인접 형제 노드의 수직 마진은 병합된다.
    - 나중에 나타난 엘리먼트가 clear 되어야 하는 경우 제외
- 부모 자식의 인접한 수직 마진은 병합된다.
    - 다른 컨텐츠가 없어야함
- 빈 블럭의 수직 마진은 병합된다.
    - 한 블럭의 martin-top과 margin-bottom도 병합됨
    - 두 마진을 분히할 높이, 패딩, 보더, 인라인 컨텐츠가 없을 때 발생