지난 4월 21일 있었던 Spring Camp 2018 행사에서 “11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기”라는 제목으로 발표를 하였습니다.

이번 발표에서 11번가 MSA를 이루고 있는 Spring Cloud의 기본 요소에 대한 핵심적인 개념 및 11번가 안에서 어떻게 사용되고 있는지에 관한 공유가 되었으며, 11번가의 MSA기반 모니터링 환경에 관해서도 소개되었습니다. 당일 발표하였던 자료 공유 드립니다.

감사합니다.
 

SK그룹 기술 컨퍼런스인 SK ICT Tech Summit 2017에서 발표한 ‘추천 플랫폼 콜로세오’ 자료 소개 드립니다.

추천 플랫폼의 역할과 방향성에 대해서 실 서비스 적용 사례를 통해 설명한 자료입니다.

비전공자 분들도  쉽게 보실 수 있는 부담 없는 내용으로 구성되어 있습니다.

감사합니다.

모바일 커머스의 중요한 소비자 트렌드로 대화형 커머스(Conversational Commerce)가 떠오르게 되었고, 이 대화형 커머스의 중심에 있는 Chatbot을 개발하여 11번가의 전자제품을 상담해주는 디지털 컨시어지에 적용시켰던 경험을 공유해보려고 합니다.

그 중에서도 Chatbot의 두뇌 역할을 담당하는 DM(Dialog Management) 서버가 돌아가는 예시를 들면서 원리를 설명하고자 합니다.
자세한 내용은 강의 동영상과 자료 동영상을 참고 부탁 드립니다. 애니메이션 효과가 많아, 슬라이드가 아닌 동영상으로 첨부하게 되었습니다.

강의 동영상입니다.

감사합니다.

 
동영상도 같이 참고 부탁드립니다.

감사합니다.

현재 11번가는 Legacy Application을 Spring Cloud 기반의 Micro Services로 전환하는 작업을 진행 중입니다. 1단계로 기존 하나의 Application으로 구성되어있는 서버를 단위 기능별로 API화하여 서버를 분리 진행 중이며, 이를 통해서 단위 기능별 빠른 배포와 증가하는 트래픽을 안정적으로 수용하기 위한 준비를 하고 있습니다.  아래 발표는 이 전환 작업에 대한 소개입니다.

첫번째 영상에서는 Tech Infra 개발본부의 백명석 본부장님께서 본 프로젝트의 개요와 추진 방향 및 일정에 대해서 설명해 주셨으며, 두번째 영상에서는 Spring Cloud의 주요 요소에 대한 설명과 11번가에 어떻게 적용되어 있는지에 관하여 소개합니다.

자세한 내용은 자료 슬라이드와 동영상을 참고 부탁 드립니다.

백명석 본부장님의 11번가 MSA 개발 사례에 대한 소개입니다.

11번가 Legacy application의 Spring Cloud 기반 Micro Services 로 전환 개발 사례에 대한 동영상과 슬라이드 같이 참고 부탁드립니다.

감사합니다.

요즘 A/B테스트가 중요한 키워드로 급부상하고 있습니다.
구글 GA에서 데이터 분석지표를 많이 보고 있었는데요, 구글은 Optimize라는 A/B테스트 솔루션을 제공하고 있습니다.
또한 넷플릭스에서도 자체 개발한 Experimentation Platform이라는 A/B테스트 플랫폼을 가지고, 영화, 드라마 컨텐츠 추천 알고리즘 등을 A/B테스트하고 있습니다.

A/B테스트란 무엇인지, 왜 필요한지에 대한 내용과,
사내에서 A/B테스트를 수행하기 위해 SK플래닛에서 개발한 Planet A/B테스트 플랫폼 PLab에 대한 소개 발표입니다.
PLab이라는 용어는 Planet A/B 또는 Planet Laboratory라는 의미입니다.

A/B테스트는 의사결정 과정에서의 리스크를 최소화하고, 영향력을 정량적인 수치로 알려줍니다. 따라서 데이터에 기반한 의사결정을 할 수 있습니다.

