-
[CSS] 반응형 디자인(Responsive Design), Media Query생활코딩/WEBn 2020. 8. 26. 17:16
[강의 출처] opentutorials.org/course/3086/18323
반응형 디자인 - 생활코딩
반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항
opentutorials.org
반응형 디자인(Responsive Design)
- 웹 특성상 PC, mobile, 여러 운영체제 등 다양한 환경에서 적절하게 동작해야할 필요성 대두
- 화면의 크기에 따라, 웹페이지의 각 요소들이 반응하여 그 화면에 최적화된 형태로 동작하는 디자인
미디어 쿼리(Media Query)
- 반응형 디자인을 구성하는 핵심적인 기술
- <style> 태그 내에 @media(조건문) { 실행 } 형식으로 작성
- 스마트폰의 가로모드, 세로모드를 비롯한 다양한 크기의 화면에 대응할 수 있음
미디어 쿼리를 이용한 반응형 디자인 예시
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> div { border:5px solid green; font-size:60px; } @media(min-width:800px) { /* 화면 크기가 800px보다 큰 경우 */ div { display:none; /* div 태그의 display를 안 보이게 처리 */ } } </style> </head> <body> <div> Responsive </div> </body> </html>CSS 코드 공유/재사용
- 여러 페이지가 동일한 CSS 스타일을 공유하는 경우, <style> 태그의 내용을 CSS 파일을 별도로 저장
- 기존 <style> 태그가 있던 <head> 부분에 아래 태그를 추가함으로써 공유 및 재사용 가능
- <link rel="stylesheet" href="파일위치.css">
- css파일을 1회 다운로드 받은 후, caching을 통해 추가 트래픽 발생 없이 빠르게 여러 페이지에 적용가능
'생활코딩 > WEBn' 카테고리의 다른 글
[JavaScript] 개요 (0) 2020.08.28 [HTTP] 개요 (0) 2020.08.27 [CSS] 레이아웃: Box Model, Grid (0) 2020.08.25 [CSS] Selector: class, id (0) 2020.08.24 [CSS] 정의, Selector, Declaration, Property, Value (0) 2020.08.24