HTML & CSS 2

이용준·2022년 10월 24일

CSS Elements Flexbox html layout wireframe

페이지 레이아웃(Page Layout)

레이아웃 : 웹 사이트의 성격과 목적에 막제 필요한 요소들을을 배치하는 작업
학습 목표
- 레이아웃을 위한 HTML 구조 만들기
- 웹 페이지 요소를 정렬하는데 Flexbox에 대한 핵심적 개념과 내용 이해하기

1.레이아웃: 화면을 나누는 방법

1-1) 화면 분할(HTML 구성하기)

대부분의 콘텐츠는 (좌->우) / (위->아래)로 흐른다. CSS로 화면을 구분할 때에는 수직/수평 분할을 차례로 적용해 콘텐츠 흐름에 따라 작업을 진행하자.

수직 분할 : 화면을 수직으로 나눠, 콘텐츠에 요소를 가로 배치
수평 분할 : 분할된 요소를 수평으로 구분해, 내부 콘텐츠 요소를 세로로 배치
(height 속성 추가시 수평 분할이 더 직관적)

1-2) 레이아웃 리셋

때때로 문서가 갖는 기본 스타일이 레이아웃 잡는데 방해가 될 때도 있으며 다음과 같은 사례를 들 수 있다.

<body> 태그의 기본 여백이 있는 경우 (시작 위치가 (0,0)이 아닌경우
width, height 계산에 여백을 포함하지 않은 경우
브라우저별 기본 스타일이 다름

이 경우 레이아웃을 리셋해야 할 필요가 있으며, 방법은 다음과 같다.

*{
  box-sizing: border-box;
}
body{
  margin:0;
  padding:0;
}

2.Flexbox로 레이아웃 잡기

flexbox layout이란 CSS의 display 속성 중 하나로, 컨테이너들의 레이아웃, 정렬, 간격 설정에 효과적이며 다루고자 하는 아이템들의 사이즈를 모르거나 크기가 유동적이여야 하는 상황에서 유용하게 사용될 수 있다.

간단히 말해 flexbox는 화면 크기에 맞춰 아이템들을 최적의 길이로 맞춰준다는 것이다.
또한 수평으로만 배치되는 일반적인 레이아웃(block, inline..)과 달리 flexbox레이아웃은 방향에 더 유연하다는 장점이 있으며 작은 크기의 레이아웃이나 모바일 디바이스에 적합하다.
(큰 스케일의 레이아웃이 필요하다면 Grid 속성을 사용하는 것이 좋다.)

2.flex의 주요 요소들

display: flex를 설정한 컨테이너의 child 역시 모두 flex 속성을 가지게 된다.

2-1) flex-direction : 정렬 축 정하기

해당 속성은 부모 요소에 설정하는 속성으로, 자식 요소들이 정렬할 축을 정한다.

default : row(가로 정렬)

 main{
   display: flex;
   flex-direction: row;(row/column/row-reverse/column-reverse)
 }
 부모 요소인 main에 작성해 자식 요소인 div 정렬할 축 설정

그외 옵션은 여기를 참고하도록 하자.

2-2)flex-warp: 줄바꿈 설정

하위 요소가 상위 요소의 크기를 넘길 경우 자동 줄바꿈 여부 설정

default: nowrap(줄바꿈하지 않음)

 main{
   display:flex;
   flex-wrap: nowrap;(nowrap/wrap/wrap-reverse)
 }

2-3) justify-content: 축 수평 정렬

자식 요소들의 축을 어떻게 정렬할 것인지 정한다.
(가로 방향으로는 혹은 세로 방향으로는 어떻게 정렬할 것인지 정한다.)

default: row

main{
  display: flex;
  justify-cointent: row; (row/column)
}

2-4) align-items: 축 수직 정렬

콘텐츠 내부 상하관계 정렬 상태 설정
default : 확장(stretch)

.container{
  align-items: stretch | flex-start | flex-end|...|unsafe;
}

3.Flex 속성의 하위 속성

자식 요소에 적용해야하는 Felxbox 속성
부모 요소에 적용해야하는 속성은 자식 요소의 정렬과 관련이 있었다면, 자식 요소에게 적용하는 flex는 공간과 관련이 있다.

3-1) flex 속성 값

flex : grow(팽창지수) | shrink(수축지수) | basis(기본크기)

flex : 0 1 auto(default)

grow
- 부모 요소 안에 자식들이 차지할 수 있는 공간을 나타낸다.
- 자식 요소의 grow값/자식 요소들의 grow값의 총 합의 비율로 빈 공간 가져간다.
shrink
- 비유이 클수록 많이 수축
- grow와 동시 사용은 지양
basis
- 박스의 기본 크기
- flex-grow 속성이 0인 경우에만 basis 속성값 유지

참고

width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선 적용된다.

자식 요소가 넘치는 경우, width는 정확한 크기를 보장하지 않는다.

(flex-basis를 사용하지 않을때) 자식 요소가 넘치는 경우를 대비해 max-width를 사용할 수 있음.