도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

1 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)

이 글은 Ohans Emmanuel의 Understanding Flexbox: Everything you need to know을 번역한 글 입니다. 분량이 많아서 한번에 다 번역하긴 힘드네요.  3~4편으로 나눠서 번역해야 할 것 같네요. 우선, 이번편에는 플렉스 컨테이너 프로퍼티(The Flex Container Properties)까지 번역한 글입니다. 다음주 중으로 업데이트 하도록 하겠습니다.


이 글에서는 CSS의 Flexbox 모델에 익숙해지기 위해 필요한 모든 기본 개념에 대해 설명할 것이다. 긴 글이므로 마음의 준비가 되었기를 바란다.

.pdf로 이 글을 읽고 싶다면 다운로드 링크가 있다.


Flexbox를 처음 배우는 것은 재미있지 않을 수 있다. 이것은 기존에 CSS의 레이아웃에 대해 기존의 지식과는 많이 다를 것이다. 하지만 괜찮다. 배울 가치가 있는 모든 것은 그런 식으로 시작한다.

Flexbox는 분명히 진지하게 받아 들여야 할 것이다. 이것은 레이아웃을 잡는 현대적인(modern) 방식을 토대로 하고 있으며, 금방 사라지지 않을 것이다. 그것은 새로운 표준으로 부상했다. 그러니까 팔을 벌려 안아 주자!

당신이 배우게 될 것

먼저 Flexbox의 기본을 살펴 보겠다. Flexbox를 이해하려는 시도는 여기서 시작해야한다고 생각한다.

Flexbox 핵심

핵심을 배우는 것은 쿨하다(cool). 더 쿨한 것은 실제 어플리케이션을 만드는데 이러한 핵심을 적용하는 것이다.

나는 "작은 것들"을 많이 만드는 것을 보여 줄 것이다. 나중에는 완전히 Flexbox로  된 이 음악 앱을 만드는 것으로 글을 마무리하겠다.

음악 앱 레이아웃

꽤 멋있어 보이지 않는가?

음악 앱 레이아웃을 만드는 방법을 배우면서 Flexbox의 내부 동작에 대해 살펴 보겠다. 또한 Flexbox가 반응형 웹 디자인에서 어떤 역할을 하는지도 볼 수 있을 것이다.

이 모든 것을 다 보여 줄 수 있어서 기쁘다.

GIF by Jona Dinges

유저 인터페이스를 작성하기 전에 먼저 몇 가지를 보여줄 것이다. 지루할 수도 있지만 Flexbox에 능숙해지는 과정의 일부이다.

시작해보자.

소개



CSS는 지난 몇 년 동안 많이 발전했다. 디자이너는 필터(filters), 트랜지션(transitions) 및 트랜스폼(transforms)의 추가된 것에 기뻐했다. 그러나 뭔가가 빠져있었다. 우리 모두가 원했던 것.

Crafting Intelligent 페이지 레이아웃은 CSS를 사용하여 너무 오랫동안 지속되는 것처럼 보였으며, 많은 사람들이 해킹 된 CSS를 작성했다.

우리는 매번 float, table display 핵(hack) 등을 다뤄야했다. CSS를 작성 해본 적이 있다면 아마 이런적이 있었을 것이다. 만약 아니라면, 더 나은 세상에 오신 것을 환영한다!

마침내 디자이너와 프론트엔드 개발자들의 염원을 들어준 것처럼 보인다. 이번에는 호화스럽게.

이제 우리는 해킹 된 CSS 속임수를 버릴 수 있다. 더 이상 플롯(float), 테이블 셀(table-cell) 디스플레이를 사용하지 않아도된다.

crafting intelligent layouts을 제작하기 위해 보다 깨끗하고 현대적인 구문을 채택 할 때다. CSS Flexbox 모델에 오신 것을 환영한다.

Flexbox란?

스펙(specification)에 따르면 Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout), 정렬(align) 및 분산(distribute)하는 효율적인 방법을 제공한다.

