Blog 본문

지식공유/웹표준기술

flexbox

지식공유/웹표준기술|입력 2016.09.30 11:38
안녕하세요 다룸 입니다. 오늘은 "flexbox"에 대해 공유드리려고 합니다.

배경
  • 플렉스 레이아웃(Flexible Box) 모듈은 컨테이너 크기가 정적이든 동적이든 상관없이, 컨테이너 항목들 사이의 공간을 보다 효율적으로 유연하게 배치, 정렬 및 분배하도록 하는 것을 목적으로 합니다.
  • 플렉스 레이아웃(Flexible Box)의 바탕이 되는 주제는 대부분의 디스플레이 장치와 모든 종류의 화면 크기를 대응하고, 너비, 높이, 순서를 변경하며, 플렉스 컨테이너(flex container)는 사용 가능한 공간 내에서 항목을 최대한 채우기 위해 확장하거나, 넘치는 것을 방지하기 위해 축소합니다.
  • 가장 중요한 것은, 플렉스 박스(flex box)는 일반적인 레이아웃과는 대조적으로 방향에 얽매이지 않지만 크고 복잡한 응용 프로그램을 지원하기 위한 유연성이 부족합니다.
  • 플렉스박스 레이아웃은 대규모 응용 프로그램의 레이아웃을 위한 소규모의 레이아웃, 그리드 레이아웃의 구성 요소에 가장 적합합니다.
기본 사항 및 용어

Properties for the Parent (flex container) - 부모에 대한 속성

display
.container{display:flex} /* 블록 레벨 */
.container{display:inline-flex} /* 인라인 레벨 */
flex-direction
  • 어떤 방향으로든 정렬할 수 있습니다.
  • 순서를 뒤집거나 원하는 순서로 배치할 수 있습니다.
  • 브라우저(스크린)화면크기에 반응하여 유동적으로 크기를 변경할 수 있습니다.
  • 형제요소나 부모요소에 영향을 주지 않고 정렬이 가능합니다.
.container{flex-direction:column-reverse} /* 아래서 위로 */
.container{flex-direction:column} /* 위에서 아래로 */
.container{flex-direction:row} /* 기본값 : 왼쪽에서 오른쪽으로 */
.container{flex-direction:row-reverse} /* 오른쪽에서 왼쪽으로 */
flex-wrap
  • 기본적으로 flexible item을 모두 한 줄로 정렬됩니다. 속성에 따라 변경 할 수 있습니다.
.container{flex-wrap:nowrap} /* 기본값 : 단일라인 왼쪽에서 오른쪽으로 */
.container{flex-wrap:wrap} /* 멀티라인 왼쪽에서 오른쪽으로 */
.container{flex-wrap:wrap-reverse} /* 멀티라인 오른쪽에서 왼쪽으로 *
justify-content
.container{justify-content:flex-start} /* 기본값 : 왼쪽정렬 */
.container{justify-content:flex-end} /* 오른쪽 정렬 */
.container{justify-content:center} /* 가운데 정렬 */
.container{justify-content:space-between} /* flex item들간의 공간을 동일하게 주며 정렬 */
.container{justify-content:space-around} /* flex item의 좌우 여백을 동일하게 주며 정렬(여백은 겹치지 않습니다.) */
align-items
.container{align-items:flex-start} /* 위로 정렬 */
.container{align-items:flex-end} /* 아래로 정렬 */
.container{align-items:center} /* 가운데로 정렬 */
.container{align-items:baseline} /* flex item들의 인라인요소(텍스트)들이 같은 라인으로 정렬 */
.container{align-items:stretch} /* 기본값 : 꽉차게 노출 */
align-content
  • 라인이 두줄 이상일 경우 라인들의 세로정렬 속성
.container{align-content:flex-start} /* 위로 정렬 */
.container{align-content:flex-end} /* 아래로 정렬 */
.container{align-content:center} /* 가운데로 정렬 */
.container{align-content:space-stretch} /* 기본값 : 꽉차게 노출 */
.container{align-content:space-between} /* 라인들간의 공간을 동일하게 주며 정렬 */
.container{align-content:space-around} /* 라인들간의 상하여백을 동일하게 주며 정렬(여백은 겹치지 않습니다.) */

Properties for the Children (flex items) - 자식에 대한 속성

