close
프로필 배경
프로필 로고

튤이의 짜봐

💠프로그래밍 언어/CSS · 2022. 7. 15. fullscreen 넓게보기

[기본 개념] 6 | (6.1) 반응형 웹, 미디어 쿼리

728x90

[기본 개념] 6 | (6.1) 반응형 웹, 미디어 쿼리

1> 반응형 웹

2> 미디어 쿼리

3 그리드 레이아웃

4 플렉스 박스 레이아웃

5 CSS 그리드 레이아웃 사용

1 반응형 웹

반응형 웹 디자인과 뷰포트

 

 반응형 웹 디자인이란 스마트폰이나 태블릿, TV 등 브라우저 환경에 따라 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시방법을 바꾸는 것이다.

 

 반응형 웹 디자인에서의 기본에는 뷰포트가 있는데 이것을 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소할 수 있다.

 

뷰포트 지정하기

 

기본형

<meta name="viewport" content="속성1=값1", "속성값2=값2", . . .">

 

 뷰포트는 <meta> 태그를 이용해 <head>와 </head> 태그 사이에 작성한다.

 

 content 속성을 이용해 뷰포트 속성과 속성값을 지정하면 된다.

 

종류 설명 사용 가능한 값 기본값
width 뷰포트  너비 device-width 또는 크기 브라우저 기본값
height 뷰포트 높이 device-height 또는 크기 브라우저 기본값
user-scalable 확대, 축소 가능 여부 yes 또는 no
(yes = 1, device-width와 device-height = 10)		 yes
initial-scale 초기 확대, 축소 값 1 ~ 10 1

 

<meta name="viewport" content="width=device-width, initial-scale=1">
// 웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정

 

뷰포트 단위

 

vw(viewport width) : 1vw는 뷰포트 너비의 1%

vh(viewport height) : 1vh는 뷰포트 높이의 1%

vmin(viewport minimum) : 뷰포트 너비와 높이 중 작은 값의 1%

vmax(viewport maximum) : 뷰포트 너비와 높이 중 큰 값의 1%

 

뷰포트의 너비가 1000px, 높이가 800px인 경우

1vw = 1000px의 1% = 10px

1vh = 800px의 1% = 8px

1vmin = 800px의 1% = 8px

1vmax = 1000px의 1% = 10px

 

화면을 돌려 방향이 바뀌는 경우

1vw =  800px의 1% = 8px

1vh = 1000px의 1% = 10px

1vmin = 800px의 1% = 8px  (변하지 않는다.)

1vmax = 1000px의 1% = 10px  (변하지 않는다.)

 

(ex. 뷰포트 단위를 사용해 글자크기 조절하기)

 

...
<style>
  h1 {
    font-size : 5vw;
    text-align : center;
  }
</style>
...
<h1>안녕하세요?</h1>
...

2 미디어 쿼리

미디어 쿼리

 

기본형

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

 

only 미디어 쿼리를 지원하는 웹 브라우저만 실행

not not 다음 지정하는 미디어 유형을 제외한 미디어 유형에만 적용

and 조건을 여러 개 연결해서 추가

 

 미디어 쿼리란 사이트에 접속하는 기기의 화면에 따라 레이아웃이 달라지는 CSS 스타일을 사용하는 방법이다.

 

 @media 속성을 사용하여 특정 미디어에서 어떤 CSS 를 적용할 것인지 지정해주고 <style> 과 </style> 태그 사이에 대소문자 구별하지 않고 사용한다.

 

@media screen and (min-width : 768px) and (max-width : 1439px) {
  ...
}
// 미디어 유형이 screen이며 최소 너비가 768px이고 최대 너비가 1439px일 경우 적용할 CSS

 

미디어 유형의 종류

 

 미디어 쿼리는 미디어별 적용할 CSS 를 따로 작성하므로 @media 속성 다음 미디어 유형을 알려줘야 한다.

 

종류 설명
all 모든 미디어 유형에서 사용할 CSS 정의
print 인쇄 장치에서 사용할 CSS 정의
screen 컴퓨터 스크린에서 사용할 CSS 정의 (스마트 스크린 포함)
tv 음성과 영상이 동시에 출력되는 TV에서 사용할 CSS  정의
aural 음성 합성 장치(주로 화면을 읽어 소리로 출력하는 장치)에서 사용할 CSS 정의
braille 점자 표시 장치에서 사용할 CSS 정의
handheld 패드(pad)처럼 손에 들고 다니는 장치에서 사용할 CSS 정의
projection 프로젝터에서 사용할 CSS 정의
tty 디스플레이 기능이 제한된 장치에서 사용할 CSS 정의 (이 장치에서는 px 단위 사용 X)
embossed 점자 프린터에서 사용할 CSS 정의

 

