CSS 미디어 쿼리 - 반응형 웹 만들기

미디어 쿼리는 반응형 웹을 만들기 위한 필수 기술 입니다.

그럼 미디어 쿼리에 대하여 알아 보도록 하겠습니다.

미디어 쿼리 기본 구조

@media only all and (조건문) {실행문}

@media 미디어 쿼리를 선언하는 부분입니다
only(생략가능) 다음과 같은(뒤에오는) 조건일 때만 적용하겠다라는 의미의 설정 값 입니다. 기본 설정 값이며 다른 설정 값으로는 not가 있습니다. not 는 뒤에 오는 조건이 아닌 경우를 의미하는 설정 값 입니다.
all(생략가능) 은 모든 미디어 타입에 적용된다는 의미 입니다. 다른 설정 값으로는 screen, print 등이 있습니다.
and(생략가능) 조건이 모두 만족 할 경우를 의미하면 반대 의미로 or 이 있습니다
(조건문) 실행문이 적용 될 조건을 설정 합니다.
조건문에는 orientation:portrait(세로모드 일 때) / orientation:landscape(가로모드 일 때) / min-width:300px(너비가 300px 이상일 때) / max-width:500px(너비가 500px 보다 이하 일 때) 등으로 지정 할 수 있습니다.
{실행문} 조건에 만족 할 경우, 적용 될 CSS 코드를 작성 합니다.

예제

<!DOCTYPE html>
<html>
<head>
<title>미디어 쿼리</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    @media only screen and (mix-width:500px) and (max-width:799px){
      div {font-size : 22px;}
    }
    @media only screen and (max-width:499px) {
      div {font-size : 14px;}
    }
</style>
</head>
<body>
<div>테스트 입니다.</div>

</body>
</html>

예제 결과

브라우저의 너비에 따라 적용되는 CSS코드 값을 확인 할 수 있습니다.

미디어쿼리 예제 결과1

미디어쿼리 예제 결과2

미디어쿼리 예제 결과3

미디어 쿼리는 반응형 웹을 만들기 위한 아주 중요한 역할을 합니다.

이제 미디어 쿼리와 이전에 포스팅 한 뷰포트에 대하여 알았다면 반응형 웹을 만들 수 있을 것 입니다.

2018/06/01 - [유유 IT로그/웹디자인] - [반응형웹 만드는 방법] viewport 메타태그 활용

저작자표시 비영리 변경금지

' IT > 웹디자인' 카테고리의 다른 글

[HTML/CSS] 텍스트박스 꾸미기(기초) (1)	2018.06.08
HTML 콤보박스 선택 시 페이지 이동하기 (2)	2018.06.06
[반응형웹 만드는 방법] viewport 메타태그 활용 (1)	2018.06.01
HTML 링크 태그 사용법 / CSS 링크색상 지정하기 (3)	2018.05.31
HTML 문서 입력 창 만들기 / textarea 태그 (2)	2018.05.28