일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 그리디
- 프로그래머스 JS
- Lv2
- javascript
- 프로그래머스
- 이것이 코딩테스트다 with 파이썬
- 연습문제
- 백준
- SWEA
- bfs/dfs
- 알고리즘
- 코딩테스트
- Typescript
- js
- 코딩테스트 입문
- 정렬
- 네트워크
- programmers
- node.js
- Next.js
- Lv1
- Java
- Baekjoon
- greedy
- CSS
- Python
- 자바
- React
- 자바스크립트
- CLASS
Archives
- Today
- Total
개발야옹
[ Web - CSS media queries ] 반응형 웹 본문
CSS media queries
media queries 는 단말기의 유형과 어떡 특성이나 수치 ( 화면 해상도, view port, 너비 등 ) 에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용.
media queries는 CSS3에 포함되어 있으며, media type ( screen, tv, print ... ) 와 하나 이상의 expression으로 구성된다.
ex)
아래 예시의 경우 width (너비) 가 500px 이하 일 때의 배경색상을 white로 적용한다는 의미이다.
@media ( max-width : 500px ) {
background : white;
}
출처 :https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries
728x90
'WEB > CSS' 카테고리의 다른 글
[SCSS] SCSS 문법 정리 (0) | 2024.06.27 |
---|---|
[ Web : CSS ] positon (0) | 2022.07.27 |
[ Web : CSS ] flexbox (0) | 2021.11.29 |
[ Web - SCSS ] & Ampersand (0) | 2021.11.16 |