Page Layout
-
HTML Page Layout : Flexbox로 레이아웃 잡기각종 학습 요약/Web 2022. 4. 28. 16:53
페이지 레이아웃 Flexbox로 레이아웃 잡기 display: flex 앞서 '기초 CSS의 이해 - 박스모델'에서 살펴봤듯, style 속성 display는 어떤 형식으로 보여질 건지, 박스모델의 display 방식을 결정하는 속성이다. Flex layout이란, 부모 엘리먼트의 박스모델을 display: flex로 속성값(강조한 이유가 있다, 일단 기억해두자)을 지정하고, 그 아래로 자식 엘리먼트들을 구성하는 레이아웃 구성 방식. Flex 요소(이하 '콘텐츠')들이 쌓이는 규칙 콘텐츠들은 기본적으로 수평으로 쌓인다('flex-direction의 기본값이 row다'라고 한다). 쌓는 방향(flex-direction)을 결정하는 속성값 두 가지: row, col..
-
HTML Page Layout : 화면을 나누는 방법각종 학습 요약/Web 2022. 4. 28. 16:50
페이지 레이아웃 레이아웃: 화면을 나누는 방법 HTML 구성 기본 TIP html을 작성할 때는 작성한 요소들이 위쪽으로부터 아래쪽으로, 그다음엔 왼쪽으로부터 오른쪽으로 쌓여간다고 생각하면 작업이 수월하다. CSS style 작업을 하기 전 가장 먼저 해야할 일 : 레이아웃 리셋 HTML 문서는 지금 막 생성한 것이라도 자체적인 style이 있다. 때문에 예상치 않게 여백이 생기거나 사이즈 계산이 맞지 않게 된다. 브라우저 간의 차이도 있고. 그래서 이런 차이들을 최소화 하는 style을 가장 먼저 적용하는데, 이 작업을 레이아웃 리셋이라고 한다. * { box-sizing: border-box; } body { margin:0; padding:0; }