smarti,스마트아이

CSS3 flexible-box, media-query

Flexible box 레이아웃

플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델이다.
이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다.

 

 

 

 

플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같다.

1. display
2. flex-direction
3. justify-content
4. align-items
5. flex-wrap
6. flex-flow
7. align-content

또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같다.

1. order
2. align-self
3. flex

CSS3 Flex box 지원 버전

CSS3 플렉스 박스(flex box)를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
column-count / column-cap / column-rule / column-rule-color / column-rule-style / column-rule-width / column-width	10.0	50.0 / 4.0 -webkit-	2.0 -moz-	9.0 / 3.1 -webkit-	37.0 / 15.0 -webkit- / 11.1
column-span	10.0	50.0 / 4.0 -webkit-	지원하지 않음	9.0 / 3.1 -webkit-	37.0 / 15.0 -webkit- / 11.1

플레스 박스(flex box)의 개념

플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성된다.

플렉스 컨테이너(flex container)는 해당 HTML 요소의 display 속성을 설정하는 것으로 정의할 수 있다.
해당 요소를 블록 타입으로 정의하려면 display 속성값을 flex로, 인라인 타입으로 정의하려면 inline-flex로 설정한다.
플렉스 컨테이너는 언제나 하나 이상의 플렉스 요소를 포함해야 한다.

플렉스 컨테이너의 외부와 플렉스 요소의 내부의 모든 것들은 평소처럼 동작한다
플렉스 박스(flex box)는 오직 플렉스 요소가 플렉스 컨테이너의 내부에서 어떻게 위치하는가만을 정의한다.

플렉스 요소는 플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 위치하게 된다.
기본적으로 하나의 플렉스 컨테이너는 오직 단 하나의 플렉스 라인만을 가지고 있다.

#flex { display: -webkit-flex; display: flex; }

direction 속성을 이용하면 이러한 플렉스 라인(flex line)의 방향을 바꿀 수도 있다.
direction 속성값이 rtl(right-to-left)로 설정되면, 페이지 내의 모든 텍스트 요소는 오른쪽에서 왼쪽 방향으로 써진다.
그와 동시에 플렉스 라인(flex line)의 방향도 바뀌게 되어, 플렉스 요소의 정렬도 오른쪽에서 왼쪽으로 바뀌게 된다.

body { direction: rtl; }
#flex { display: -webkit-flex; display: flex; }

 

 

 

 

 

 

 

 

flex-direction 속성

flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정한다.
이 속성은 다음과 같은 속성값을 가질 수 있다.

1. row : 기본 설정으로, 플렉스 요소는 왼쪽에서 오른쪽으로, 그리고 위쪽에서 아래쪽으로 배치된다.
2. row-reverse : 만약에 direction 속성값이 ltr(left-to-right)이면, 플렉스 요소는 반대로 오른쪽에서 왼쪽으로 배치된다.
3. column : 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치된다.
4. column-reverse : 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치된다.

다음 예제는 flex-direction 속성의 row와 row-reverse 속성값을 이용한 예제이다.

 #row_reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }

다음 예제는 flex-direction 속성의 column과 column-reverse 속성값을 이용한 예제이다.

#column { -webkit-flex-direction: column; flex-direction: column; }
#column_reverse { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }

justify-content 속성

justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정한다.
이 속성은 다음과 같은 속성값을 가질 수 있다.

1. flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치된다.
2. flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치된다.
3. center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치된다.
4. space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치된다.
5. space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치된다.

다음 예제는 justify-content 속성의 flex-start와 flex-end 속성값을 이용한 예제이다.

#row_reverse { -webkit-justify-content: flex-end; justify-content: flex-end; }

다음 예제는 justify-content 속성의 center, space-between과 flex-end 속성값을 이용한 예제이다.

#center { -webkit-justify-content: center; justify-content: center; }
#between { -webkit-justify-content: space-between; justify-content: space-between; }
#around { -webkit-justify-content: space-around; justify-content: space-around; }

align-item 속성

align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정한다.
이 속성은 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있다.
이 속성은 다음과 같은 속성값을 가질 수 있다.

1. stretch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치된다.
2. flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치된다.
3. flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치된다.
4. center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치된다.
5. baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치된다.

다음 예제는 align-items 속성의 flex-start, center와 flex-end 속성값을 이용한 예제이다.