order
컨테이너 안에 있는 플렉스 요소들의 순서를 설정합니다.
플렉스 항목에 지정해야하며, order 값이 동일할 경우마크업 순서대로 나열됩니다.
  • number : 플렉스 항목의 순서를 지정합니다. (기본값 0 / 정수 단위)
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{order:2}
.item2{order:4}
.item3{order:1}
.item4{order:5}
.item5{order:3}
flex-grow
이것은 필요에 따라 플렉스 아이템이 사용가능 공간 내에서 얼마나 확장할지 결정합니다.
지정된 플렉스 항목에 남는 공간 중 어느정도를 분배하지 비율을 결정하는 역할을 합니다.
예를들어 모든 항목이 1일 경우 컨테이너의 공간은 동등하게 분배되지만, 그중 하나의 아이템이 2일 경우 해당 아이템은 2배의 공간을 차지하게 됩니다.
  • number : 플렉스 항목의 순서를 지정합니다. (기본값 0 / 정수 단위)
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{flex-grow:1}
.item2{flex-grow:2}
flex-shrink
필요한 경우 플렉스 아이템이 컨테이너 공간 내에서 얼마나 축소할지 결정합니다.
  • number : 축소시킬 값을 지정합니다. (기본값 1 / 정수 단위)
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{flex-shrink:1}
.item2{flex-shrink:3}
flex-basis
플렉스 항목의 초기 크기를 설정합니다.
길이(e.g. 20px, 20%, 5em 등) 또는 키워드를 지정합니다.
  • number : 기본값을 px,pt,%, em 등으로 지정할 수 있습니다.
  • auto : 기본값. 길이는 플렉스 항목(flexible item) 길이와 같습니다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{flex-basis:40px}
.item2{flex-basis:80px}
flex
flex은 축약 속성으로 flex-grow, flex-shrink, flex-basis를 함께 선언할 수 있습니다.
전체 표기 시 .item {flex : <glow> <shrink> <basis>} 에 두번째(shrink)와 세번째(basis) 변수는 선택 사항이며, 기본값은 0 1 auto 입니다.
  • flex-glow : 확장할 값을 지정합니다.
  • flex-shrink : 축소할 값을 지정합니다.
  • flex-basis : item의 길이를 지정합니다.
  • auto : 1 1 auto
  • initial : 0 1 auto
  • none : 0 0 auto
/* Two values: flex-grow | flex-basis */
.item{flex:1 30px}
 
/* Two values: flex-grow | flex-shrink */
.item2{flex:2 2}
 
/* Three values: flex-grow | flex-shrink | flex-basis */
.item3{flex:2 2 10%}
 
/* Global values */
.item{flex:auto}
.item{flex:none}}
align-self
align-self는 플렉스 항목이 어떤 방식으로 정렬될 것인지 지정하는 속성이며, 각 플렉스 항목에 개별적으로 적용할 수 있습니다.
  • stretch : 컨테이너에 맞춰 모든 플렉스 항목들의 높이값이 동일하도록 조정합니다. (기본값)
  • flex-start : 플렉스 컨테이너의 시작 부분(왼쪽)에 위치합니다. 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정됩니다.
  • flex-end : 플렉스 항목들을 컨테이너의 아래쪽으로 위치합니다.
  • center : 각 항목의 위 아래 잔여 공간을 동일하게 분배하기 때문에 각 항목이 수직을 기준으로 중앙에 정렬합니다.
  • baseline : 모든 플렉스 항목을 콘텐츠에 지정된 기준선을 중심으로 정렬합니다. 기준선은 각 항목마다 다를 수 있습니다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item{align-self:center}
.item:nth-child(1){align-self:flex-start} /* 컨테이너의 시작 부분(왼쪽)에 위치 */
.item:nth-child(3){align-self:flex-end} /* 컨테이너의 아래쪽으로 위치 */

브라우저 지원현황

브라우저 지원현황
Property Chrome
-webkit-
IE Firefox
-moz-
Safari
-webkit-
Opera
-o-
prefix를 이용한 지원

display

flex-direction

flex-wrap

flex-flow

justify-content

order

flex-grow

flex-shrink

flex-basis

flex

29.0 11.0 28.0 9.0 17.0

Chrome 21.0

safari 6.1

FF 18.0

align-items

align-self

21.0 20.0 12.1

safari 7.0

align-content

28.0

지금까지 flexbox에 대해 살펴보았습니다.
다음 시간에 새로운 주제로 찾아뵙겠습니다.
감사합니다.

저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

flexbox  (0) 2016.09.30
반응형 웹 4/4  (0) 2016.09.09
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용"에 대해 공유드리려고 합니다.

CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용