자세한 내용은 자료 슬라이드와 강의 동영상을 참고 부탁드립니다.

감사합니다.

먼저 진행 축(main axis)과 교차 축(cross axis)을 이해할 필요가 있습니다. ‘진행 축’이란 flex item이 배치되는 축(x/y)을 의미합니다. ‘교차 축’이란 flex item이 배치되는 방향과 90도 교차하는 축을 의미합니다. 진행 축과 교차 축은 상대적인 개념이라서 flex-direction의 값(row, column)에 따라 교차 축이 바뀌기 때문에 헷갈리기 쉽습니다. flex-direction:row인 경우 교차 축은 y가 되지만 flex-direction:column인 경우 교차 축은 x가 되겠지요.

한 줄(single line)과 여러 줄(multi line)의 개념도 이해해야 합니다. 단일 행 또는 여러 행이라고 표현하지 않는 이유는 flex-direction 값(row, column)에 따라 여러 줄이 행이 될 수도 있지만 열이 될 수도 있기 때문입니다. 여러 줄은 flex-basis 값과 flex-wrap:wrap 속성에 의해 한 줄로 표현하기에 빈 공간(free space)이 모자라는 경우에만 발생합니다.

justify-content 속성만 진행 축 정렬에 관여하고 align-items, align-self, align-content 속성은 모두 교차 축 정렬에 관여합니다.

• flex item의 ‘진행 축’ 정렬과 간격을 제어하는 ‘justify-content’.
• flex item의 ‘교차 축’ 정렬을 제어하는 ‘align-items’.
• flex item의 ‘독립적 교차 축’ 정렬을 제어하는 ‘align-self’.
• flex item의 ‘여러 줄 교차 축’ 정렬과 간격을 제어하는 ‘align-content’.

flex item의 ‘진행 축’ 정렬과 간격을 제어하는 ‘justify-content’.

justify-content 속성은 ‘진행 축’ 정렬과 아이템 사이의 간격을 제어합니다. flex-direction: row | row-reverse 인 경우 x축 정렬을 제어합니다. flex-direction: column | column-reverse 인 경우 y축 정렬을 제어합니다.

• Name: justify-content
• Value: flex-start | flex-end | center | space-between | space-around
• Initial: flex-start
• Applies to: flex containers

값이 left, right, top, bottom이 아닌 이유는 flex item의 진행 방향이 flex-direction의 값(row, row-reverse, column, column-reverse)에 따라 언제든 달라질 수 있기 때문입니다. 여분의 공간(free space)이 존재하는 경우 space-between, space-around 값을 통해서 flex item 사이의 공간을 제어할 수 있는데 space-between은 flex item과 flex container 경계면 사이에는 빈 공간을 만들지 않습니다. center, space-between, space-around 값에 의해 발생하는 flex item의 간격은 균등 분할되며 개별적으로 빈 공간을 제어하기를 원하는 경우 해당 flex item 요소에 별도의 margin을 추가해야 합니다.

See the Pen CSS flex ‘justify-content’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 ‘교차 축’ 정렬을 제어하는 ‘align-items’.

align-items 속성은 진행 축과 교차하는 ‘교차 축’ 정렬을 제어합니다. 여기서부터 조금 헷갈리기 쉬워요. flex-direction: row | row-reverse 인 경우 y축 정렬을 제어합니다. flex-direction: column | column-reverse 인 경우 x축 정렬을 제어합니다.

• Name: align-items
• Value: flex-start | flex-end | center | baseline | stretch
• Initial: stretch // flex-direction:row 상태에서 flex item의 높이를 100%로 렌더링하는 이유는 이것 때문.
• Applies to: flex containers

