Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

JIE0025

[CSS] @media 미디어쿼리를 알아보자 본문

기타 학습/기획, UI, UX

[CSS] @media 미디어쿼리를 알아보자

Kangjieun11 2021. 3. 9. 02:42
728x90

반응형 웹을 배울 때 가장 기초라고 생각되는 것이 바로 미디어 쿼리 문법이다.

 

@media 쿼리를 사용함으로써 장치나 화면 비율에 따른 다른 레이아웃 디자인을 할 수 있다. 

 

먼저 예제를 통해 사용방법을 구경해보자.

 

-----------------------------------------------------------------

<css 내부 삽입>

style sheet 내부나 css 파일에다가 작성한다.

@media 
and (min-width : 100px)
and (max-width : 700px)
{
.container{
    background-color:#00ff00;
    transition-property: background-color 0.5s;
}
}

@media 다음에 and 가 나와있는것을 볼 수 있다. 

이는 '연산자'라고 부른다. 

 

 

 연산자 

and : 미디어 특징 여러개를 하나로 결합
  ,  : 쉼표로 분리 함. 개별 미디어 쿼리
not : 전체 미디어 쿼리를 부정
only : 미디어쿼리를 지원하지 않는 브라우저에게 주어진 스타일을 적용하는 것을 방지함.

* not, only 사용지 반드시 Media Type을 지정해야한다.

 Media Type 

all : 모든 미디어 장치

screen : 모니터, 스마트폰, 태블릿

speech : 페이지를 읽어주는 디바이스

 

 

1) and

새로운 특징을 추가할 때마다 and를 사용하면 된다. 

css내부삽입 예제에서도 두번 사용되었음을 확인할 수 있다.

 

브라우저의 창 크기가 100px이상, 700px이하가 되었을 때 조건을 실행한다.

@media 
and (min-width : 100px)
and (max-width : 700px)
{ //조건 }

 

2)  ,  

여러개의 쿼리 스타일을 적용해야할 경우 쉼표를 사용한다.

@media (min-height: 680px), screen and (orientation: portrait) { ... }

모든 유형의 장치 , 창크기가 680 이상일때 적용하거나,  컴퓨터 스크린이 세로모드일 때 적용한다.

 

3)not

@media not all and(color) {...}

@media not (all and (color)) {...} 과 같은 말이다.

모든 색상장치에서 적용하지 않는다는 의미이다. 

 

4)only

미디어 쿼리 지원하는 에이전트만 미디어 쿼리 구문을 해석하라는 명령.

생략 가능(기본 값 only)

 

<link 연결>

<link rel="stylesheet" media="(max-width:700px)" href="css.css"/>

 

media feature

1) width : 화면 너비 

@media(min-width:300px){...}

 

2) height : 화면 높이

@media(height:750px){...}

 

3) device-width : 출력장치 너비

 

 

4) device-height : 출력장치 높이

 

 

5) color : 출력 장치의 색상 구성요소 당 비트 수

@media all and (color) { … } // 출력 장치가 컬러를 지원하면
@media all and (color:0) { … } // 출력 장치가 컬러가 아니면
@media all and (color:8) { … } // 출력 장치가 8비트 색상이면
@media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면
@media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

 

6) device-aspect-ratio : 출력장치의 가로 세로 비

 

 

7) aspect-ratio : 화면의 가로 세로 비

 

 

8) color-index : 표현 할 수 있는 색상의 개수 ( 출력장치가 색상 색인 테이블 사용할 때 )

색상색인 테이블 사용 하지 않는 장치일 경우 0의 값에 대응. 

제대로 지원하는 브라우저가 없다고 한다.

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용시 실행
@media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용 안하면 실행
@media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원 시 실행
@media all and (color-index:256) { … } // 출력 장치가 256 색을 지원 시 실행

 

 

9) monochrome : 출력 장치가 흑백일 때 픽셀 당 비트 수

흑백 장치가 아닐 경우에는 0의 값에 대응함.

@media all and (monochrome) { … } // 흑백장치일때 실행
@media all and (monochrome:0) { … } // 흑백장치가 아닐 때 실행
@media all and (min-monochrome:2) { … } // 흑백장치에, 2비트 이상일 때 실행

 

10) orientation : 가로 세로 지정 landscape(가로), portrait (세로) 

@media all and (orientation:portrait){...} //세로모드

 

11) resolution : 출력 장치의 해상도

min max 접두사 : 사각형 아닌 픽셀에도 대응 가능함.

접두사X : 사각형 픽셀 화소에만 대응함.

dpi, dpcm 단위 사용가능

@media all and (resolution:100dpi) { … } // 1인치당 100개의 사각형 화소를 제공시 실행
@media all and (min-resolution:100dpi) { … } // 1인치당 100개 이상의 화소를 제공시 실행

 

12) grid : 출력 장치가 그리드 방식일 때 대응, 값은 0과 1 뿐이다.  default값은 1이다. 

@media all and (grid) { … } // 출력 장치가 그리드 방식이면 실행
@media all and (grid:0) { … } // 그리드 방식이 아니면
@media all and (grid:1) { … } // 그리드 방식이면 

 

13) scan : TV 스캔 방식 (progressive or interlace)

progressive : 초당 60 회 정도의 고화질 스캔

interlace : 초당 30회 정도의 보통 스캔

@media tv and (scan:progressive) { … }

 

 

다음 코드는 미디어 쿼리를 이용하여 작성한 예제 이다.

브라우저 크기 width 기준 100px 이상, 720px일 때 배경색과 글자색이 변하며, 글자를 찾을 수 있다.

 


index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>find me</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="container">
        <h1 id = "hint">find me!</h1>
    </div>
</body>
</html>

css.css

* {
    margin: 0;
    padding: 0;
}


html, body{
    width: 100%;
    height: 100%;
}


.container{
    display:table;
    width: 100%;
    height: 100%;
    background-color:#0000ff;
}


#hint{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    line-height: 50%;
    color:#0000ff;
}


@media screen
and (min-width : 100px)


and (max-width : 720px)
{
.container{
    background-color:#00ff00;
    transition-property: background-color 0.5s;
}


#hint{
    color:#00ff00;
    transition-property: color 0.5s;
}


.container:hover {
    background-color: #ff0000;
}
#hint:hover{
    color:#ffffff;
}
}

 

 

1) 브라우저 창 크기 조건이 맞지 않아 배경색이 파랑색이다.

 

 

2) 브라우저 창크기를 width 기준으로 100px. 720px 사이로 하니, 배경색이 초록색으로 바뀌었다. 마우스를 가져다 대면 배경색이 빨강색으로 변하면서 글자를 찾을 수 있다.

 

 

 

저작자표시 비영리

'기타 학습 > 기획, UI, UX' 카테고리의 다른 글

[화면기획][Figma] FLAG - 카테고리 구현 목적  (0) 2022.12.13
[문서화][Figma] FLAG - 메뉴 구성도 작성  (0) 2022.12.10
[UI설계][Figma] FLAG - POST/REPLY UI 개선 및 요구사항 추가  (0) 2022.12.04
[UI설계][Figma] FLAG - UI 개선  (0) 2022.12.04
[PYQT5] .ui 파일을 .py로 변환하는 방법  (0) 2020.08.30
'기타 학습/기획, UI, UX' Related Articles more