#start { -webkit-align-items: flex-start; align-items: flex-start; }
#center { -webkit-align-items: center; align-items: center; }
#end { -webkit-align-items: flex-end; align-items: flex-end; }

다음 예제는 align-items 속성의 stretch와 baseline 속성값을 이용한 예제이다.

#stretch { -webkit-align-items: stretch; align-items: stretch; }
#base { -webkit-align-items: baseline; align-items: baseline; }

flex-wrap 속성

flex-wrap 속성은 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정한다.
이 속성은 다음과 같은 속성값을 가질 수 있다.

1. nowrap : 기본 설정으로, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 대신에 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킨다.
2. wrap : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치된다.
3. wrap-reverse : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치된다. 단, 아래쪽이 아닌 위쪽으로 넘어간다.

#wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
#wrap_reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }

align-content 속성

align-content 속성은 flex-wrap 속성의 동작을 변경할 수 있다.
이 속성은 align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬한다.
이 속성은 다음과 같은 속성값을 가질 수 있다.

1. stretch : 기본 설정으로, 플렉스 라인의 높이가 남는 공간을 전부 차지하게 된다.
2. flex-start : 플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉치게 된다.
3. flex-end : 플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉치게 된다.
4. center : 플렉스 라인은 플렉스 컨테이너의 가운데에 뭉치게 된다.
5. space-between : 플렉스 라인은 플렉스 컨테이너에 고르게 분포된다.
6. space-around : 플렉스 라인은 플렉스 컨테이너에 고르게 분포됩니다. 단, 양쪽 끝에 약간의 공간을 남겨둔다.

다음 예제는 align-content 속성의 stretch, space-between과 space-around 속성값을 이용한 예제이다.

#space_between { -webkit-align-content: space-between; align-content: space-between; }
#space_around { -webkit-align-content: space-around; align-content: space-around; }

다음 예제는 align-content 속성의 flex-start, center와 flex-end 속성값을 이용한 예제이다.

#flex_start { -webkit-align-content: flex-start; align-content: flex-start; }
#center { -webkit-align-content: center; align-content: center; }
#flex_end { -webkit-align-content: flex-end; align-content: flex-end; }

플렉스 요소(flex item)의 order 속성

order 속성은 플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정한다.

#first { -webkit-order: -1; order: -1; }

플렉스 요소의 margin 속성

margin 속성값을 auto로 설정하면, 수평 방향의 여유 공간을 없앨 수 있다. 이 속성을 이용하면 플렉스 요소들을 서로 반대 방향으로 밀어내 위치시킬 수 있다.

#first .item:nth-child(1) { margin-right: auto; }
#second .item:nth-child(2) { margin-right: auto; }

또한, margin 속성을 이용하여 수직과 수평 방향의 가운데 정렬을 손쉽게 설정할 수도 있다.

.item { width: 80px; height: 50px; margin: auto; }

플렉스 요소(flex item)의 align-self 속성

align-self 속성은 플렉스 컨테이너의 align-items 속성보다 우선 적용된다. 이 속성을 이용하면 플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있다.

.item:nth-child(2) { -webkit-align-self: flex-start; align-self: flex-start; }
.item:nth-child(3) { -webkit-align-self: flex-end; align-self: flex-end; }
.item:nth-child(4) { -webkit-align-self: center; align-self: center; }
.item:nth-child(5) { -webkit-align-self: baseline; align-self: baseline; }

플렉스 요소(flex item)의 flex 속성

flex 속성을 이용하면 같은 플렉스 컨테이너 안에 있는 플렉스 요소의 너비를 상대적으로 설정할 수 있다.

다음 예제에서 첫 번째 플렉스 요소는 전체 너비의 3/5을 차지하며, 나머지 두 요소는 각각 전체 너비의 1/5씩을 차지하게 된다.

.item:nth-child(1) { -webkit-flex: 3; flex: 3; }
.item:nth-child(2) { -webkit-flex: 1; flex: 1; }
.item:nth-child(3) { -webkit-flex: 1; flex: 1; }

CSS3  플렉서블 박스(flexible box) 속성