너무 포멀(formal)하게 들릴 수 있다. 잠시 후, 이것이 무엇을 의미하는지 쉽게 이해할 수 있도록 설명 할 것이다.

당신이 꿈 속에서 CSS를 작성하든, 아니면 막 시작하든 간에, 집에있는 것처럼 편안하게 느낄 것이다.

Flexbox 모델을 사용하려면 어떻게해야할까?

이것은 모든 사람이 묻는 첫 번째 질문이며, 그 대답은 예상했던 것보다 훨씬 간단하다.

Flexbox 모델을 사용하려면 먼저 flex-container를 정의해야한다.

일반 HTML에서 간단한 목록을 레이아웃하는 것은 다음과 같다:

<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
</ul>

코드를 보면, 당신은 ul 태그가 li 태그를 포함하고 있음을 볼 수 있다.

ul을 부모 엘리먼트, li을 자식 엘리먼트라고 부른다.

Flexbox 모델을 사용하려면 부모 엘리먼트를 flex container (AKA flexible container)로 만들어야한다.

display: flex 또는 display: inline-flex를 설정하면 된다. 정말 간단하지 않은가. 이제 Flexbox 모델을 사용하도록 설정되었다.

실제로 일어나는 일은 Flexbox 포맷 컨텍스트가 즉시 시작(initiated)되는 것이다.

예상과는 달리 어렵지 않다고 내가 얘기하지 않았는가.

 

정렬되지 않은 목록(ul)과 목록(li) 엘리먼트를 사용하여 Flexbox 포맷 컨텍스트를 구성하는 방법은 아래와 같다.

/*Make parent element a flex container*/
ul {
display: flex; /*or inline-flex*/
}

li 엘리먼트에 스타일을 추가한다.

li {
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
}

아래와 같은 결과를 볼 수 있을 것이다:

활성화된 Flexbox

당신은 눈치 채지 못했을지 모르지만, 이미 어떤 일이 벌어졌다. 이제 Flexbox 포맷 컨텍스트가 시작됐다.

기본적으로 CSS 스택의 "divs"는 위에서 아래로 다음과 같이 수직으로(vertically) 저장된다는 것을 기억하자:

'divs'의 기본 view 형식

위의 이미지는 당신이 기대했던 결과일 것이다.

그러나 단순한 display: flex를 추가하면 레이아웃이 변경 되는 것을 즉시 볼 수 있다.

이제 목록 요소(li)는 왼쪽에서 오른쪽으로 가로로 쌓인다. 당신이 기존에 float을 사용하여 만들었던 것처럼.


Flexbox 적용

FlexBox 모델은 모든 상위 요소에 "flex display"를 추가하자마자 동작한다.

목록 요소의 방향 변경이 왜 발생했는지 이해하지 못할 수도 있다. 곧 이것에 대해 자세한 내용을 설명하도록 하겠다. 하지만 지금은 그저 따라와 주길 바란다.

"flex display"를 선언하면 Flexbox 모델이 시작된다.

주의를 기울여야 할 한가지가 더 있다.

display 속성을 flex로 설정하면 정렬되지 않은 목록(ul)이 자동으로 flex container가 되고 자식 엘리먼트 (이 경우 li)가 flex items가 된다.

Flexbox 모델에 좀 더 흥미진진한 것들을 설명하게 되면, 이 용어는 반복해서 나타난다.

나는 두 가지 핵심 단어를 사용했는데 이것들에 더 중점을 두고 설명하고 싶다. 이것들은 앞에 놓인 것을 이해하는데 매우 중요하다.

  1. Flex container: display: flex 설정 한 부모 엘리먼트
  2. Flex items : Flex container 내의 자식 엘리먼트

이것은 Flexbox 모델을 사용하기위한 기초다.

Flex Container 프로퍼티(Properties)

Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content

 


위의 섹션에서 몇 가지 기본 원칙을 설명했다. flex-containersflex-items는 무엇이고, Flexbox 모델을 어떻게 시작 할 수 있는지.

