flexbox를 활용한 10가지 레이아웃 사례
이 글에서는 실무에서 많이 사용하는 다음 10가지 레이아웃을 flexbox로 구현하는 방법을 소개한다. 이 레이아웃은 기존의 display속성이나 float 속성, position 속성 등으로는 구현이 어렵거나 구현이 불가능하다. 하지만 flexbox를 사용하면 쉽게 구현할 수 있다.
- 레이아웃 1 - 스크롤 없는 100% 레이아웃
- 레이아웃 2 - 내비게이션 영역
- 레이아웃 3 - 브라우저 화면 아래에 붙는 푸터
- 레이아웃 4 - 정렬이 다른 메뉴
- 레이아웃 5 - 폼 레이블 수직 중앙 정렬
- 레이아웃 6 - 중앙 정렬 아이콘
- 레이아웃 7 - 유동 너비 박스
- 레이아웃 8 - 말줄임과 아이콘
- 레이아웃 9 - 위아래로 흐르는 목록
- 레이아웃 10 - 가로세로 비율을 유지하는 반응형 박스
'React' 카테고리의 다른 글
React 에서 동영상 넣기 (0) | 2023.02.04 |
---|---|
JAVASCRIPT & REACT 배우기 동영상 (생활코딩) 유튜브 (0) | 2023.01.30 |
<footer> 에 들어가는 내용 (0) | 2022.11.20 |
<footer> 태그내의 문자 하단에 고정 (0) | 2022.11.20 |
React Button 컨포넌트 설정과 그 기능을 불러다 쓰기 (0) | 2022.09.03 |