Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
05-16 00:00
관리 메뉴

nomad-programmer

[Programming/HTML|CSS] 반응형 웹 본문

Programming/HTML|CSS

[Programming/HTML|CSS] 반응형 웹

scii 2020. 12. 20. 15:52

미디어 쿼리는 다음과 같은 쿼리를 사용해 장치를 구분하는 것은 물론 장치의 크기나 비율을 구분할 수도 있다.

속성 설명
width 화면의 너비
height 화면의 높이
device-width 장치의 너비
device-height 장치의 높이
orientation 장치의 방향
device-aspect-ratio 화면의 비율
color 장치의 색상 비트
color-index 장치에서 표현 가능한 최대 색상 개수
monochrome 흑백 장치의 픽셀당 비트 수
resolution 장치의 해상도
orientation 속성을 제외한 모든 속성은 min 접두사와 max 접두사를 사용할 수 있다. 그리고 이를 사용하면 방응형 웹을 만들 수 있다.
/* 화면 너비 0pixcel ~ 767pixcel */
@media screen and (max-width: 767px) {
  html {
    background: red;
    color: white;
    font-weight: bold;
  }
}

/* 화면 너비 768pixcel ~ 959pixcel */
@media screen and (min-width: 768px) and (max-width: 959px) {
  html {
    background: green;
    color: white;
    font-weight: bold;
  }
}

/* 화면 너비 960pixcel ~ 무한 pixcel */
@media screen and (min-width: 960px) {
  html {
    background: blue;
    color: white;
    font-weight: bold;
  }
}

반응형 웹과 관련된 주의 사항

반응형 웹을 만들 때 meta 태그를 사용하지 않으면 문제가 발생한다. 

meta 태그를 입력하지 않으면 웹 페이지에게 화면 너비와 관련된 정보를 전달할 수 없으므로 문제가 발생하는 것이다. 따라서 반응형 웹 페이지를 만들 때는 반드시 meta 태그를 입력해야 한다.

화면 방향 전환

미디어 쿼리를 사용하면 디바이스가 수평 상태로 있는지 수직 상태로 있는지도 확인할 수 있다. 

화면 방향 전환을 확인하고 싶다면 orientation 속성을 사용한다. 다음과 같이 orienttation 속성에 portrait 키워드 또는 landscape 키워드를 적용하면 디바이스의 방향을 확인할 수 있다.

@media screen and (orientation: portrait) {
  html {
    background: red;
    color: white;
    font-weight: bold;
  }
}

@media screen and (orientation: landscape) {
  html {
    background: green;
    color: white;
    font-weight: bold;
  }
}

위의 코드를 적용하면 스마트폰에서 화면을 수직으로 놓으면 빨간색 배경이, 화면을 수평으로 놓으면 초록색 배경이 나타난다.

레티나 디스플레이

아이폰의 레티나 디스플레이 같은 고해상도의 화면은 다음과 같은 방법으로 구분할 수 있다.

@media screen and (min-device-pixcel-ratio: 2) {
  html {
    background: black;
    color: white;
    font-weight: bold;
  }
}

예제 소스 코드

HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="prefix-free/prefixfree.min.js"></script>
    <style>
      @import url("StyleSheet.css");
    </style>
    <title>Document</title>
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsim dolor sit amet, consectetur adipiscing elit.</p>
    <p>Aenean luctus congue scelerisque. Maecenas aliquet ante.</p>
  </body>
</html>

CSS

@font-face {
  font-family: "Langar";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/langar-v11-latin/langar-v11-latin-regular.woff2")
    format("woff2");
}

/* 화면 너비 0pixcel ~ 767pixcel */
@media screen and (max-width: 767px) {
  html {
    background: red;
    color: white;
    font-weight: bold;
  }
}

/* 화면 너비 768pixcel ~ 959pixcel */
@media screen and (min-width: 768px) and (max-width: 959px) {
  html {
    background: green;
    color: white;
    font-weight: bold;
  }
}

/* 화면 너비 960pixcel ~ 무한 pixcel */
@media screen and (min-width: 960px) {
  html {
    background: blue;
    color: white;
    font-weight: bold;
  }
}

@media screen and (orientation: portrait) {
  html {
    background: red;
    color: white;
    font-weight: bold;
  }
}

@media screen and (orientation: landscape) {
  html {
    background: green;
    color: white;
    font-weight: bold;
  }
}

@media screen and (min-device-pixcel-ratio: 2) {
  html {
    background: black;
    color: white;
    font-weight: bold;
  }
}
저작자표시 비영리 변경금지

'Programming > HTML|CSS' 카테고리의 다른 글

[Programming/HTML|CSS] CSS3 Cheat Sheet  (0) 2020.12.21
[Programming/HTML|CSS] HTML5 Cheat Sheet  (0) 2020.12.20
[Programming/HTML|CSS] 많이 사용하는 StyleSheet 초기화 코드  (0) 2020.12.18
[Programming/HTML|CSS] 중요한 레이아웃 공식 같은 CSS설정  (0) 2020.08.11
[Programming/HTML|CSS] 동위 선택자의 활용 예시  (0) 2020.08.10
'Programming/HTML|CSS' Related Articles more
Comments