Chapter 04 새로운 웹 기술, 플렉서블 박스_1(개념/기술 익히기1)

Do it! 반응형 웹 페이지 만들기 2022. 12. 1. 12:48

플렉서블 박스 기본 개념 이해하기

플렉서블 박스(Flexible Box)를 이용하면 가변적인 박스를 아주 손쉽게 만들 수 있어 반응형 웹과 플렉서블 박스는 환상의 콤비라고도 할 수 있습니다. 이미 해외의 유명 웹 기술 잡지인 'W.E.B'에서 최고 신기술상을 수상하기도 했으며 웹 기술 중 가장 주목을 받고 있는 기술입니다.

기존의 속성들로는 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 불가능했습니다. 하지만 플렉서블 박스가 등장하면서 박스 요소들을 다양하고 자유롭게 조작할 수 있게 되었습니다. 예로 플렉서블 박스의 특정 속성값을 중앙으로만 설정하면 박스들을 중앙으로 배치할 수 있으며, 여러개의 박스가 나란히 있을 때는 가장 높은 크기의 박스에 맞춰 모든 박스의 높이를 확장하는 등 유연하게 작동하는 박스를 간단히 만들 수 있습니다. 요즘처럼 복잡한 구조의 반응형 웹사이트를 제작하기 위한 유용한 기술 중 하나입니다.

※ 플렉서블 박스가 등장한 이유
CSS 속성 중에는 박스를 배치하는 기술이 많이 있습니다. 하지만 그 기술들 중에는 배치라는 단어와는 무관한 기술들도 많이 있죠. 예를 들어 플로트(float)라는 속성은 '띄우다'라는 의미로, 배치와는 전혀 상관없습니다.
이처럼 의미 없는 기술들을 사용하던 중에 '배치'라는 의미와 정확하게 부합하는 기술이 등장했습니다. 바로 플렉서블 박스라는 기술입니다. 플렉서블 박스는 CSS3에서 처음 소개된 속성으로, 반응형 웹 제작에 반드시 필요한 가변적인 박스를 만드는 기술이 들어 있기 때문에 플렉서블 박스(가변적인 박스)라는 이름으로 불리게 되었습니다. 이 외에도 중요한 배치 기술들이 들어 있어 새로운 웹 개발 방법을 제시하는 데 한몫을 하고 있습니다.

▶ 2009년 7월 CSS3와 함께 등장한 플렉서블 박스가 그 당시 주목을 받지 못한 이유는 플렉서블 박스 기술을 지원하는 웹브라우저도 없었을 뿐더러 가변적인 웹사이트를 만드는 경우도 거의 없었기 때문입니다.

플렉서블 박스의 기본 개념

무엇이든 처음이 중요하다는 말이 있듯이 기술을 익히는 데도 처음에 어떻게 시작하느냐가 중요합니다. 여기서는 플렉서블 박스를 배우기 전에 반드시 알아야 할 몇 가지 기본 개념들에 대해 알아보겠습니다.

개념1. 플렉서블 박스 = 부모 박스

플렉서블 박스에서 부모 박스는 가변적인 박스로 작동하기 위한 기본 개념입니다. 마치 wrap처럼 모든 요소를 감싸고 있는 존재이기도 하죠. 이 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동하게 됩니다. 이렇게 특정 속성값을 적용한 부모 박스를 '플렉서블 박스' 또는 '플렉서블 박스로 작동한다'라고 합니다.

개념2. 플렉서블 박스의 자식 박스 = 플렉스 아이템

앞에서 설명한 부모 박스가 플렉서블 박스로 작동한 순간부터 그 안의 자식 박스들은 '플렉스 아이템'이라는 이름을 달고 작동하게 됩니다.

부모 박스가 속성값이 적용되어 가변적인 박스로 작동하는 순간부터 플렉서블 박스로 불리듯이 자식 박스 역시 속성값에 의해 작동하는 순간부터 플렉스 아이템이라고 불리게 됩니다.