flex-wrap:wrap 속성에 의해 여러 줄(multi line)이 발생하는 경우 여러 줄의 정렬과 간격을 제어하는 align-content 속성의 값(flex-start, flex-end, center, space-between, space-around)에 따라 align-items 정렬은 무시됩니다. baseline 값은 flex item의 글꼴 사이즈(font-size)와 줄 간격(line-height)이 모두 동일한 경우  flex-start 값과 동일한 결과를 보여주지만, 글꼴 사이즈(font-size) 또는 줄 간격(line-height)을 flex item 마다 다르게 설정하면 포함하고 있는 문자열의 baseline 기준으로 정렬합니다. baseline을 쓸 일은 별로 없을 것 같은 생각이 드네요.

See the Pen CSS flex ‘align-items’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 ‘독립적 교차 축’ 정렬을 제어하는 ‘align-self’.

align-self 속성은 flex item의 독립적인 ‘교차 축’ 정렬을 제어합니다. flex item 요소에 각각 적용하기 때문에 flex container에 적용되어 있는 align-items 속성의 교차 축 정렬 결과보다 우선 순위가 높습니다.

• Name: align-self
• Value: auto | flex-start | flex-end | center | baseline | stretch // auto 값을 제외하면 align-items 값과 동일함.
• Initial: auto // auto 값은 flex container에 적용된 align-items 값으로 처리.
• Applies to: flex items

auto 값은 flex container에 적용되어 있는 align-items 속성의 교차 축 정렬에 따르게 됩니다. 그 밖의 다른 값들(flex-start, flex-end, center, baseline, stretch)의 성질은 align-items와 동일합니다.

See the Pen CSS flex ‘align-self’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 ‘여러 줄 교차 축’ 정렬과 간격을 제어하는 ‘align-content’.

align-content 속성은 여러 줄(multi line)의 ‘교차 축’ 정렬과 줄 사이 간격을 제어합니다. 여러 줄이 발생하는 경우(flex-wrap:wrap)에만 적용되고, 여러 줄이 발생하는 경우 align-items의 교차 축 정렬보다 적용 우선순위가 높습니다.

• Name: align-content
• Value: flex-start | flex-end | center | space-between | space-around | stretch
• Initial: stretch
• Applies to: multi-line flex container

align-items 속성과 align-content 속성에서 이해하기 어려운 부분은 “왜 두 속성을 분리했는가?” 입니다. 양쪽 모두 교차 축 정렬에 관여하고 있으며 동일한 값(stretch, center, flex-start, flex-end)을 사용하기 때문에 하나의 속성으로 통일하는 것이 가능해 보였거든요.

align-items인 경우 stretch 값의 표현이 flex item 박스를 교차축으로 끝까지 잡아 늘리는데 반해서, align-content인 경우 stretch 값의 표현은 flex item 박스의 교차축 크기는 변경하지 않고 교차축으로 줄 사이의 간격을 균등하게 벌어지게 만드는 점이 다르기는 합니다.

한 줄 또는 여러 줄 사이 교차축으로 빈 공간 없이 flex item을 가득 채우려면 align-items:stretch; align-content:stretch; 이렇게 두 속성 모두 값을 stretch로 처리하면 됩니다. 사실 align-items와 align-content의 기본값이 모두 stretch 이기 때문에 교차 축으로 width, max-width, height, max-height 속성을 사용하지 않았다면 교차축으로 빈 공간 없이 flex item이 채워지게 되어 있습니다. 아래 예제는 교차축 줄 사이 간격을 테스트하기 위해 width, height 값을 사용했습니다.

See the Pen CSS flex ‘align-content’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

마무리

이번 포스팅을 마지막으로 flexible box 레이아웃 모듈 설명을 모두 마칩니다. 그 동안 정리했던 내용을 다시 한번 요약하면 아래와 같습니다.

• CSS flexible 레이아웃: flex item의 팽창과 수축.
  • 플렉스 컨테이너와 플렉스 아이템(flex container & flex item)의 개념.
    • flex container(플렉스 컨테이너)
    • flex item(플렉스 아이템)
  • 신축성(flexibility): flex item의 팽창 및 수축.
    • flex item의 팽창을 제어하는 ‘flex-grow’ 속성.
    • flex item의 수축을 제어하는 ‘flex-shrink’ 속성.
    • flex item의 기준 사이즈를 제어하는 ‘flex-basis’ 속성.
    • flex item의 단축 속성 ‘flex’.