1안 : Mobile → Tablet → PC
PC의 모든 브라우저가 미디어쿼리를 지원하지 않음에 따라, 미디어쿼리를 지원하지 않는 IE 6~8 에서는 모바일 화면이 기본으로 노출되버림.
해결책은 다음과 같음.
  • 모바일용 CSS 코드를 먼저 작성하고 미디어쿼리로 감싸지 않음.
  • IE 6~8 을 위한 JS 라이브러리
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. 모바일 (뷰포트너비 640px 미만) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640ox 이상) */
    @media all and (min-width:640px) {
        .sample {background-color:red}
    }
     
    /* 4. PC (해상도 1024px 이상) */
    @media all and (min-width:1024px) {
        .sample {background-color:green}
    }
    • 디자인에 따라 미디어쿼리 분기점은 조정 가능.
  • IE 6~8 을 위한 JS 라이브러리
    < head>
    <!--[if lt IE 9]>
    	<script type="text/javascript" src="respond.min.js"></script>
    <![endif]-->
    < /head>
     
    <!-- respond.min.js 라이브러리를 사용하면 IE 6~8 브라우저도 미디어쿼리를 해석할 수 있다. (라이센스: MIT.) -->>
    • ie 6~8 Media Queries 대응을 위한 스크립트 - https://github.com/scottjehl/Respond/
    • respond.min.js 유의사항
      • 로컬 환경에서 동작하지 않음.
      • 미디어쿼리 작성시 all and 키워드를 생략하면 동작하지 않음.
        @media all and (조건문){실행문}
    • 페이지가 무거운 경우 미디어쿼리 구문 안쪽 코드가 늦게 표시되어 IE 6~8 브라우저에서 모바일 화면이 잠깐 노출될 수 있음.
2안 : Mobile 세로(Portrait) → Mobile 가로(Landscape) → Tablet 세로(Portrait) → Tablet 가로(Landscape) → PC
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
    .sample {background-color:black}
     
    /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
    @media all and (min-width:640px) and (orientation:landscape){
        .sample {background-color:green}
    }
     
    /* 4. Tablet 세로(Portrait) (해상도 768x 이상) */
    @media all and (min-width:768px) and (orientation:portrait){
        .sample {background-color:red}
    }
     
    /* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
    @media all and (min-width:1024px) and (orientation:landscape){
        .sample {background-color:blue}
    }
     
    /* 6. PC (해상도 1025px 이상) */
    @media all and (min-width:1025px){
        .sample {background-color:yellow}
    }
주의사항
해상도 1024px 이하인 PC화면에서는 Tablet화면이 노출된다.
이를 방지하고자 UA(userAgent)값으로 PC화면에서 Tablet화면이 노출이 안되게 작업합니다.
/* 4. Tablet 세로(Landscape) (해상도 768x 이상) */
@media all and (min-width:768px) and (orientation:portrait){
    html:not(.pc) .sample {background-color:red}
}
 
/* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
@media all and (min-width:1024px) and (orientation:landscape){
    html:not(.pc) .sample {background-color:blue}
}
						
3안 : PC → Tablet → Mobile
미디어쿼리를 지원하지 않는 IE 6~8 에서도 PC 화면이 기본으로 보이므로 문제되지 않습니다.
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. PC (해상도 1024px 이상) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 1024px 이하) */
    @media all and (max-width:1024px) {
        .sample {background-color:red}
    }
     
    /* 4. 모바일 (해상도 640px 이하) */
    @media all and (max-width:640px) {
        .sample {background-color:green}
    }
4안 : Mobile 세로(Portrait) → Mobile 가로(Landscape)
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
    .sample {background-color:black}
     
    /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
    @media only screen and (min-width :640px) {
        .sample {background-color:green}
    }

지금까지 반응형웹 대해 살펴봤습니다.
이후 새로운 주제로 찾아뵙도록 하겠습니다.
감사합니다.


by. UI개발팀 smoothie




저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

flexbox  (0) 2016.09.30
반응형 웹 4/4  (0) 2016.09.09
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "반응형웹 이슈"에 대해 공유드리려고 합니다.

PC

  • IE8 이하의 IE에서는 미디어 쿼리 지원이 불가능함
  • 추가적인 자바스크립트 작업 및 기타 우회 방법이 필요
해결방법
  • PC 환경의 IE에서 반응형을 지원 할 것인지 결정
    • 반응형을 지원 할 것이라면 - IE 전용 자바스크립트 사용
    • 반응형을 지원 할 필요가 없다면 - IE 환경에서는 일반적은 PC기준의 화면만 보여줌

Mobile

반응형웹 대응 해상도
  • Mobile 가로(Landscape) 모드
    • 가로(Landscape) 해상도가 639px 이하면 미적용
    • 가로(Landscape) 해상도가 640px 이상 적용 - 패블릿폰
  • 반응형을 지원 할 필요가 없다면
    • IE 환경에서는 일반적은 PC기준의 화면만 보여줌