개념3. 플렉서블 박스의 축 - 주축과 교차축

건축물에는 건물을 지탱하기 위한 기둥이 있듯이 플렉서블 박스에도 플렉스 아이템(자식 박스)을 지탱하기 위한 기둥과 같은 존재인 축이 두 개 있습니다. 바로 주축과 교차축입니다.

주축은 중심이 되는 축으로, 이 주축을 따라 플렉스 아이템이 배치됩니다. 주축이 가로일 경우 박스들이 왼쪽에서 오른쪽으로 배치되고 반대로 주축이 세로일 경우 박스들이 위에서 아래로 배치됩니다.

교차축은 주축에 교차하는 축으로, 주축이 가로일 경우 교차축은 세로가 됩니다. 반대로 주축이 세로일 경우 교차축은 가로가 됩니다.

축의 방향

축에서 가장 중요한 부분은 바로 '축의 방향'입니다. 축의 방향은 플렉스 아이템의 배치 방향을 설정하기 위해 사용하는 속성값에 따라 결정됩니다.

예를 들어 플렉스 아이템의 배치 방향을 가로로 설정하면 주축 방향은 가로, 교차축 방향은 세로가 됩니다. 그러면 플렉스 아이템은 왼쪽에서 오른쪽으로 배치됩니다. 반대로 플렉스 아이템의 배치 방향을 세로로 설정하면 주축 방향은 세로가 되고, 교차축 방향은 가로가 되겠죠? 그리고 플렉스 아이템은 위에서 아래로 배치됩니다.

축의 시작과 끝

건물의 기둥에도 시작되는 부분과 끝 부분이 있듯이 축에도 시작과 끝이 있습니다. 축에 시작과 끝이 존재하는 이유는 플렉스 아이템이 처음 배치되는 위치(시작점)와 플렉스 아이템이 마지막에 배치될 위치(끝점)가 필요하기 때문입니다. 만약 시작과 끝이 없다면 플렉스 아이템은 어디서부터 배치되어야 하고 어디까지 배치되어야 할지 몰라 박스가 제멋대로 배치될 수도 있겠죠?

플렉서블 박스의 크기와 축의 방향이 결정될 때 축의 시작과 끝도 함께 결정됩니다.

지금 당장은 축에 대한 개념을 이해하기가 어려울 수도 있습니다. 하지만 앞으로 배우게 될 속성들을 실습하다 보면 자연스럽게 축에 대해 이해하게 될 것입니다.

※ 플렉서블 박스 기술 개발은 현재 진행 중!

플렉서블 박스 기술은 계속 수정을 거듭하고 있기 때문에 웹 브라우저마다 속성명이나 속성이 작동하는 방식이 다소 다를 수도 있고 최신 명세 기술을 지원하지 못하는 웹 브 라우저도 있습니다.

이 책에서는 수정 전의 기술은 설명하지 않고, 현재 집필 시기를 기준으로 플렉서블 박스의 최신 명세를 따릅니다. 최신 명세의 주소와 최신 명세를 기준으로 한 웹 브라우저 지원율은 다음 링크와 표를 참고하세요.

플렉서블 박스 최신 명세 주소 : http://www.w3.org/TR/css3-flexbox

브라우저의 종류	브라우저의 버전
마이크로소프트 엣지	12.0 ~
크롬	29.0 ~
사파리	6.1 ~ webkit-브라우저 접두사 필요
파이어폭스	28.0 ~
오페라	12.1 ~
오페라 미니	모두 지원
안드로이드 브라우저	4.4 ~
안드로이드 크롬	88 ~
안드로이드 파이어폭스	85 ~
iOS 사파리	7.0 ~ webkit-브라우저 접두사 필요
블랙 베리	10.0 ~ webkit-브라우저 접두사 필요
삼성 브라우저	4 ~
익스플로러	11.0 ~
익스플로러 모바일	지원 안 함

