[CSS] Flexbox

Yuhallo·2022년 12월 23일

CSS html

CSS

목록 보기

5/5

🧡 HTML/CSS 활용

💚 레이아웃

각 요소를 목적에 맞게 배치하는 것을 말합니다.

normal flow

브라우저는 기본적으로 소스코드 순서대로 HTML에 표시됩니다. 요소가 상대요소 바로 아래 나타나는 것을 block요소라고 합니다.

CSS를 사용하여 레이아웃을 만들 경우 이러한 normal flow에서 벗어나도록 할 수 있습니다. 하지만 다수의 요소는 보통의 흐름대로 만들어지므로 잘 구조화된 HTML문서를 만드는 것이 중요합니다.

와이어 프레임

레이아웃의 뼈대를 그리는 단계를 말합니다. '와이어로 설계된 모양'이라는 의미를 가지며, 단순한 선이나 도형으로 인터페이스를 시각적으로 묘사 하는 것입니다.
아주 단순한 레이아웃과 구조를 보여주는 용도입니다. 전환효과나 애니매이션, 스타일링 요소나 UX를 판단하지 않습니다.
와이어 프레임의 가장 큰 목적은 화면의 영역을 구분 하는 일입니다. 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어 프레임을 작성합니다.

목업

웹 또는 앱의 목업은 작동하는 모습과 동일하게 HTML 문서 내에 하드코딩하는 방식으로 합니다.

🎀 하드코딩이란?
변수를 사용하지 않고, 내용을 소스코드에 모두 하나하나 입력하여 출력하는 방법입니다.
와이어 프레임과 목업을 작성하는 단계를 진행하지 않으면 설계도 없이 건물을 짓는 것과 마찬가지입니다.

💚 화면을 나누는 방법

HTML 구성하기

CSS로 화면을 구분할 때는 수직분할과 수평분할을 차례로 적용하여 콘텐츠의 흐름(좌 → 우, 상 → 하 의 흐름)을 따라 작업을 진행합니다.
수직분할 : 화면을 수직으로 구분하여 콘텐츠를 가로로 배치합니다.
수평분할 : 분할된 각 요소를 수평으로 구분하여 세로로 배치합니다.
수평으로 구분된 요소에 height속성을 추가하면 직관적으로 할 수 있습니다. 이때 'Atomic CSS방법론'을 사용할 수 있습니다. 클래스 명으로 'w10, h10'과 같이 지정하고 CSS에서 1:1로 구현하여 아주 작은 단위로 CSS를 작성하는 기법을 말합니다.

레이아웃 리셋

HTML 문서의 기본 스타일이 레이아웃을 방해하는 경우가 있습니다. 예컨대 박스의 시작을 정확히 (0, 0)에서 시작하고 싶은데 <body>요소에 여백이 있는 경우나, width와 height 계산이 여백을 포함하지 않아 계산이 번거로운 것들이 있습니다.
이러한 경우 기본스타일링을 제거하는 CSS코드를 작성하여 리셋시키고 디자인한대로 레이아웃을 구현할 수 있습니다.

