CSS 레이아웃의
과거, 현재 그리고 미래
개요
- IE의 지원중단에 따른 프로젝트를 대비
- 다양한 레이아웃을 알아보기
- 브라우저 기능 지원에 접근하는 방법
과거
float 장점과 단점
장점
구 IE 브라우저를 포함한
호환성
단점
float을 사용하면 요소가
부유되기 때문에 해제를
해줘야 하는 번거로움이
생긴다
float을 해제하는 방식
- clear: both
- overflow: hidden
- display: flow-root
float의 치명적인 단점
높이가 다른 경우 🥲
그럼 float은 사용하지 말아야 할 속성?
absolute 장점과 단점
장점
자유로운 레이아웃이 가능
단점
요소를 일반적인 문서의
흐름에서 제거하기 때문에
컨텐츠에 따른 유동성이
떨어진다
inline-block
장점과 단점
장점
float의 단점을 해결해주는 display: inline-block
단점
inline이 가지고 있는
특성때문에 요소 사이에
공백이 생긴다.
하지만 남은 공간을 채워주지 않습니다
(다만 해결 가능)
현재
한계를 벗어나기
Flexbox vs Grid
- flexbox와 grid의 선택 기준은?
- 1차원 배열인지 2차원 배열에 복잡한 레이아웃인지 판단
- flexbox는 컴포넌트, grid는 레이아웃
Flexbox와 Grid 비교
Flexbox
- 1차원 배열
- 자식요소의 높이를 동일하게 가능
- IE11에서도 사용 가능하나 버그가 있음
Flexbox History
- 2009년 - display: box
- 2011년 - display: flexbox (IE10)
- 최종 - display: flex
Title Text
margin auto
- 플렉스 자식에 margin 속성을 설정하면 자식이
그 방향에서 멀어지게 됩니다. - margin-left를 auto로 설정하면 자식이 오른쪽으로
밉니다. - margin-top을 auto로 설정하면 자식이 맨 아래로
밀어줍니다.
flexbox의 margin auto는 기본 축의 반대 방향으로
사용 가능한 최대 공간을 차지합니다.
float과 flexbox의 차이점
width와 flex-basis의 작동방식 이해
주의사항
start, end 속성값 : iOS 15.4+
gap(flex) 속성 : iOS 14.1+
Grid
- 2차원 배열, 특히 복잡한 레이아웃에서 사용
- 디자인에서의 그리드 개념을 이해할 필요가 있다.
- IE11에서 쓸 수 있다? 없다?
- 사용은 가능하나 기능의 한계
- 고정(O), 반복(X)
Grid History
- 2011년 초안 : display: -ms-grid (IE10+)
- 2017년 최종 : display: grid
- gap 속성
- grid-gap 비표준 속성 (하위 호환성때문에 필요)
- gap은 사파리 12이상 지원
주의사항
.grid-layout {
/* 행이 반복되는 경우는 불필요 */
grid-template-rows: auto;
/* 단 최소 높이가 필요한 경우 */
grid-auto-rows: minmax(50px, auto);
}
grid-template-areas
Multiple-column
- 신문이나 잡지에서 보는 2~3단 형태의
텍스트 다단 레이아웃
레이아웃의 분류는 아니지만
도움이 될만한 속성값들
- position: sticky
- fit-content
position: sticky
position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성입니다.
fit-content
- 특정 조건에 따라 요소 너비를 콘텐츠와
동일하게 만듭니다.
사용전
Title Text
미래
shape-outside
- 디자인 잡지 형태의 비정형적인 레이아웃이 가능
Title Text
논리적 속성과 값
- 논리적 속성의 기본 개념은 inline 축과 block 축이다.
- 물리적 속성은 시각적인 부분
- 논리적 속성은 direction에 따라 달라진다.
- 아랍어의 경우처럼 오른쪽에서 왼쪽으로 글자를 읽는 경우 - 좌우 반전이 있어야 하지만 기존 float 속성으로는 자동으로 반전되지 않음
- left는 물리적 속성, start는 논리적인 속성
브라우저 부분지원 속성
Container Queries
-
CSS 컨테이너 쿼리는 미디어 쿼리와 유사하지만
뷰포트 크기보다는 컨테이너 요소 크기와 관련이
있습니다.
브라우저 지원 범위
Masonry Layout
- 가장 잘 알려진 예는 Pinterest에 있으며 사람들이 레이아웃을 "Pinterest 레이아웃"이라고 부르는 것을 종종 듣게 될 것입니다.
마무리
참고 사이트
- https://web.dev/patterns/layout/
- https://csslayout.io/
- https://gridbyexample.com/patterns/
- https://flexboxpatterns.com/
CSS 레이아웃의 과거, 현재 그리고 미래
By kyoo119@gmail.com
