본문 바로가기

Flexbox

[CSS] 레이아웃 만들기
diary/codestates (be39) 2022. 5. 2. [CSS] 레이아웃 만들기 🎓 페이지 레이아웃 HTML의 구성 html은 기본적으로 왼쪽에서 오른쪽, 위에서 아래로 컨텐츠를 배치한다. 따라서 css에서도 수직 분할과 수평 분할을 차례대로 적용하면서 작업을 진행한다. 따라서 왼쪽과 같은 레이아웃을 구성하고자 할 때, 1. 수직 분할 먼저 화면을 수직으로 구분해 콘텐츠가 가로로 배치되도록 수직 분할을 먼저 진행한다. (border: red 부분) 2. 수평 분할 분할된 각각의 구역에서 콘텐츠끼리 세로로 배치될 수 있도록 수평 분할을 진행한다. (아이콘, 영역 부분) 🎓 기본 레이아웃 리셋 레이아웃을 구성할 때, html 문서가 기본적으로 가지고 있는 스타일로 인해 의도하지 않은 형태가 구성될 수 있다. 이를 방지하기 위해 기본 스타일링을 제거하는 코드를 작성한다. * { box-s..

티스토리툴바