9. CSS3 확장

---

1. 키워드

• CSS3 버튼(Button)
• 사용자 인터페이스(UI, User Interface)
• 다중 칼럼(Multi-column) 레이아웃
• 플레서블 박스(Flexible Box) 레이아웃
• 미디어 쿼리(Media Query)

2. CSS 버튼

• CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있다.
• CSS에서 버튼은 <button> 태그 뿐만 아니라 <a> 태그와 <input> 태그로도 만들 수 있다.

<button class="btn">button 태그</button>

<a href="#" class="btn">a 태그</a>

<input type="button" value="input 태그" class="btn" />

Note

• button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정할 수 있다.

• 다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제이다.

<style>
  .btn {
    background-color: #87ceeb;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .btn1:hover,
  .btn2:hover,
  .btn3:hover,
  .btn4:hover {
    background-color: #4169e1;
    color: white;
  }
</style>

• 위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있다.

• 다음 예제는 그림자 효과를 설정한 버튼 예제이다.

<style>
  .btn {
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .btn1,
  .btn2:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
</style>

• 위의 예제처럼 box-shadow 속성을 이용하면, 버튼에 실제와 같은 그림자 효과를 간단히 설정할 수 있다.

• 다음 예제는 버튼을 사용하지 못하도록 설정하는 예제이다.

<style>
  .btn2 { opacity: 0.4; cursor: not-allowed; disabled; }
</style>

• 위의 예제처럼 disabled 속성을 이용하면, 버튼을 사용하지 못하도록 만들 수 있다.
• 이렇게 사용이 금지된 버튼은 반투명하게 보이게 된다.
• 이때 cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현할 수 있다.

• float 속성을 이용하여 버튼으로 메뉴를 만들 수도 있다.

<style>
  .btn {
    background-color: #87ceeb;
    border: solid 1px #00bfff;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    float: left;
  }
</style>

1) 다양한 형태의 버튼 예제

• CSS의 애니메이션 효과를 이용하면, 버튼에 더욱 다양한 효과를 적용할 수 있다.

• 다음 예제는 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제다.

<style>
  .btn span {
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }

  .btn span::after {
    content: "▶";
    opacity: 0;
    transition: 0.5s;
  }

  .btn:hover span::after {
    opacity: 1;
    right: 0px;
  }
</style>

• 위의 예제에서 '▶'기호는 ::after 선택자를 이용하여 '버튼'이라는 문자열 바로 뒤에 삽입된다.
• 이때 opacity 속성값을 0으로 설정하여 처음에는 보이지 않는다.
• 하지만 마우스를 버튼 위로 올리면, opacity 속성값이 1로 변경되어 눈에 보이게 된다.
• 이때 transition 효과가 실행되며 0.5초 동안 천천히 opacity 속성값이 변경된다.

• 다음 예제는 버튼을 누르면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제이다.

<style>
  .btn {
    background-color: orange;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .btn::after {
    content: "";
    background-color: #ffd700;
    display: block;
    opacity: 0;
    transition: all 0.8s;
  }

  .btn:active::after {
    opacity: 1;
    transition: 0s;
  }
</style>

• 위의 예제는 :active 선택자와 ::after 선택자를 이용하여 transition 효과를 설정함으로써 구현하고 있다.

• 다음 예제는 진짜 버튼처럼 누르는 효과를 적용한 버튼 예제이다.

<style>
  .btn {
    background-color: orange;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 20px;
    box-shadow: 0 9px #b0b0b0;
  }

  .btn:active {
    background-color: #ff8c00;
    box-shadow: 0 5px #808080;
    transform: translateY(4px);
  }
</style>

• 위의 예제에서는 우선 box-shadow 속성을 이용하여 버튼에 그림자 효과를 설정한다.
• 그 후에 사용자가 버튼을 누르면 :active 선택자와 transform 효과를 이용하여 버튼의 위치를 아래로 살짝 이동시킨다.
• 이렇게 함으로써 버튼이 진짜로 눌리는 듯한 효과를 줄 수 있게 된다.

3. 사용자 인터페이스

• CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해준다.

• 사용자 인터페이스를 위해 제공되는 속성은 다음과 같다.

1] resize

2] outline-offset

3] box-sizing

4] nav-index

5] nav-left

6] nav-right

7] nav-up

8] nav-down

1) resize 속성

• resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해준다.

<style>
  #width {
    resize: horizontal;
  }

  #height {
    resize: vertical;
  }

  #both {
    resize: both;
  }
</style>

• 위의 예제처럼 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생긴다.
• 이 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절할 수 있다.

2) outline-offset 속성

• outline-offset 속성은 해당 요소의 테두리와 아웃라인 사이에 공간을 추가해 준다.

