[days02] 복습 - 1) optgroup / 2) 미디어 쿼리 설정

 1. optgroup  

옵션 분류하기

 

 

 

<select name="" id="">
	<optgroup label="1조">
		<option >김1</option>
		<option >김2</option>
		<option >김3</option>
	</optgroup>
	<optgroup label="2조">
		<option >이1</option>
		<option >이2</option>
		<option >이3</option>
	</optgroup>
</select>

 

 

 

 

 

 2. 미디어 쿼리 설정 

 

미디어쿼리(media query) 기능 ? 미디어 타입에 따라 CSS를 적용할 수 있는 기능
 현재나온 브라우저들은 미디어 쿼리 기능을 제공한다.
미디어 타입 ? 장치(프린터, 데스크톱, 스마트폰, 태블릿PC 등)

 

 

미디어 쿼리는 2가지 방법으로 사용할 수 있다. ( @media 규칙과 media 속성 )

 

@-규칙-rule이란 스타일 시트 내부에서 특정한 규칙을 표현하는데 사용

    ex) @import 규칙, @font-face 규칙 등

@media(<미디어 쿼리>){
	<CSS 코드>
}

 

media 속성은 link 태그에 입력해서 해당 미디어 쿼리 조건에 맞는 장치에서만 CSS 파일을 불러올 때 사용

<link rel="stylesheet" href="<파일명>" media="<미디어쿼리>">

 

<style>
@media screen{
	body{ background: red;}
}

@media print{ /* 출력시 */
	body{background: green;}
}
</style>

<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" /> 

 

 

HTML이 지원하는 미디어 타입
all 모든 장치
screen 화면
print 프린터

미디어 타입 연산자
only  해당 장치만 표시
not  해당 장치 제외

미디어 특징
width, height, ...
and 연산자를 사용해서 조건을 합칠 수 있다.

<style>
/* 스마트폰 */
@media screen and(max-width:767px){
	body{ background: red;}
}

/* 태블릿pc 세로 */
@media screen and(min-width: 768px) and (max-width:959px;){
	body{ background: green;}
}
/* 데스크톱 */
@media screen and (min-width:960px){
	body{ background: blue;}
}

</style>