웹 문서의 가로 너비와 세로 높이 속성

 

종류 설명
width, height 웹 페이지의 가로 너비, 세로 높이를 지정
min-width, min-height 웹 페이지의 최소 너비, 최소 높이를 지정
max-width, max-height 웹 페이지의 최대 너비, 최대 높이를 지정

 

단말기의 가로 너비와 세로 높이 속성

 

종류 설명
device-width, device-height 단말기의 가로 너비, 세로 높이를 지정
min-device-width, min-device-height 단말기의 최소 너비, 최소 높이를 지정
max-device-sidth, max-device-height 단말기의 최대 너비, 최대 높이를 지정

 

기기의 방향을 확인하는 orientation 속성

 

 미디어 쿼리에서 orientation 속성을 사용하면 기기의 방향을 확인하여 웹 사이트 레이아웃을 바꿀 수 있다.

 

종류 설명
orientation : portrait 단말기의 세로 모드를 지정
orientation : landscape 단말기의 가로 모드를 지정

 

@media screen and (min-device-sidth : 812px) and (orientation : landscape) {
  ...
}
// 가로로 돌릴 경우에 작성한 미디어 쿼리

 

외부 CSS 파일 연결하기

 

기본형

<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">

 

기본형

@import url(css 파일 경로) 미디어 쿼리 조건

 

 각 조건별로 CSS 파일을 따로 저장한 뒤 <link> 태그나 @import 문을 사용하여 연결한다.

 

 <link> 태그는 <head> 와 </head> 태그 사이에 넣고, @import 문은 <style> 와 </style> 태그 사이에 작성한다.

 

<link rel="sylesheet" media="print" href="css/print.css">
// 인쇄용 CSS를 정의한 css/print.css 파일을 웹 문서와 연결
@import url("css/tablet.css") only screen and (min-width : 321px) and (max-width : 768px);
// 태블릿용 CSS를 정의한 css.tablet.css 파일을 
// 너빗값이 321px이상이면서 768px이하일 때 미디어 쿼리를 적용

 

웹 문서에 직접 정의하기

 

기본형

<style media="<조건>"> {

    <스타일 규칙>

}

</style>

 

기본형

<style>

    @media <조건> {

        <스타일 규칙>

    }

</style>

 

 외부 CSS 파일을 만들지 않고 웹 문서에서 미디어 쿼리를 직접 지정하는 방법으로, media 속성을 사용하거나 @media 문을 사용하여 적용한다.

 

 media 속성과 @media 문은 <style> 와 </styel> 태그 사이에 작성한다.

 

 media 속성은 하나의 <style> 태그 안에서 하나의 조건을 지정하지만, @media 문은 <style> 태그 안에 여러 개의 조건에 따른 스타일을 모두 나열해 놓고 그중 선택하여 사용한다.

 

<style media="screen and (max-width : 320px)">
  body {
    background-color : orange;
  }
</style>
// 화면 너비가 320px이하일 때 배경을 주황색으로 바꾸는 미디어 쿼리
<style>
  @media screen and (max-width : 320px) {
    body {
      background-color : orange;
    }
  }
</style>
// 화면 너비가 320px이하일 때 배경색을 주황색으로 바꾸는 미디어 쿼리

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

728x90

'💠프로그래밍 언어 > CSS' 카테고리의 다른 글

[기본 개념] 6 | (6.3) CSS 그리드 레이아웃 사용  (0) 2022.07.22
[기본 개념] 6 | (6.2) 그리드, 플렉스 박스 레이아웃  (0) 2022.07.19
[정리] 5 | 변형함수, 트랜지션과 애니메이션 속성 정리  (0) 2022.07.14
[기본 개념] 5 | (5.2) 트랜지션, 애니메이션  (0) 2022.07.13
[기본 개념] 5 | (5.1) 변형  (0) 2022.07.11
💠프로그래밍 언어/CSS 관련 글
더 보기

티스토리툴바