• 아웃라인과 테두리의 차이는 다음과 같다.

1] 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인이다.

2] 아웃라인은 HTML 요소의 크기에 포함되지 않는다.

3] 아웃라인은 사각형이 아닐 수도 있다.

• 다음 예제는 outline-offset 속성을 이용하여 아웃라인과 테두리를 확인하는 예제이다.

<style>
  div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 20px;
  }
</style>

3) box-sizing 속성

• box-sizing 속성은 해당 요소의 너비와 높이에 패딩과 테두리의 크기까지 포함시킨다.

<style>
  #no_border_box {
    border: 10px solid green;
    padding: 20px;
  }

  #border_box {
    border: 10px solid red;
    padding: 20px;
    box-sizing: border-box;
  }
</style>

4) CSS3 사용자 인터페이스 속성

속성	설명
resize	사용자가 해당 요소의 높이나 너비를 변경할 수 있게 설정함.
outline-offset	해당 요소의 테두리와 아웃라인 사이에 공간을 추가함.
box-sizing	해당 요소의 총 너비와 높이에 패딩과 테두리의 너비도 포함시킴.
nav-index	해당 요소에 대한 순차적인 탐색 순서를 설정함.
nav-left	화살표 왼쪽 방향키를 누를 때 어디를 탐색할지 설정함.
nav-right	화살표 오른쪽 방향키를 누를 때 어디를 탐색할지 설정함.
nav-up	화살표 위쪽 방향키를 누를 때 어디를 탐색할지 설정함.
nav-down	화살표 아래쪽 방향키를 누를 때 어디를 탐색할지 설정함.

4. 다중 칼럼 레이아웃

• CSS에서는 신문과 같이 여러 개의 칼럼으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있다.

• 다중 칼럼을 위해 제공되는 속성은 다음과 같다.

1] columns

2] column-count

3] column-gap

4] column-width

5] column-span

6] column-fill

7] column-rule

8] column-rule-style

9] column-rule-width

10] column-rule-color

1) column-count 속성

• column-count 속성은 해당 요소를 몇 개의 칼럼으로 나눌지를 설정한다.

<style>
  #origin {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
</style>

2) column-gap 속성

• column-gap 속성은 칼럼 사이의 간격을 설정한다.

<style>
  #gap {
    -webkit-column-gap: 70px;
    -moz-column-gap: 70px;
    column-gap: 70px;
  }
</style>

3) column-width 속성

• column-width 속성은 칼럼의 너비를 설정한다.
• 웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정한다.

<style>
  #gap {
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
  }
</style>

4) column-span 속성

• column-span 속성은 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정한다.

<style>
  #merge {
    -webkit-column-span: all;
    column-span: all;
  }
</style>

5) column-rule-style 속성

• column-rule-style 속성은 칼럼 사이에 들어갈 라인의 스타일을 설정한다.

<style>
  #line {
    -webkit-column-rule-style: solid;
    -moz-column-rule-style: solid;
    column-rule-style: solid;
  }
</style>

6) column-rule-width 속성

• column-rule-width 속성은 칼럼 사이에 들어갈 라인의 두께를 설정한다.

<style>
  #line {
    -webkit-column-rule-style: solid;
    -moz-column-rule-style: solid;
    column-rule-style: solid;

    -webkit-column-rule-width: 5px;
    -moz-column-rule-width: 5px;
    column-rule-width: 5px;
  }
</style>

7) column-rule-color 속성

• column-rule-color 속성은 칼럼 사이에 들어갈 라인의 색상을 설정한다.

<style>
  #line {
    -webkit-column-rule-style: solid;
    -moz-column-rule-style: solid;
    column-rule-style: solid;

    -webkit-column-rule-width: 5px;
    -moz-column-rule-width: 5px;
    column-rule-width: 5px;

    -webkit-column-rule-color: #6495ed;
    -moz-column-rule-color: #6495ed;
    column-rule-color: #6495ed;
  }
</style>

8) column-rule 속성

• 모든 column-rule 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
  #line {
    -webkit-column-rule: 5px solid #6495ed;
    -moz-column-rule: 5px solid #6495ed;
    column-rule: 5px solid #6495ed;
  }
</style>

9) CSS3 다중 칼럼 속성

속성	설명
columns	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-count	해당 요소를 몇 개의 칼럼으로 나눌지를 설정함.
column-gap	칼럼 사이의 간격을 설정함.
column-width	칼럼의 너비를 설정함.
column-span	해당 요소가 몇 개의 칼럼을 병합해서 표현할지를 설정함.
column-fill	칼럼을 어떻게 채울지 설정함.
column-rule	모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
column-rule-style	칼럼 사이에 들어갈 라인의 스타일을 설정함.
column-rule-width	칼럼 사이에 들어갈 라인의 두께를 설정함.
column-rule-color	칼럼 사이에 들어갈 라인의 색상을 설정함.