• CSS flexible 레이아웃: flex item의 방향과 순서.
  • flex item의 ‘방향’을 제어하는 ‘flex-direction‘.
  • flex item의 ‘줄 바꿈’을 제어하는 ‘flex-wrap‘.
  • flex item의 ‘뱡향과 줄 바꿈’을 제어하는 단축 속성 ‘flex-flow‘.
  • flex item의 ‘배치 순서’를 제어하는 ‘order‘.
• CSS flexible 레이아웃: flex item의 정렬과 간격.
  • flex item의 ‘진행 축’ 정렬과 간격을 제어하는 ‘justify-content‘.
  • flex item의 ‘교차 축’ 정렬을 제어하는 ‘align-items‘.
  • flex item의 ‘독립적 교차 축’ 정렬을 제어하는 ‘align-self‘.
  • flex item의 ‘여러 줄 교차 축’ 정렬과 간격을 제어하는 ‘align-content‘.

참고

• CSS Flexsible box layout module level 1(Candidate Recommendation)
• CSS Flexbox learning guides, tools & frameworks.
• flexbox.help
• caniuse.com

1. flex item의 ‘방향’을 제어하는 ‘flex-direction’.
2. flex item의 ‘줄 바꿈’을 제어하는 ‘flex-wrap’.
3. flex item의 ‘뱡향과 줄 바꿈’을 제어하는 단축 속성 ‘flex-flow’.
4. flex item의 ‘배치 순서’를 제어하는 ‘order’.

flex item의 ‘방향’을 제어하는 ‘flex-direction’.

flex-direction 속성은 flex item이 흐르는 방향(상하좌우)을 제어합니다.

• Name: flex-direction
• Value: row | row-reverse | column | column-reverse
• Initial: row
• Applies to: flex container

See the Pen CSS flex ‘flex-direction’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 ‘줄 바꿈’을 제어하는 ‘flex-wrap’.

flex-wrap 속성은 flex item의 줄 바꿈 성질을 제어합니다.

• Name: flex-wrap
• Value: nowrap | wrap | wrap-reverse
• Initial: nowrap
• Applies to: flex container

See the Pen CSS flex ‘flex-wrap’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 ‘뱡향과 줄 바꿈’을 제어하는 단축 속성 ‘flex-flow’.

flex-flow 속성은 flex item의 flex-direction 속성과 flex-wrap 속성의 값을 한꺼번에 작성할 수 있는 단축 속성입니다.

• Name: flex-flow
• Value: <flex-direction> || <flex-wrap> // 둘 중 하나 또는 둘을 선언해야 한다.
• Initial: row nowrap
• Applies to: flex container

See the Pen CSS flex ‘flex-flow’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 ‘배치 순서’를 제어하는 ‘order’.

order 속성은 flex item의 배치 순서를 제어하는 속성입니다. 기본값은 ‘0‘이며 flex-direction 속성의 방향값(row, row-reverse, column, column-reverse)을 기준으로 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치합니다.

• Name: order
• Value: <integer> // ‘0, 양의 정수, 음의 정수’를 사용할 수 있음.
• Initial: 0
• Applies to: flex items and absolutely-positioned children of flex containers // 절대값으로 처리된 flex-item에도 적용 가능하다고 하는데 어떤 상황에서 쓰이는지 정확히 알 수 없음.

See the Pen CSS flex ‘order’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

관련 글

• • CSS flexible 레이아웃: flex item의 수축과 팽창
  • CSS flexible 레이아웃: flex item의 정렬과 간격

참고

• CSS Flexsible box layout module level 1(Candidate Recommendation)
• CSS Flexbox learning guides, tools & frameworks.
• flexbox.help
• caniuse.com