이제는 이것을 잘 활용할 시간이다.

부모 엘리먼트를 flex container로 설정하면, 두 가지 정렬 속성을 사용할 수 있다.

블록 요소의 너비 속성을 width: 200px로 정의하는 것처럼 flex container가 갖을 수 있는 6 가지 속성이 있다.

좋은 소식은 이러한 속성을 정의 할 때 이미 익숙했던 것과 다른 방식을 요구하지 않는다는 것이다.

1. Flex-direction

flex-direction 속성은 플렉스 아이템들(flex-items)이 주축(main axis)을 따라 배치되는 방향을 제어한다.

4 가지 값 중 하나를 가질 수 있다.

/* 여기서 ul은 플렉스 컨테이너를 나타낸다. */
ul {
flex-direction: row || column || row-reverse || column-reverse;
}

일반적으로, flex-direction 속성은 플렉스 아이템이 배치되는 방법을 결정 한다. 수평(horizontally), 수직(vertically), 또는 양방향의 반대(reversed) 방향.

기술적으로, "수평(horizontal)"과 "수직(vertical)"은 "flex world"에서는 올바른 용어가 아니다.

이것은 주축(main axis) 및 교차 축(cross axis)으로 불린다. 기본값은 아래와 같다.

일반적으로, 주축의 기본 방향은 왼쪽에서 오른쪽으로 배치되는 "수평"과 같이 느껴진다.

교차 축은 위에서 아래로 배치되는 "수직"과 같다.

기본 주축과 교차 축

기본적으로 flex-direction 속성은 (row)으로 설정되고 주축을 따라 플렉스 아이템을 정렬한다. 이것은 이 글의 시작 부분에서 정렬되지 않은 목록(ul)을 정렬 방식을 설명한다.

flex-direction 속성이 명시적으로 설정되지 않았더라도 기본값인 (row)을 사용 한다.

플렉스 아이템은 왼쪽에서 오른쪽 수평 방향으로 채워진다.


주축을 가로 질러 채워진 플렉스 아이템

flex-direction 속성이 (column)로 변경되면 플렉스 아이템이 교차 축을 따라 정렬된다.

그들은 왼쪽에서 오른쪽으로가 아니라 위에서 아래로 채워진다.

교차 축을 가로 질러 채워진 플렉스 아이템

2. Flex-wrap

flex-wrap 속성은 다음 세 가지 값 중 하나를 가질 수 있다:

// 여기서 ul은 플렉스 컨테이너를 나타낸다
ul {
flex-wrap: wrap || no-wrap || wrap-reverse;
}

flex-wrap 속성이 예제를 통해 어떻게 작동하는지 설명하겠다.

정렬되지 않은 목록(ul)에 더 많은 아이템을 추가해보자.

어떻게 될 것이라고 생각하는가? 플렉스 컨테이너에 더 많은 아이템이 추가된다면 크기가 조정되거나 아이템을 다른 줄로 나눌까?

/* li 엘리먼트 3 개 추가 */
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
<li></li>
<li></li>
<li></li>
</ul>

다행히도, 플렉스 컨테이너는 새로 추가된 플렉스 아이템을 수용하도록 조정된다.


정렬되지 않은 목록에 추가된 3개의 플렉스 아이템

조금더 나가보자.

말도 안되는 양의 플렉스 아이템을 부모 요소에 추가하자. 총 10 개의 아이템으로 만든다.

어떻게 됐는가?


더 많은 목록 아이템을 추가 한 후

다시 말하지만, 플렉스 컨테이너는 브라우저를 가로로 스크롤해야하는 경우에도 모든 자식 요소에 맞게 조정된다.

이것은 모든 플렉스 컨테이너의 기본 동작이다. 플렉스 컨테이너는 더 많은 플렉스 아이템을 한 줄에 계속해서 수용한다.

flex-wrap 속성의 기본값은 no-wrap이다. 이로 인해 플렉스 컨테이너가 랩핑되지 않는다.

