일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Git 브랜치
- UNPROTECTED PRIVATE KEY FILE
- git 계정 설정
- nginx https 설정
- javascript 정렬
- linux foreground
- AWS EC2 서버 만들기
- Linux apt
- ssl 인증서 발급받기
- Logback
- javascript scope
- ec2 ssh unprotected private key file
- Linux 디렉터리 역할
- HTTP Web Server
- git branch
- EC2 oh my zsh
- EC2 Apache2
- arbitrum sepolia eth
- Linux apt-get
- git 기본 에디터
- Linux 디렉터리 구조
- EC2 HTTP 호스팅
- 아비트럼 새폴리아 이더 받는법
- 서버의 서비스 방식
- GIT
- EC2 zsh
- Navigation Pattern
- git switch
- Linux oh my zsh
- linux background
- Today
- Total
HyunJun 기술 블로그
CSS Media Query와 반응형 본문
1. CSS Media Query
미디어 쿼리는 CSS에서 스타일을 선택적으로 적용하고 싶을 때 사용한다. 다른 프로그래밍 언어의 if문과 비슷하다. 미디어 쿼리는 반응형 페이지를 만들 때 많이 사용된다. 미디어 쿼리는 CSS 코드 상에서 기존의 코드와 섞여 있다면 제일 마지막 줄에 써주어야 한다. (기존의 코드가 덮어쓸 수 있음)
1-1. 기본 사용법
기본적으로 아래와 같이 사용할 수 있다. () 안에 조건을 넣고, {} 안에 해당 조건에 적용시킬 CSS 실행 코드를 넣으면 된다.
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
1) min-width
최소 min-width부터 css를 적용한다를 뜻한다. 예를 들어 min-width: 500px이면 최소 500px부터이므로, 500px 이상에서는 전부 적용된다.
2) max-width
최대 max-width까지 css를 적용한다를 뜻한다. 예를 들어 max-width: 500px이면 최대 500px까지이므로, 500px 이하에서는 전부 적용된다.
3) 세로 화면, 가로 화면
모바일의 가로모드 등 화면의 방향에 따라 적용할 수 있다
/* 세로 화면 */
@media (orientation: portrait) {
body {
background-color: black;
}
}
/* 가로 화면 */
@media (orientation: landscape) {
body {
background-color: red;
}
}
1-2. link에 적용
아래처럼 css 파일 자체를 조건에 따라 적용시킬 수도 있다.
<link rel="stylesheet" href="./mobile.css" media="screen and (max-width: 768px)" />
<link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 768px)" />
1-3. 미디어 유형(media-type)
아래와 같은 미디어 유형들이 있다.
- all: 모든 매체를 의미한다.
- print: 인쇄 페이지, 페이지를 인쇄(print)할 경우의 미디어 유형이다.
- screen: 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체를 의미한다.
- speech: 웹 페이지를 읽어주는 스크린 리더를 의미한다.
1-4. 논리 연산자
and, 쉼표(or), not, only 등을 사용할 수 있다. (not, only의 경우 미디어 유형을 반드시 지정해야 한다.)
지금까지의 내용들로 예제를 간단하게 보자면,
/* 미디어 유형이 스크린이거나, 화면의 넓이가 최대 500px까지 해당 스타일을 적용한다. */
@media screen, (max-width: 500px) {
body {
background-color: yellow;
}
}
/* 오직 인쇄 유형에만 적용한다. */
@media only print {
body {
width: 500px;
height: 500px;
border: 10px solid black;
}
}
1-5. hover 활용
데스크탑 기준 마우스 포인터를 hover가 적용된 요소에 올리면, hover에 적용된 스타일을 적용시킬 수 있지만, 모바일 같은 경우 브라우저와는 다르게 정확한 포인터가 존재하지 않기 때문에 정상적으로 동작하지 않는다. 해서 아래처럼 하게 되면 데스크탑의 경우에만 hover를 적용할 수 있다.
/* device의 pointer로 hover가 가능한 경우에만 적용한다 => Desktop */
@media (hover: hover) {
/* 마우스 포인터가 올라가있는 동안 스타일을 적용한다. */
div:hover {
background-color: red;
}
}
/* hover가 되지 않는 device에서의 스타일을 적용한다 => Mobile */
@media (hover: none) {
/* 터치하고 있는 동안 스타일을 적용한다. */
div:active {
background-color: yellow;
}
}
2. 반응형
반응형 웹 페이지를 만들기 전 알아야 할 개념이 있다.
- Desktop First: Desktop(PC) 기준의 화면 크기를 기준으로 먼저 작업을 한 후, 모바일 반응형을 위한 CSS 작업을 한다.
- Mobile First: Mobile 기준의 화면 크기를 기준으로 먼저 작업을 한 후, 데스크탑 반응형을 위한 CSS 작업을 한다.
기본적으로 Desktop First의 경우 최대치인 Desktop을 먼저 디자인하고, max-width를 설정해 가며 반응형을 디자인하고, Mobile First의 경우 최소치인 Mobile을 먼저 디자인하고, min-width를 설정해 가며 반응형을 디자인한다. min-width, max-width를 겹치지 않게 하여 사용하기도 한다.
2-1. Brack point
스마트폰, 폴더폰, 태블릿, 데스크탑, 노트북, 모니터, TV 등의 사이즈에 반응형을 적용하기 위한 분기 포인트를 의미한다.
Desktop-first, Mobile-first에 따라 여러 가지의 Brack Point가 존재한다.
1) Mobile First
/* Default Mobile - Portrait */
/* Mobile - Landscape */
@media (min-width: 576px) {}
/* Tablet */
@media (min-width: 768px) {}
/* Desktop */
@media (min-width: 992px) {}
/* Desktop (Large) */
@media (min-width: 1200px) {}
2) Desktop First
/* Default Desktop */
/* Desktop */
@media (max-width: 1199px) {}
/* Tablet */
@media (max-width: 991px) {}
/* Mobile - Landscape */
@media (max-width: 767px) {}
/* Mobile - Portrait */
@media (max-width: 575px) {}