플렉서블 박스 기술 익히기

앞에서 플렉서블 박스에 대한 전반적인 기본 사항과 개념에 대해 설명했으므로 플렉서블 박스가 무엇인지는 대충 감을 잡았을 것입니다. 여기서는 플렉서블 박스의 실제 기술들을 익히고 실습하는 시간을 가져보겠습니다.

플렉서블 박스로 작동시키기 위한 기본 설정

이번에는 본격적으로 플렉서블 박스에는 어떤 속성들이 있고, 어떤 역할을 하는지 알아보겠습니다. 플렉서블 박스로 작동하게 하려면 태그를 어떻게 보일지 설정하는 display 속성의 값을 플렉서블 박스에서 새롭게 생긴 속성값으로 변경해 줘야 합니다.

속성명	속성값	적용 요소
display	flex, inline-flex	모든 요소

속성값명	속성값 설명
flex	박스를 블록 수준의 플렉서블 박스로 작동하게 합니다.
inline-flex	박스를 인라인 수준의 플렉서블 박스로 작동하게 합니다.

<head>
...
<style>
...

#wrap{
display:-webkit-flex; /* 웹키트 전용 접두사 */
display:flex;
/* 기존의 박스를 플렉서블 박스로 작동하게 하려면 display 속성의 값을 flex로 설정해야 합니다. */
width:90%;
height:500px;
margin:0 auto;
background:#eb4a24;
border:4px solid #000;
}
</style>
</head>
<body>
	<div id="wrap"></div>
</body>

※ 플렉서블 박스는 브라우저 접두사를 사용해야 한다!
플렉서블 박스 기술은 아직 W3C의 기술 명세 확정 단계가 아니므로 반드시 브라우저 접두사를 붙여야 합니다.
브라우저 접두사란 각 브라우저마다 최신 기술을 확정 단계 전에 안정적으로 지원하기 위해 제공됩니다.

<브라우저 저붇사 사용 규칙>
접두사를 붙인 속성 또는 속성값은 맨 앞쪽에 작성해야 하는데, 이는 확정 단계가 아닌 기술을 안정적으로 지원하기 위해서입니다. 그리고 브라우저 접두사를 붙이지 않은 속성 또는 속성값은 맨 뒤쪽에 작성합니다.
나중에 기술 명세가 확정 단계로 진입하면 브라우저 접두사가 필요 없겠죠? 그때는 접두사를 붙인 속성 또는 속성값은 무시하고, CSS의 규칙인 위에서 아래 순으로 적용하는 규칙에 따라 맨 뒤쪽에 확정 단계의 속성 또는 속성값을 적용하게 됩니다.
이 책의 실습과 예제에서는 브라우저 접두사를 생략했습니다. 하지만 실전에서는 반드시 브라우저 접두사를 사용하세요.

플렉스 아이템의 배치 방향 설정하기

만약 플렉스 아이템(자식 박스)의 배치 방향을 설정하고자 한다면 다음의 속성과 속성값을 사용하면 됩니다.

속성명	속성값	적용 요소
flex-direction	row(기본값), row-reverse, column, column-reverse	플렉서블 박스

속성값명	속성값 설명
row	박스를 왼쪽에서 오른쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고, 교차축은 세로가 됩니다.
row-reverse	박스를 가로로 배치하되 역방향으로 배치합니다. 즉, 오른쪽에서 왼쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고, 교차축은 세로가 됩니다.
column	박스를 위에서 아래로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 됩니다..
column-reverse	박스를 세로로 배치하되 역방향으로 배치합니다. 즉, 아래에서 위로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 됩니다.

<head>
...
<style>
...

#wrap{
display:flex;
flex-direction:row;
/* 플렉스 아이템(자식 박스)을 왼쪽에서 오른쪽으로 배치하는 row로 설정합니다. */
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:33.33%;
}

#wrap div:first-child{
background:#eb4a24;
}

#wrap div:nth-child(2){
background:#1488c8;
}