/* 기본 레이아웃을 리셋하는 CSS코드 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

💚 Flexbox

박스를 유연하게 늘리거나 줄여서 레이아웃을 잡는 방법입니다.
flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있습니다.
적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는 대로 정렬되지 않습니다.

flex-item이 놓여있는 display:flex가 설정된 부모 요소를 flex-container 라고 부릅니다.
flex-container로 지정된 컨테이너의 일차 자식요소로, 내부에서 flexbox로 레이아웃되는 항복이 flex-item 입니다.

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

🤍 부모(Flex-Container) 속성

display : flex

display: flex;을 설정하면 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. 높이값이 가장 큰 항목에 맞추어 나머지 모든 항목들이 늘어납니다.

flex-direction : 정렬 축 정하기

flexbox에는 주축(Main Axis)와 교차축(Cross Axis)가 있습니다. flexbox는 이 두 축을 설정하고 움직이는 것이므로 축부터 이해하는 것이 좋습니다.
주 축(Main axis) : flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 축의 시작과 끝을 main start 와 main end라고 합니다.
교차축 (Cross axis) : flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 cross start 와 cross end라고 합니다.

flex-direction : row;

축을 왼쪽에서 오른쪽으로 간다고 하지 않고 '시작점'에서 '끝점'으로 간다고 합니다. 각 나라의 언어에 따라 시작점과 끝점이 다르기 때문입니다. 한국어의 경우 좌측이 시작점이지만, 아랍어의 경우 우측이 시작점이 됩니다. 또 일본어와 같이 세로로쓰는 언어는 주측이 세로로 시작되며 시작점이 상단이 됩니다.
flex-direction : row-reverse; 는 축은 같지만 상자의 순서가 C-B-A로 놓여지는 것을 말합니다.

flex-direction : column;

flex-direction : column-reverse; 는 상자의 순서가 C-B-A로 놓여지는 것을 말합니다.

Justify-content = item 주축 정렬

주축을 정했다면 주축을 따라 flex-item을 정렬하는 방식입니다. (축(=선반)은 움직이지 않습니다.)

justify-content: flex-start

justify-content: center

justify-content: flex-end

justify-content: space-between

juctify-content: space-around

justify-content: space-evenly

align-items = item 교차축 정렬

align-items: strech;(기본값)

* item들이 컨테이너 내 item의 최대 높이로 지정됩니다.

align-items: flex-start

align-itmes: flex-end

align-items: center

🤍 자식(Flex-item) 속성

자식 요소에 적용하는 flex 속성요소는 차지하는 공간 과 관련이 있습니다.

flex 속성

기본값은 flex : 0 1 auto; 입니다. 왼쪽부터 오른쪽으로 콘텐츠 크기만큼 배치됩니다. 세가지 값을 각각 따로 지정할 수도 있습니다.

 a {flex-gorw: 0;
	flex-shrink : 1;
	flex-basis : auto;
    }

flex-grow

기본값은 0입니다. 빈 공간이 있어도 늘어나지 않음을 의미합니다.
값을 1로 변경하면 정렬 축 방향에 빈 공간이 있을 때 각 자식요소들이 얼마나 늘어나 남은 공간을 차지할 것인지 비율을 정하는 것입니다.
팽창지수는 총합에서의 비율로, 자식요소의 grow값 / 자식 요소들의 grow값의 합 비율로 빈 공간을 가져갑니다.

flex-shrink

grow와 반대로, 설정 비율만큼 박스가 작아집니다.
grow 속성과 함께 사용하는 것은 비추입니다. 비율로 지정할 경우 grow속성에 변화를 주는 방식을 권장합니다. shrink속성은 width나 flex-basis 속성에 따른 비율로 실제크기를 예측하기 어렵기 때문입니다.
grow 속성으로 비율을 변경하는 경우 shrink속성은 기본값인 1로 둡니다.

flex-basis

자식박스가 늘거나 줄기 전에 가지는 기본 크기입니다.
grow 속성 값이 0인 경우에만 basis 속성의 값이 유지됩니다. basis로 설정된 크기가 항상 유지되는 것은 아닙니다!

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

콘텐츠가 많아 자식박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.

basis를 사용하지 않는다면, 콘텐츠가 많아 자식박스가 넘치는 경우를 대비해 width대신 max-width를 쓸 수 있습니다.

Yuhallo

개발자가 되고 싶어 둥당둥당

이전 포스트

[CSS] Flexbox

CSS

🧡 HTML/CSS 활용

💚 레이아웃

normal flow

와이어 프레임

목업

💚 화면을 나누는 방법

HTML 구성하기

레이아웃 리셋

💚 Flexbox

🤍 부모(Flex-Container) 속성

display : flex

flex-direction : 정렬 축 정하기

flex-direction : row;

flex-direction : column;

Justify-content = item 주축 정렬

justify-content: flex-start

justify-content: center

justify-content: flex-end

justify-content: space-between

juctify-content: space-around

justify-content: space-evenly

align-items = item 교차축 정렬

align-items: strech;(기본값)

align-items: flex-start

align-itmes: flex-end

align-items: center

🤍 자식(Flex-item) 속성

flex 속성

flex-grow

flex-shrink

flex-basis

[CSS] CSS Selector(선택자)

0개의 댓글