ul {
flex-wrap: no-wrap;
/*Keep on taking more flex items without breaking (wrapping)*/ }

no-wrap값은 변경할 수 있다.

만약 많은 수의 플렉스 아이템이 있다면, 플렉스 아이템을 플렉스 컨테이너 내에 "랩(wrap)"하고 싶을 것이다.

"Wrap"은 플렉스 컨테이너 내의 사용 가능한 공간이 플렉스 아이템을 기본 너비로 더이상 포함할 수 없으면 여러 줄로 나뉘어진다.

이것은 wrap 값으로 가능하다.



한 가지 값이 더 있다.

그래, 맞다. 플렉스 아이템이 반대(reverse) 방향 여러 라인으로 나뉘어 진다.


플렉스 아이템이 역순으로 랩핑된다

3. Flex-flow

flex-flowflex-directionflex-wrap 값의 약칭 속성이다.

border 약칭 속성을 사용한 적이 있는가? border: 1px solid red.

이것은 같은 개념이다. 여러 값이 한 행에 선언되었다.

아래 예제를 참고하자.

ul {
flex-flow: row wrap; /*direction "row" and yes, please wrap the items.*/
}

다른 조합을 시도해자. flex-flow: row wrap, flex-flow: column wrap, flex-flow: column no-wrap

생성 된 결과는 flex-directionflex-wrap 값에서 본 것과 다르지 않다.

이것의 결과물이 어떻게 될것인지 알 수 있을것이라고 확신한다.

한번 시도해보자.

4. Justify-content

Flexbox 모델은 정말 좋다. 여전히 그것을 의심한다면, justify-content 속성을 보면 확신할 수 있을 것이다.

justify-content 속성은 아래의 5 가지 값 중 하나를 갖는다.

ul {
justify-content: flex-start || flex-end || center || space-between || space-around
}

justify-content 속성이 정확히 무엇일까?

음,아마 text-align 속성을 떠올릴 수도 있다.

justify-content 속성은 주축(main axis)에서 플랙스 아이템을 배치하는 방법을 정의한다.

간단한 예제를 보자.

아래의 간단한 정렬되지 않은 목록(ul)을 보자.

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

기본적인 스타일을 추가해보자.

ul {
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}

아래와 같을 것이다:

flexbox가 "초기화(initiating)"된 후 기본 상태 모습

justify-content 속성을 사용하면 세개의 플렉스 아이템이 속성을 정의한대로 주축(main axis)을 기준으로 정렬 된다.

다음과 같이 속성을 정의 할 수 있다.

(i) Flex-start

기본값은 flex-start이다.

flex-start는 모든 flex-items를 주축(main axis)의 시작 부분으로 그룹화한다.

ul {
justify-content: flex-start;
}
justify-content: flex-start (기본)

(ii) Flex-end

flex-end는 flex-items를 주축(main axis)의 으로 그룹화한다.

ul {
justify-content: flex-end;
}
justify-content: flex-end

(iii) Center

center는 예상하는 대로이다. 즉, flex-items를 주축(main axis)을 따라 중앙에 배치한다.

ul {
justify-content: center;
}
justify-content: center

(iv) Space-between

space-between은 각 플렉스 항목간에 동일한 간격(space)을 유지한다.

ul {
justify-content: space-between;
}
justify-content: space-between

음, 여기 다른 점을 눈치 챘는가?

아래 이미지를 보자.

 

(v) Space-around

마지막으로, space-around은 flex-items 주위에 동일한 간격을 유지한다.

ul {
justify-content: space-around;
}
justify-content: space-around

아래 이미지의 설명을 참고하자.


이것들이 너무 많은 것 같더라도 걱정하지 말자. 약간의 연습을 통해 문법에 금방 익숙해질 것이다.

주축(main axis)을 따라 플렉스 아이템이 어떻게 배치되는지 확실히 이해해야한다.

5. Align-items

align-items 속성은 justify-content 속성과 다소 비슷하다.