속성	설명
display	HTML 요소에 대한 박스의 타입을 명시함.
flex-direction	플렉스 컨테이너(flex container)안의 플렉스 요소(flex item)가 위치할 방향을 설정함.
justify-content	플렉스 요소의 수평 방향 정렬 방식을 설정함.
align-items	플렉스 요소의 수직 방향 정렬 방식을 설정함.
flex-wrap	플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정함.
flex-flow	flex-direction 속성과 flex-wrap 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
align-content	flex-wrap 속성의 동작을 변경할 수 있으며, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬함.
order	플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정함.
align-self	플렉스 요소마다 서로 다른 align 속성값을 설정함.
flex	같은 플렉스 컨테이너 안에 있는 플렉스 요소의 너비를 상대적으로 설정함.

 

 

 

 

 

Media query

CSS2에서는 @media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원한다.
예를 들면, HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용할 수 있다.

CSS3에서는 @media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있다.
미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있다.
미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 알맞은 형태로 스타일이 조정된다.

CSS3 미디어 쿼리 지원 버전

CSS3 미디어 쿼리(media query)를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

규칙	ie	chrome	firefox	safari	opera
@media	9.0	21.0	3.5	4.0	9.0

미디어 쿼리 문법

다음은 같은 파일 내의 <style>태그 안에 미디어 쿼리가 위치할 경우의 문법이다.

문법 : @media only|not 매체유형 and (표현식) { CSS스타일코드; }

또 다른 방법으로는 외부 CSS 파일에 미디어 쿼리를 따로 저장할 수도 있다.

문법 : <link rel="stylesheet" media="매체유형 and|only|not (표현식)" href="CSS파일URL"/>

만약 웹 페이지에 접속하고 있는 기기의 매체 유형과 명시된 매체 유형이 일치하고, 모든 표현식이 참(true)이면, 미디어 쿼리는 참(true)을 반환한다.
이렇게 미디어 쿼리의 반환값이 참이면, 해당 블록 안에 명시된 CSS 스타일 코드가 실행됩니다.
여기에 and, only, not 등과 같은 키워드를 사용하여 더욱 복잡한 조건을 명시할 수도 있다.

CSS3 매체 유형(media type)

CSS3의 매체 유형은 이전 CSS2에서 정의된 것을 그대로 사용하고 있다.
다음은 자주 사용되는 매체 유형(media type)이다.

매체 유형	설명
all	모든 매체에 사용함.
print	프린터 기기에 사용함.
screen	컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함.
speech	웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함.

CSS3 미디어 쿼리(media query) 속성

속성	설명
width	화면의 너비
height	화면의 높이
device-width	매체 화면의 너비
device-height	매체 화면의 높이
devie-aspect-ratio	매체 화면의 비율
orientation	매체 화면의 방향
color	매체의 색상 비트 수
color-index	매체에서 표현 가능한 색상의 개수
monochrome	흑백 매체에서의 픽셀당 비트 수
resolution	매체의 해상도

위의 속성 중에서 orientation 속성을 제외한 모든 속성의 앞에는 min 또는 max 접두사를 사용할 수 있다. 위의 속성들을 적절히 활용하면 반응형 웹 사이트를 손쉽게 제작할 수 있다.

CSS3 미디어 쿼리

다음 예제는 뷰포트(viewport)의 너비가 480픽셀이거나 그 이상일 경우에 배경색을 darkorange로 표현해 준다.
하지만 뷰포트의 너비가 그 이하일 경우에는 배경색을 lightblue로 변경한다.

body { background-color: darkorange; }
@media screen and (min-width: 480px) {
    body { background-color: lightblue; }
}

다음 예제를 웹 브라우저에서 실행하면 배경색을 검정색으로, 텍스트의 색상은 흰색으로 표현한다. 하지만 웹 페이지를 프린트하게 되면 배경색을 흰색으로, 텍스트의 색상을 검정색으로 바꿔서 프린트한다.

@media screen {
    body { background-color: black; color: white; }
}
@media print {
    body { background-color: white; color: black; }
}

이처럼 미디어 쿼리를 이용하면 매체에 따라 다른 동작을 하도록 손쉽게 설정할 수 있다.

 

[코딩공부] - CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

[세상살이] - 온라인에서 무료로 이미지, 동영상 용량 줄이기

온라인에서 무료로 이미지, 동영상 용량 줄이기

[세상살이] - 바둑에 담긴 지혜

바둑에 담긴 지혜

[세상살이] - 포스타입, 창작과 수익

포스타입, 창작과 수익

[코딩공부] - 아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10

아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10