5. 플렉서블 박스 레이아웃

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

• 플렉스 박스을 위해 제공되는 속성은 다음과 같다.

1] display

2] flex-direction

3] justify-content

4] align-items

5] flex-wrap

6] flex-flow

7] align-content

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

8] order

9] align-self

10] flex

1) 플렉스 박스의 개념

• 플렉스 박스는 플렉스 컨테이너와 플렉스 요소로 구성된다.

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

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

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

<style>
  #flex {
    display: -webkit-flex;
    display: flex;
  }
</style>

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

<style>
  body {
    direction: rtl;
  }

  #flex {
    display: -webkit-flex;
    display: flex;
  }
</style>

2) flex-direction 속성

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

1] row: 기본 설정으로, 플렉스 요소는 왼쪽에서 오른쪽으로, 그리고 위쪽에서 아래쪽으로 배치된다.

2] row-reverse: 만약에 direction 속성값이 ltr(left-to-right)이면, 플렉스 요소는 반대로 오른쪽에서 왼쪽으로 배치된다.

3] column: 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치된다.

4] column-reverse: 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치된다.

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

<style>
  #row_reverse {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
</style>

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

<style>
  #column {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  #column_reverse {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
</style>

3) justify-content 속성

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

1] flex-start: 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치된다.

2] flex-end: 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치된다.

3] center: 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치된다.

4] space-between: 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치된다.

5] space-around: 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치된다.

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

<style>
  #row_reverse {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
</style>

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

<style>
  #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;
  }
</style>

4) align-items 속성

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

1] stretch: 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치된다.

2] flex-start: 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치된다.

3] flex-end: 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치된다.

4] center: 플렉스 요소는 플렉스 컨테이너의 가운데에 배치된다.

5] baseline: 플렉스 요소는 플렉스 컨테이너의 기준선에 배치된다.

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

<style>
  #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;
  }
</style>

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

<style>
  #stretch {
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  #base {
    -webkit-align-items: baseline;
    align-items: baseline;
  }
</style>

5) flex-wrap 속성

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

1] nowrap: 기본 설정으로, 플렉스 요소가 다음 줄로 넘어가지 않는다. 대신에 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킨다.

2] wrap: 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치된다.

3] wrap-reverse: 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치된다. 단, 아래쪽이 아닌 위쪽으로 넘어간다.

<style>
  #wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #wrap_reverse {
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
  }
</style>

6) 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 속성값을 이용한 예제이다.

<style>
  #space_between {
    -webkit-align-content: space-between;
    align-content: space-between;
  }

  #space_around {
    -webkit-align-content: space-around;
    align-content: space-around;
  }
</style>

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

<style>
  #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;
  }
</style>

7) 플렉스 요소의 order 속성

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

<style>
  #first {
    -webkit-order: -1;
    order: -1;
  }
</style>

8) 플렉스 요소의 margin 속성

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

<style>
  #first .item:nth-child(1) {
    margin-right: auto;
  }

  #second .item:nth-child(2) {
    margin-right: auto;
  }
</style>

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

<style>
  .item {
    width: 80px;
    height: 50px;
    margin: auto;
  }
</style>

9) 플렉스 요소의 align-self 속성

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

<style>
  .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;
  }
</style>

10) 플렉스 요소의 flex 속성

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

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

<style>
  .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;
  }
</style>

11) CSS3 플렉서블 박스 속성

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

6. 미디어 쿼리

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

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

1) 미디어 쿼리 문법

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

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

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

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

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

2) CSS3 매체 유형(Media Type)

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

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

3) CSS3 미디어 쿼리 속성

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

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

4) CSS3 미디어 쿼리 예제

• 다음 예제는 뷰포트의 너비가 480픽셀이거나 그 이하일 경우에는 배경색을 darkorange로 표현해 준다.
• 하지만 뷰포트의 너비가 그 초과일 경우에는 배경색을 lightblue로 바꿔서 표현해 준다.

<style>
  body {
    background-color: darkorange;
  }

  @media screen and (min-width: 480px) {
    body {
      background-color: lightblue;
    }
  }
</style>

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

<style>
  @media screen {
    body {
      background-color: black;
      color: white;
    }
  }

  @media print {
    body {
      background-color: white;
      color: black;
    }
  }
</style>

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

---

References

• http://www.tcpschool.com/css/css3_expand_buttons
• http://www.tcpschool.com/css/css3_expand_ui
• http://www.tcpschool.com/css/css3_expand_multicolumn
• http://www.tcpschool.com/css/css3_expand_flexbox
• http://www.tcpschool.com/css/css3_expand_mq