HTML / CSS flex

FE 개발자 신상오·2022년 5월 3일
0

HTML/CSS

목록 보기
1/2
post-thumbnail

참고자료
https://studiomeal.com/archives/197

와이어프레임

웹, 앱 개발 시 레이아웃의 뼈대를 그리는 단계로
단순한 선이나 도형으로 인터페이스를 시각적으로 묘사한 것

목업

실물 크기의 모형이란 뜻

HTML 구성하기

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠 흐름을 따라 작업함

  1. [수직분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소 배치
  2. [수평분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록
    요소를 배치함 ➡️ 수평으로 구분된 요소에 height 속성을 추가하면 수평 분할 직관적으로 가능

Flexbox

Flexbox 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다는 것임

display : flex

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

  1. div 3개 작성
<main>
	<div>box1</div>
	<div>box2</div>
	<div>box3</div>
</main>
  1. 각 요소들이 잘 보이도록 css 작성
main {
  border: 1px dotted red;
}

div {
  border: 1px solid green;
}

* {
  margin: 10px;
  padding: 10px;
}


  • displau: flex 속성 적용
main {
	display: flex;
}


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

1. flex-direction : 정렬 축 정하기

아무 설정하지 않을 경우 기본적으로 가로 정렬

  • flex-direction : row
  • flex-direction : column
  • flex-direction : row-reverse
  • flex-direction : column-reverse

2. flex-wrap : 줄바꿈 설정하기

flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면
자동 줄 바꿈을 할 것인지 정함 아무 설정 없을 경우 줄 바꿈을 하지 않는다

box의 개수를 늘려서 확인

  • flex-wrap : nowrap (기본값)

  • flex-wrap : wrap

  • flex-wrap : wrap-reverse

3. justify-content : 축 수평 방향 정렬

justify-content 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함

  • 주요 속성값
    flex-start , flex-end, center, space-between, space-around

4. align-items : 축 수직 방향 정렬

align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함

  • 주요 속성값
    stretch , flex-start , flex-end , center , baseline

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

flex : flexbox속성 중 자식 요소에 적용해야하는 속성 - 요소가 차지하는 공간 설정

부모 요소에 적용하는 속성은 자식 요소들의 정렬과 관련
자식 요소에 적용하는 속성인 flex는 요소가 차지하는 공간과 관련

flex의 3가지 속성 : grow, shrink, basis
1. grow는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
2. shrink는 요소의 크기가 줄어들어야 할 때 어마나 줄어들 것인지
3. basis는 늘어나고 줄어드는 것 상관없이 요소의 기본 크기가 얼마인지

flex속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용
flex: 0 1 auto 밑의 코드와 같다.

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

flex 속성 3가지 지정값

1. grow (팽창 지수)

<main>
  <div id="box1" class="box">box1</div>
  <div id="box2" class="box">box2</div>
  <div id="box3" class="box">box3</div>
</main>
  • flex 기본값

  • box1 flex-grow: 1;

  • box1, box2 flex-grow: 1

  • box1, box2, box3 flex-grow: 1

정렬축으로 공간이 있을 때 각 자식 요소들이 얼마나 늘어나서
남는 공간을 차지할 것인지 비율을 정하는 것으로

첫 번째 예시에서는 1 : 0 : 0
두 번째 예시에서는 1 : 1 : 0
세 번째 예시에서는 1 : 1 : 1 로 빈 공간을 나눠 가진 것임
➡️ 팽창지수의 절대적 크기가 아니라 총합에서의 비율로 빈 공간을 차지한다.

2. shrink (수축 지수)

shrinkgrow와 반대로 설정한 비율만큼 박스 크기가 작아진다.
즉, shrink의 비율이 클수록 더 많이 줄어든다.
flex-growflex-shrink 속성을 함께 사용하는 일은 추천하지 않음

3. basis (기본 크기)

basis는 자식박스가 flex-growflex-shrink에 의해 늘어나거나
줄어들기 전에 가지는 기본 크기

flex-grow: 0;인 경우에는 flex-basis의 속의 값이 유지됨
display: flex가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라서
basis설정된 크기가 항상 유지되는 것은 아니다

profile
주간 회고용 블로그입니다 (개발일지와 정보글은 티스토리에 작성합니다.)

0개의 댓글