미디어쿼리

Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		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

관리 메뉴

roqkf

미디어쿼리 본문

💻 Development/기록

미디어쿼리

ahyeon7 2023. 1. 16. 01:05

❤️‍🔥 미디어 쿼리

CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용시키는 게 가능해졌습니다. 그러나 기기의 특성을 정확히 판단하기 어렵다는 단점 때문에 널리 사용되지 않았으나, CSS3부터는 이 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 하였습니다. 이런 미디어 쿼리는 반응형 웹 디자인의 핵심 부분입니다. 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문입니다.

❤️‍🔥 미디어 쿼리 적용법

미디어 쿼리를 적용하는 방법에는 다음 방법들이 있습니다.

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

CSS 파일을 HTML 파일에 적용하던 것처럼 <head>태그 안에 <link>태그를 위치 시킵니다. 다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다는 점입니다. 미디어 속성 내 해당 조건을 만족할 때에만 해당 css 파일을 불러오게 됩니다.

<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>

HTML 파일 내 <head>태그 안에서 <style>태그를 열어 미디어 쿼리를 작성할 수도 있습니다. 이 방법도 미디어 속성 내 해당 조건을 만족할 때에만 해당 스타일을 적용하게 됩니다.

✨ CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

혹은 CSS 파일 안 또는 태그 안에서 직접 미디어 쿼리를 작성하여 해당 미디어 쿼리의 조건을 만족할 때 스타일을 적용시키는 방법도 있습니다.

❤️‍🔥 미디어 쿼리 구문

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

✨ 미디어 쿼리의 기본적인 구조

미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줍니다.
조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않습니다.
CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용 됩니다.

✨ 미디어 타입(Media Type)

지정할 수 있는 미디어 타입은 여러 종류가 있습니다.

all : 모든 미디어 타입
print : 프린터
screen : 컴퓨터 화면
speech : 스크린 리더

이 외에도 다양한 타입이 있으나 실무에서 자주 쓰이는 타입은 all, print, screen 정도이며, 그 중에서도 screen이 대부분입니다. 화면을 출력하는 디스플레이가 있는 미디어들은 대개 screen 타입에 속하기 때문에 현실적으로 고려해야 하는 미디어는 전부 여기에 해당하기 때문입니다.

✨ 조건(너비 및 높이)

반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있습니다.

@media screen and (width: 600px) {
	body {
		color : red;
	}
}

width(혹은 height)는 브라우저의 창 크기에 사용할 수 있습니다. 따라서 min- 혹은 max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있습니다.

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

예를 들어 뷰포트가 400px 보다 좁은 경우 색을 파란색으로 만들기 위해 이런 식으로 max-width 를 사용할 수 있습니다.

✨ 방향성

세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우, orientation으로 검사 할 수 있습니다.

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

예를 들어 장치가 가로 방향인 경우, 해당 코드를 통해 본문의 텍스트 색상을 변경할 수 있습니다.

✨ 복잡한 미디어 쿼리

반응형 웹을 구축하다 보면 더 복잡한 미디어 쿼리를 활용하고 싶을 때가 있습니다. 미디어 쿼리를 결합하거나, 쿼리 목록을 만들거나 하는 식으로 미디어 쿼리를 좀 더 깊이 있게 사용할 수 있습니다.

✨ 논리곱(and) 미디어 쿼리

and를 사용해 미디어 기능을 합칠 수 있습니다.

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

여기서 HTML 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다. 두 조건을 모두 만족해야지 쿼리 안의 CSS 스타일이 적용 됩니다.

✨ 논리합(or) 미디어 쿼리

콤마로 분리를 한다면 미디어 쿼리의 해당 조건 중 어느 하나를 만족시킬 때 CSS 스타일을 적용시킬 수 있습니다.

@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

이런 식으로 뷰포트의 넓이가 600px 이상이거나, 장치가 가로 방향인 경우 텍스트는 파란색이 됩니다. 이 중 하나라도 조건을 만족한다면 쿼리 안의 CSS 스타일이 적용 됩니다.

✨ 부정(not) 미디어 쿼리

not 연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용시킵니다.

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

이 예시는 방향이 세로인 경우에만 텍스트가 파란색으로 적용이 되게 됩니다.

'💻 Development > 기록' 카테고리의 다른 글

[컴퓨터 공학] 컴퓨터 구조 (1)	2023.03.01
번들링 & Webpack (0)	2023.01.24
반응형 웹 (0)	2023.01.16
브라우저 렌더링 (0)	2023.01.16
브라우저 (0)	2023.01.16

'💻 Development/기록' Related Articles

roqkf

미디어쿼리 본문

미디어쿼리

❤️‍🔥 미디어 쿼리

❤️‍🔥 미디어 쿼리 적용법

✨ CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

❤️‍🔥 미디어 쿼리 구문

✨ 미디어 쿼리의 기본적인 구조

✨ 미디어 타입(Media Type)

✨ 조건(너비 및 높이)

✨ 방향성

✨ 복잡한 미디어 쿼리

✨ 논리곱(and) 미디어 쿼리

✨ 논리합(or) 미디어 쿼리

✨ 부정(not) 미디어 쿼리

'💻 Development > 기록' 카테고리의 다른 글

티스토리툴바