4일차

JiHun·2023년 4월 14일

TIL

부트캠프

목록 보기

4/56

HTML/CSS 활용

이제는 화면에 최적화를 해보자.

레이아웃

모든 웹페이지는 레이아웃을 가진다. 그림으로 치면 드로잉을 하는 것.

브라우저마다 레이아웃의 기본 스타일이있다. 이것이 레이아웃을 잡는 데 방해가 되기도 한다.

body에는 약간의 여백이 기본 설정이다.
content-box 기준으로 width, height가 설정돼서 레이아웃 계산에 어려움이 있다.

따라서, 기본 스타일링을 바꿔주는 설정을 해주는게 좋다.

* {
	box-sizing: border-box;
}

body {
	margin: 0;
    padding: 0;
}

Flexbox

display: flex 분석하기

부모요소에 적용해야하는 Flexbox 속성

display:flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법.

먼저 정렬하고 싶은 요소들의 부모 요소에 display:flex; 설정을 해줘야 한다. 그러면 자식 요소들이 왼쪽부터 가로 정렬한다.

1. flex-direction : 정렬 축 정하기
flex-direction : row; : 자식 요소들은 왼쪽부터 가로 정렬을하고 row가 기본값이다.

flex-direction : column; : 위에서부터 세로 정렬
flex-direction : row-reverse; : 오른쪽부터 가로 정렬
flex-direction : column-reverse; : 밑에서부터 세로 정렬

2. flex-wrap : 줄 바꿈 설정하기
자식 요소들의 크기가 상위 요소의 크기를 넣으면 자동 줄 바꿈 설정이다. 설정하지 않으면 줄 바꿈을 안한다.

flex-wrap : nowrap; : (기본값) 줄 바꿈을 하지 않음
flex-wrap : wrap; : 줄 바꿈을 함.
flex-wrap : wrap-reverse; : 밑에서부터 시작해서 줄바꿈을 함.

3. justify-content: 축 수평 방향 정렬
이거는 먼저 flex-direction이 무슨 상태인지에 따라 방향이 달라진다.

justify-content: flex-start; : 왼쪽으로 정렬.
justify-content: flex-end; : 오른쪽으로 정렬.
justify-content: center; : 가운데 정렬.
justify-content: space-between; : 왼쪽 오른쪽 끝쪽에 맞춰 정렬.
justify-content: space-around; 자식 요소들이 어느 정도 비슷한 공간을 두고 정렬.

팁이 있다면 direction을 먼저 설정하고 다음 이 설정을 하는 것이 좋겠다.

4. align-items : 축 수직 방향 정렬
flex-direction에 따라 정렬이 달라진다.

align-items: stretch; : (기본값) container에 맞춰 채우기 위해 items을 축 수직 방향으로 늘린다.
align-items: flex-start; : 방향에 따라 items을 container의 축 수직 시작점으로 정렬.
align-items: flex-end; : 방향에 따라 items을 container의 축 수직 끝점으로 정렬.
align-items: center; : 방향에 따라 items을 container의 축 수직 방향 기준으로 가운데 정렬.
align-items: baseline; : 각 요소들이 가지고 있는 contents의 baseline을 축으로 정렬한다.

자식 요소에 적용해야 하는 Flexbox 속성

부모 요소에 적용하는 flex는 정렬, 요소가 차지하는 공간을 설정했다면, 자식 요소에 적용하는 flex는 요소가 차지하는 공간과 관련.

flex 속성에는 3가지 값을 지정해 줄수 있다.

flex:    grow   shrink    basis

기본값이 설정돼있다.

flex-grow:0;
flex-shrink: 1;
flex-basis: auto;

1. grow
요소가 얼마나 늘어날지를 설정. 정렬축 방햠으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 건인지 비율을 정하는 것이다.

box1 : box2 : box3 = 1:0:0 => box1 정렬축 방향으로 늘어나 빈공간을 차지한다.
box1 : box2 : box3 = 1:1:0 => box1과 box2가 정렬축 방향으로 늘어나 빈 공간을 같은 비율로 차지한다.
box1 : box2 : box3 = 1:1:1 => box1, box2, box3 모두 늘어나 빈 공간을 같은 비율로 차지한다.

2. shrink
grow와 반대로 설정한 비율만큼 박스 크기가 작아진다. 비율이 클수록 작아진다.

3.basis
flex-grow나 flex-shrink 하기 전, 박스의 기본크기. flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지된다.

참고

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

콘텐츠가 넘쳐 자식 박스가 많아지는 경우, width가 정확한 크기 보장 X.

(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width