기존에 우리가 사용하던 레이아웃 기법은 display, float, position 으로써 컬럼 레이아웃을 표현하는데 한계가 있고 구현 방법이 복잡한 문제가 있었는데요. flexible(신축성 있는, 유연한) 박스 모델의 장점을 한 마디로 표현하면 “복잡한 계산 없이 박스의 크기와 순서를 유연하게 배치할 수 있다.” 라고 정리할 수 있습니다. 쉬운 예를 들면 컬럼의 한 쪽은 고정하고 다른 한 쪽을 가변폭으로 처리하고 싶을 때 유용하지만 그것 이상의 편의를 제공합니다. 어떤 속성과 값을 통해 무엇을 할 수 있는지 설명해 보겠습니다.

• 플렉스 컨테이너와 플렉스 아이템(flex container & flex item)의 개념.
  • flex container
  • flex item
• 신축성(flexibility): flex item의 팽창 및 수축.
  • flex item의 팽창을 제어하는 ‘flex-grow’ 속성.
  • flex item의 수축을 제어하는 ‘flex-shrink’ 속성.
  • flex item의 기준 사이즈를 제어하는 ‘flex-basis’ 속성.
  • flex item의 단축 속성 ‘flex’.

플렉스 컨테이너와 플렉스 아이템(flex container & flex item)의 개념.

flex 박스 모델은 tr/td 개념과 유사합니다.  flex 박스는 flex container(부모, 마치 tr)와 flex item(자식, 마치 td)으로 이루어 집니다. flex container 요소에 display 속성의 값을 flex 또는 inline-flex 라고 선언하면 해당 요소는 flex container가 되고 자식 요소는 자동으로 flex item이 되어 flex 박스로 렌더링하기 시작합니다.

flex container

flex container는 flex item의 면적, 방향, 정렬을 결정하는 컨테이너 입니다. flex container 요소에 display 속성의 값으로 inline-flex를 선언하면 인라인 수준의 flex container를 생성하고, flex 값을 선언하면 블럭 수준의 flex container를 생성합니다. inline-flex 상태의 컨테이너는 inline-block 박스와 같은 형태로 표시합니다.

flex item

flex item은 컨테이너 내부에 형성된 free space(남거나 모자라는 공간, margin과 유사한 개념이지만 margin은 아님)를 팽창지수 또는 수축지수 값에 따라 형제들이 서로 나누어 갖습니다. flex container에 inline-flex 또는 flex 값을 선언하면 자식 요소들은 자동으로 flex item이 됩니다. flex item의 기본적인 스타일(User Agent 기본값)은 다음과 같습니다. 기본 스타일(flex-grow:0; flex-shrink:1; flex-basis:auto; flex-direction:row; flex-wrap:nowrap;)은 개발자가 변경할 수 있으며, 단축 속성(flex)을 사용할 때 값이 자동으로 재설정(flex item의 단축 속성 ‘flex’ 참고)되기도 합니다.

• 여분의 free space가 있어도 폭이 저절로 늘어나지 않습니다.(flex-grow:0)
• 부모 박스 초과 시(이 때 flex container 내부에 음수 free space 발생) 자동으로 균등 수축(음수 free space 크기 ÷ flex item 개수)합니다.(flex-shrink:1)
• 콘텐츠 너비만큼 수축합니다.(flex-basis:auto)
• 행으로 배치 합니다.(flex-derection:row)
• 개행하지 않습니다.(flex-wrap:nowrap)
• 텍스트 노드도 익명 flex item이 됩니다. 공백은 flex item이 되지 않습니다.

그 밖에 이런 특징도 있습니다.

• float 속성은 무시합니다.
• position:absolute|fixed 속성이 부여되면 flex item에서 빠지게 됩니다.
• flex item은 형제 또는 부모와 수직 또는 수평 margin을 중첩하지 않습니다.
• 브라우저마다 구현이 다를 수 있기 때문에 margin/padding의 값으로 상대 단위(%)를 사용하지 않는 것이 좋습니다.

flex container의 자손은 flex item이 되지 않습니다.