#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

플렉스 아이템을 여러 줄로 배치하기

플렉서블 박스 안에 플렉스 아이템(자식 박스)이 배치될 때는 기본적으로 한 줄로만 배치됩니다. 만약 박스를 여러 줄로 배치하고 싶다면 다음의 속성과 속성값들을 사용하면 됩니다.

속성명	속성값	적용 요소
flex-wrap	nowrap(기본값), wrap, wrap-reverse	플렉서블 박스

속성값명	속성값 설명
nowrap	박스를 한 줄로 배치하며, 기본값입니다.
wrap	박스를 여러 줄로 배치합니다.
wrap-reverse	박스를 여러 줄로 배치하되 역방향으로 배치합니다. 즉, 주축이 가로일 때는 아래에서 위로, 주축이 세로일 때는 오른쪽에서 왼쪽으로 배치합니다.

<head>
...
<style>
...

#wrap{
display:flex;
flex-direction:row;
flex-wrap:wrap;
/* 플렉스 아이템(자식 박스)을 여러 줄로 배치하는 속성값인 wrap으로 설정합니다. */
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:100%;
}

#wrap div:first-child{
background:#eb4a24;
}

#wrap div:nth-child(2){
background:#1488c8;
}

#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

플렉스 아이템의 배치 방향과 여러 줄 배치를 한 번에 설정하기

플렉서블 박스를 이용해서 웹사이트를 제작하다 보면 앞에서 살펴본 박스의 배치 방향을 설정하는 속성과 박스를 여러 줄로 배치하는 속성을 사용하는 경우가 많은데, 이때마다 각각의 속성을 사용해야 하므로 번거롭습니다. 이렇게 번거롭게 여러 개의 속성을 작성하는 것을 한 번에 작성할 수 있게 도와주는 속성은 다음과 같습니다.

속성명	속성값	적용 요소
flex-flow	[flex-direction] [flex-wrap], row nowrap(기본값)	플렉서블 박스

속성값명	속성값 설명
[flex-direction] [flex-wrap] 꼭 띄어쓰세요!	첫 번째 속성값은 박스의 배치 방향을 설정하는 속성의 값을 작성하고, 두 번째 속성값은 박스를 여러 줄로 배치하는 속성의 값을 작성합니다. 첫 번째 속성값과 두 번째 속성값의 사이는 반드시 한 칸을 띄어야 합니다.

<head>
...
<style>
...

#wrap{
display:flex;
flex-flow:row wrap-reverse;
/* 첫 번째 속성값은 박스를 왼쪽에서 오른쪽으로 배치하는 row로 설정합니다. */
/* 두 번째 속성값은 박스를 여러 줄로 배치하되, 역방향으로 배치하는 wrap-reverse로 설정합니다. */
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:100%;
}

#wrap div:first-child{
background:#eb4a24;
}

#wrap div:nth-child(2){
background:#1488c8;
}

#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

출처 : "반응형 웹 페이지 만들기"

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

Chapter 04 새로운 웹 기술, 플렉서블 박스_3(플렉서블 박스 이용해 목업 웹사이트 만들기) (1)	2022.12.01
Chapter 04 새로운 웹 기술, 플렉서블 박스_2(기술 익히기2) (0)	2022.12.01
Chapter 03 미디어 쿼리와 뷰포트 (0)	2022.12.01
Chapter 02 px을 %로 바꾸기 - 가변 그리드_3(가변 폰트 이용하기/멀티미디어 요소 가변적으로 만들기) (1)	2022.11.30
Chapter 02 px을 %로 바꾸기 - 가변 그리드_2(가변 마진과 가변 패딩 이해하기) (0)	2022.11.30

ABOUT ME

's IT STORY 's IT STORY

플렉서블 박스 기본 개념 이해하기

플렉서블 박스 기술 익히기

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

플렉서블 박스 기본 개념 이해하기

플렉서블 박스 기술 익히기

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바