CSS3 버튼
CSS3 버튼(button)
CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있습니다.
CSS에서 버튼은 <button>태그 뿐만 아니라 <a>태그와 <input>태그로도 만들 수 있습니다.
예)
<button class="btn">button 태그</button>
<a href="#" class="btn">a 태그</a>
<input type="button" value="input 태그" class="btn">
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>
다양한 형태의 버튼 예제
CSS의 애니메이션(animation) 효과를 이용하면, 버튼에 더욱 다양한 효과를 적용할 수 있습니다.
다음 예제는 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제입니다.
예)
<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 효과를 이용하여 버튼의 위치를 아래로 살짝 이동시킵니다.
이렇게 함으로써 버튼이 진짜로 눌리는 듯한 효과를 줄 수 있게 됩니다.
사용자 인터페이스(user interface, UI)
CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해줍니다.
사용자 인터페이스(user interface)를 위해 제공되는 속성은 다음과 같습니다.
1. resize
2. outline-offset
3. box-sizing
4. nav-index
5. nav-left
6. nav-right
7. nav-up
8. nav-down
resize 속성
resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해줍니다.
예)
<style>
#width { resize: horizontal; }
#height { resize: vertical; }
#both { resize: both; }
</style>
위의 예제처럼 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생깁니다.
이 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절할 수 있습니다.
resize 속성은 익스플로러에서 지원하지 않습니다.
outline-offset 속성
outline-offset 속성은 해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가해 줍니다.
아웃라인(outline)과 테두리(border)의 차이는 다음과 같습니다.
1. 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인입니다.
2. 아웃라인은 HTML 요소의 크기에 포함되지 않습니다.
3. 아웃라인은 사각형이 아닐 수도 있습니다.
다음 예제는 outline-offset 속성을 이용하여 아웃라인과 테두리를 확인하는 예제입니다.
예)
<style>
div {
border: 1px solid black;
outline: 1px solid red;
outline-offset: 20px;
}
</style>
outline-offset 속성은 익스플로러에서 지원하지 않습니다.
box-sizing 속성
box-sizing 속성은 해당 요소의 너비(width)와 높이(height)에 패딩(padding)과 테두리(border)의 크기까지 포함시킵니다.
예
<style>
#no_border_box { border: 10px solid green; padding: 20px; }
#border_box { border: 10px solid red; padding: 20px; box-sizing: border-box; }
</style>
CSS 박스 모델에서 살펴본 HTML 요소의 전체 너비를 구하는 공식은 다음과 같습니다.
width + left padding + right padding + left border + right border + left margin + right margin
따라서 위의 예제에서 첫 번째 div 요소의 전체 너비는 다음과 같이 설정됩니다.
350px + 20px + 20px + 10px + 10px + 10px + 10px = 430px
하지만 box-sizing 속성의 속성값을 border-box로 설정하면, 해당 요소의 총 너비와 높이에 패딩과 테두리의 크기까지 포함해서 설정합니다.
따라서 위의 예제에서 두 번째 div 요소의 전체 너비는 다음과 같이 설정될 것입니다.
350px + 10px + 10px = 370px
다중 칼럼(multi-column) 레이아웃
CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있습니다.
다중 칼럼(multi-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
column-count 속성
column-count 속성은 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정합니다.
예)
<style>
#origin { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
</style>
column-gap 속성
column-gap 속성은 칼럼(column) 사이의 간격을 설정합니다.
예)
<style>
#gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; }
</style>
column-width 속성
column-width 속성은 칼럼의 너비를 설정합니다.
웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정합니다.
예)
<style>
#gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; }
</style>
column-span 속성
column-span 속성은 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정합니다.
예)
<style>
#merge { -webkit-column-span: all; column-span: all; }
</style>
column-count 속성은 파이어폭스와 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.
column-rule-style 속성
column-rule-style 속성은 칼럼 사이에 들어갈 라인의 스타일을 설정합니다.
예)
<style>
#line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
</style>
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>
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>
column-rule 속성
모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
예)
<style>
#line {
-webkit-column-rule: 5px solid #6495ED;
-moz-column-rule: 5px solid #6495ED;
column-rule: 5px solid #6495ED;
}
</style>
플렉서블 박스(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)를 위해 제공되는 속성은 다음과 같습니다.
8. order
9. align-self
10. flex
플렉스 박스(flex box)의 개념
플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성됩니다.
플렉스 컨테이너(flex container)는 해당 HTML 요소의 display 속성을 설정하는 것으로 정의할 수 있습니다.
해당 요소를 블록 타입으로 정의하려면 display 속성값을 flex로, 인라인 타입으로 정의하려면 inline-flex로 설정합니다.
플렉스 컨테이너는 언제나 하나 이상의 플렉스 요소를 포함해야 합니다.
플렉스 컨테이너의 외부와 플렉스 요소의 내부의 모든 것들은 평소처럼 동작합니다.
플렉스 박스(flex box)는 오직 플렉스 요소가 플렉스 컨테이너의 내부에서 어떻게 위치하는가만을 정의합니다.
플렉스 요소는 플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 위치하게 됩니다.
기본적으로 하나의 플렉스 컨테이너는 오직 단 하나의 플렉스 라인만을 가지고 있습니다.
예)
<style>
#flex { display: -webkit-flex; display: flex; }
</style>
direction 속성을 이용하면 이러한 플렉스 라인(flex line)의 방향을 바꿀 수도 있습니다.
direction 속성값이 rtl(right-to-left)로 설정되면, 페이지 내의 모든 텍스트 요소는 오른쪽에서 왼쪽 방향으로 써집니다.
그와 동시에 플렉스 라인(flex line)의 방향도 바뀌게 되어, 플렉스 요소의 정렬도 오른쪽에서 왼쪽으로 바뀌게 됩니다.
예)
<style>
body { direction: rtl; }
#flex { display: -webkit-flex; display: flex; }
</style>
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>
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>
align-items 속성
align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정합니다.
이 속성은 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있습니다.
이 속성은 다음과 같은 속성값을 가질 수 있습니다.
1. stretch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.
2. flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.
3. flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.
4. center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.
5. baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(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>
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>
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>
플렉스 요소(flex item)의 order 속성
order 속성은 플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정합니다.
예)
<style>
#first { -webkit-order: -1; order: -1; }
</style>
플렉스 요소(flex item)의 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>
플렉스 요소(flex item)의 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>
플렉스 요소(flex item)의 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>
미디어 쿼리(media query)
CSS2에서는 @media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원합니다.
예를 들면, HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용할 수 있습니다.
CSS3에서는 @media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있습니다.
미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다.
미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 알맞은 형태로 스타일이 조정됩니다.
미디어 쿼리 문법
다음은 같은 파일 내의 <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에서 정의된 것을 그대로 사용하고 있습니다.
CSS3 미디어 쿼리(media query) 예제
다음 예제는 뷰포트의 너비가 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>
이처럼 미디어 쿼리를 이용하면 매체에 따라 다른 동작을 하도록 손쉽게 설정할 수 있습니다.
댓글