justify-content 속성을 이해하면 금방 이해할 수 있을 것이다.

align-items은 다음 값 중 하나를 가질 수 있다. flex-start || flex-end || center || stretch || baseline

/* ul represents any flex container*/
ul {
align-items: flex-start || flex-end || center || stretch || baseline
}

이것은 플렉스 아이템이 교차 축(cross axis)에 배치되는 방법을 정의한다. 이것이 align-items 속성과 justify-content의 차이점이다.

다음은 이런 다양한 값이 플렉스 아이템에 미치는 영향이다.

교차 축을 기준으로 이러한 속성 값이 어떤 영향을 주는지 주의깊게 확인하자.

(i) Stretch

기본값은 stretch이다. 이것은 플렉스 아이템이 플렉스 컨테이너의 전체 높이를 채울 수 있도록 플렉스 아이템을 "늘린다(stretch)".

align-items: stretch

(ii) Flex-start

flex-start는 예상하는 대로다. 플렉스 아이템을 교차 축의 시작 부분에 그룹화한다.

align-items: flex-start

(iii) Flex-end

예상대로 flex-end는 플렉스 아이템을 교차 축의 끝으로 그룹화한다.

align-items: flex-end

(iv) Center

center 값은 똑같이 예측 가능하다. 플렉스 아이템의 중심에 플렉스 아이템을 정렬한다.

align-items: center

(v) Baseline

그렇다면 baseline 값은?

베이스라인(baselines)을 따라 플렉스 아이템을 정렬한다.

align-items: baseline

"baseline"은 왠지 좀 복잡해 보인다.

결과는 flex-start처럼 보일 수 있지만 미묘하게 다르다.

도대체 "baseline"이란 무엇일까?

아래 이미지가 도움이 될 것이다.


모든 플렉스 아이템이 "baseline"에 맞춰서 정렬되어 있는 것을 확인하자.

6. Align-content

위에서 wrap 속성을 다룰 때, 플렉스 컨테이너에 더 많은 플렉스 아이템을 추가하면 어떤 일이 일어나는지 기억하는가?

multi-line 플렉스 컨테이너가 된다.

align-content 속성은 multi-line 플렉스 컨테이너에서 사용된다.

baseline을 제외하곤 align-items과 동일한 값을 사용한다.

의미상으로, 이것은 multi-line 플렉스 컨테이너에서 플렉스 아이템이 정렬되는 방법을 컨트롤 한다.

align-items과 마찬가지로 기본값은 stretch이다.

이것들은 당신이 지금 친숙해져야 할 값들이다. 그렇다면, 이것이 10개의 플렉스 아이템이 있는 multi-line 플렉스 컨테이너에 어떻게 영향을 미치는지 알아보자.

(i) Stretch

stretch를 사용하면, 플렉스 아이템은 교차 축을 따라 사용 가능한 공간에 맞게 "늘어난다(stretched)".

아래 플렉스 아이템 사이에 보이는 간격은 아이템에 설정된 margin 때문이다.

 

(ii) Flex-start

위에서 이미 flex-start 값을 봤다.

이번에는 multi-line 컨테이너의 아이템을 교차 축의 시작 부분에 정렬한다.

교차 축은 기본적으로 위에서 아래로 정렬되는 거을 기억하자.

따라서, 플렉스 아이템은 플렉스 컨테이너의 상단(top)에 정렬된다.

 

(iii) Flex-end

flex-end 값은 플렉스 아이템을 교차 축의 끝에 정렬한다.

 

(iv) Center

짐작 하듯이 center는 플렉스 아이템을 교차 축의 중심(center)에 정렬한다.


이것이 플렉스 컨테이너의 마지막 속성이다.

이제 다양한 플렉스 컨테이너 속성을 사용하는 방법을 이해했을 것이다.



리뷰

구건모

1 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)

유익한 정보 잘보았습니다.

최두헌

1 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)

잘보고 갑니다.

설명이 잘되어있네요. 잘보고 갑니다 ㅎㅎ