• Name: display
• Values: flex | inline-flex

See the Pen CSS flex container ‘display’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

신축성(flexibility): flex item의 팽창 및 수축.

flex item은 flex-grow(팽창지수), flex-shrink(수축지수), flex-basis(기준 사이즈) 속성과 이것들의 단축 속성인 flex 속성으로 박스의 팽창, 수축, 기준 사이즈를 제어할 수 있습니다. W3C 명세는 flex 단축 속성(flex : none | [<flex-grow> <flex-shrink>? || <flex-basis>])으로 제어하는 것을 권장합니다. 단축 속성은 명시하지 않은 값을 일반적인 용도에 맞게 재설정하기 때문입니다. 단축 속성 선언 시 재설정되는 값에 대한 설명은 flex item의 단축 속성 ‘flex’를 참고하세요. 참고: CSS 명세에서 바 ‘|‘는 분리된 값들 중 반드시 ‘하나’를 선언해야 한다는 의미입니다. 더블 바 ‘||‘는 분리된 값들 중 ‘하나 또는 그 이상’을 선언할 수 있다는 의미입니다. 물음표 ‘?‘는 ‘생략하거나 또는 한 번만 선언’해야 한다는 의미입니다.

flex item의 팽창을 제어하는 ‘flex-grow‘ 속성.

• Name: flex-grow
• Value: <number> // 음수 값은 유효하지 않음. 보통 ‘0‘ 또는 ‘1‘ 값을 선언.
• Initial: 0 // 단축 속성 flex 사용 시 flex-grow 값을 생략하면 값은 초기 값은 ‘1‘으로 다시 설정 됨.
• Applies to: flex items

flex-grow 속성의 기본값은 ‘0‘ 이기 때문에 flex item은 기본적으로 팽창하지 않습니다. flex-grow의 값이 ‘0‘이 아닌 경우에는 컨테이너 내부에 형성된 빈 공간(free space)을 팽창지수(flex-grow)에 따라 flex item에 반영하여 남은 공간을 채우게 됩니다. 공간이 남는 경우에는 flex-grow 속성에 의해 팽창하지만, 공간이 남지 않는 경우에는 아무리 값을 올려도 컨테이너의 너비 이상으로 팽창하지 않습니다. max-width 속성을 선언했다면 이 값을 초과하여 팽창하지 않습니다.

See the Pen CSS ‘flex-grow’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 수축을 제어하는 ‘flex-shrink‘ 속성.

• Name: flex-shrink
• Value: <number> // 음수 값은 유효하지 않음. 보통 ‘0‘ 또는 ‘1‘ 값을 선언.
• Initial: 1 // 단축 속성 flex 사용 시 flex-shrink 값을 생략해도 초기 값은 여전히 ‘1‘이 된다.
• Applies to: flex items

flex-shrink 속성의 기본값은 ‘1‘ 이기 때문에 flex item은 기본적으로 수축합니다. flex-shrink 값이 ‘0‘인 경우 flex item의 너비가 컨테이너를 초과 해도 수축하지 않습니다. 한편 flex-shrink 값이 ‘0‘이 아닌 경우에는 flex item이 컨테이너를 초과했을 때 넘치는 공간(이 때 음수 free space 발생)의 크기를 기준으로 수축지수(flex-shrink)에 따라 수축하게 됩니다. 컨테이너를 초과해서 공간이 모자라는 경우에는 flex-shrink 속성에 의해 수축하지만, 공간이 모자라지 않는 경우에는 아무리 값을 올려도 수축하지 않습니다. min-width 속성을 선언했다면 이 값 미만으로 수축하지 않습니다.

See the Pen CSS ‘flex-shrink’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 기준 사이즈를 제어하는 ‘flex-basis‘ 속성.

• Name: flex-basis
• Value: content | <width>
• Initial: auto
• Applies to: flex items