반응형웹 대응 기기현황
반응형웹 대응 기기현황
단말기 해상도 브라우저 해상도 DevicePixelRatio
HTC EVO 4G 540*960 360*640 1.5
아트릭스폰 540*960 360*640 1.5
갤럭시탭 7 600*1024 400*683 1.5
갤럭시노트2 LTE 720*1280 360*640 2
옵티머스LTE 720*1280 360*640 2
옵티머스LTE2 720*1280 360*640 2
베가레이서2 720*1280 360*640 2
갤럭시넥서스 720*1280 360*640 2
갤럭시S3 3G 720*1280 360*640 2
갤럭시S3 LTE 720*1280 360*640 2
갤럭시S3 720*1280 360*640 2
옵티머스G LTE 768*1280 384*640 2
베가LTE EX 800*1280 400*640 2
갤럭시노트 800*1280 400*640 2
베가LTE 800*1280 400*640 2
옵티머스G PRO 1080*1920 360*640 3
갤럭시S4 1080*1920 360*640 3
베가넘버6 1080*1920 360*600 3
갤럭시노트3 1080*1920 360*640 3
LG 옵티머스 G2 1080*1920 360*640 3
LG 옵티머스 G3 1440 X 2560 360*640 4
갤럭시S5 1080 X 1920 360*640 3
갤럭시S6 1440 X 2560 360*640 4
갤럭시S7 1440 X 2560 360*640 4
아이폰6 750 X 1334 375 X 667 2
아이폰6 플러스 1080 X 1920 414 X 736 3
아이패드 1536*2048 768*1024 2

반응형웹(가로모드) 미대응 기기현황
단말기 해상도 브라우저 해상도 DevicePixelRatio
아이폰3GS 320*480 320*480 1
옵티머스원 320*480 320*480 1
갤럭시Ace 320*480 320*480 1
갤럭시S호핀 480*800 320*533 1.5
옵티머스3D큐브 480*800 320*533 1.5
갤럭시U 480*800 320*533 1.5
옵티머스2X 480*800 320*533 1.5
옵티머스블랙 480*800 320*533 1.5
베가레이서 480*800 320*533 1.5
베가X 480*800 320*533 1.5
베가S 480*800 320*533 1.5
옵티머스3D 480*800 320*533 1.5
옵티머스빅 480*800 320*533 1.5
프라다3.0 480*800 320*533 1.5
갤럭시M스타일 480*800 320*533 1.5
옵티머스LTE tag 480*800 320*533 1.5
갤럭시S2 480*800 320*533 1.5
갤럭시K 480*800 320*533 1.5
미라크폰 480*800 320*533 1.5
베가넘버5 480*800 320*533 1.5
갤럭시S 480*800 320*533 1.5
갤럭시S2 HD LTE 480*800 320*533 1.5
갤럭시S2 LTE 480*800 320*533 1.5
넥서스S 480*800 320*533 1.5
아이폰4 640*960 320*480 2
아이폰4S 640*960 320*480 2
아이팟 640*960 320*480 2
아이폰5 640*1136 320*568 2
옵티머스뷰 768*1024 439*585 1.75
옵티머스뷰2 768*1024 439*585 1.75
orientation 속성 Android 이슈 (Android 모든버전 해당)
@media all and (orientation:portrait){ … } /* 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행 */
@media all and (orientation:landscape){ … } /* 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행 */
  • 정상화면
    세로모드 (orientation:portrait)
    세로모드 (orientation:portrait) 에서 가운데 별은 빨강색.

    세로모드
    가로모드 (orientation:landscape)
    가로모드 (orientation:landscape) 에서 가운데 별은 파랑색

    가로모드
  • 이슈화면 (패드가 올라온다면?!)
    이슈화면
    • 키패드가 올라온 아래화면은 세로모드 (orientation:portrait) 인데, 가운데 별은 파랑색으로 표시됨.
    • Android의 가로,세로비의 계산은 native 해상도나 브라우저 해상도가 아닌 키패드를 제외한 브라우저에서 실제보이는 영역(viewport)를 기준으로 한다.
    • 즉, (아래화면) 초록색 테두리만 본다면 가로 (720px) 가 세로 (685px) 보다 넓으므로 가로모드로 인식해버리는 이슈이다.
    이슈화면

지금까지 반응형웹 이슈에 대해 살펴봤습니다.
다음 시간에는 "CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용"에 대해
공유드리도록 하겠습니다.
감사합니다.



by. UI개발팀 lemona


저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

flexbox  (0) 2016.09.30
반응형 웹 4/4  (0) 2016.09.09
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글