flex-basis 속성은 flex item 요소가 flex-grow 또는 flex-shrink 속성에 의해 팽창/수축하기 이전의 기준 크기를 명시하는 속성입니다. flex item에 width값을 명시하는 것은 flex-basis 값을 선언하는 것과 결과적으로 동일합니다. flex item의 팽창 또는 수축은 width값 또는 flex-basis에 선언한 값을 기준으로 free space(빈 공간) 값을 구하게 되고, free space 값은 팽창/수축 지수를 통해 flex item의 크기에 영향을 미치게 되므로 flex-basis(또는 width) 값을 가능하다면 명시적으로 선언하는 것이 좋습니다. 동일한 flex item에 width 값과 flex-basis 값을 동시 선언하는 경우 flex-basis 값은 width 값을 덮어 쓰기 때문에 코드를 간결하게 작성하려면 width 값을 선언하는 것보다 flex-basis 값을 선언하는 것을 권장합니다.

See the Pen CSS ‘flex-basis’ property test. by Jeong Chan-Myeong (@naradesign) on CodePen.

flex item의 단축 속성 ‘flex‘.

flex 속성은 flex-grow, flex-shrink, flex-basis 속성의 값을 하나의 속성값으로 작성할 수 있는 단축 속성입니다. flex item 요소에 flex와 관련 있는 아무런 속성도 선언하지 않은 경우 flex-grow:0; flex-shrink:1; flex-basis:auto; 다시 말하면 flex:0 1 auto; 상태가 됩니다. 세 가지 속성을 모두 선언할 수도 있지만 하나만 선언하고 다른 값을 생략할 수도 있는데요. 생략한 속성의 값은 자동으로 재설정 됩니다.

flex 단축 속성은 아래와 같이 다양한 형태로 선언할 수 있습니다. 생략한 일부 속성의 값은 flex item에 아무런 속성도 선언하지 않았을 때의 값 flex:0 1 auto; 와도 다르고 flex:none; 을 선언했을 때의 값 flex:0 0 auto; 와도 다르다는 점에 유의하세요.

• flex: none;
  // flex-grow:0; flex-shrink:0; flex-basis:auto; 상태가 된다.
• flex: <flex-grow>
  // flex-shrink:1; flex-basis:0; 상태가 된다.
• flex: <flex-basis>
  // flex-grow:1; flex-shrink:1; 상태가 된다.
• flex: <flex-grow> <flex-shrink>
  // flex-basis:0; 상태가 된다.
• flex: <flex-grow> <flex-basis>
  // flex-shrink:1; 상태가 된다.
• flex: <flex-grow> <flex-shrink> <flex-basis>
  // 생략한 속성 없음.

나중에 할 일

이 밖에도 flex container와 flex item을 제어할 수 있는 더 많은 속성들이 있는데요. 한 페이지에 이어 붙이기에는 너무 분량이 많아서 다음 기회에 설명해 볼까 합니다. 나중에 설명하려고 마음먹은 속성들은 아래와 같습니다. 남은 속성들은 flex-grow, flex-shrink, flex-basis 속성보다 훨씬 이해하기 쉽습니다.

• Ordering and Orientation
  • flex-direction
  • flex-wrap
  • flex-flow
  • order
• Alignment
  • justify-content
  • align-items, align-self
  • align-content

참고

• CSS Flexsible box layout module level 1(Candidate Recommendation)
• caniuse.com

최근 Front-End영역은 따라가기 힘들만큼 빠르게 변화하고 있습니다.
이런 환경속에서 우리가 작성해야하는 코드의 양도 점차 많아지고 복잡해지고 있는데요.
“과연 우리가 생산하고있는 코드는 좋은 코드일까?”, “어떻게 하면 더 빠르고 가벼운 코드를 만들 수 있을까?” 하는 물음에서 시작된 FE CI/정적분석 서버 구축에 대한 내용을 공유드립니다.

이번 발표는 Jenkins를 이용한 빌드자동화와 이력관리 그리고 SonarQube를 이용한 JS 정적분석에 대한 내용을 담고 있습니다.

아래 강의 슬라이드와 동영상을 같이 보시면 됩니다.