미디어쿼리
미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능이다.
- 중복되는 요소는 적어줄 필요가 없다.
- 실행되는 화면을 켜놓고 작업하기!
미디어쿼리 조건
| webkit-min-device-pixel-ratio, webkit-max-device-pixel-ratio | 출력 장치의 최소, 최대 픽셀 비율. css의 1px 안에 들어가는 디바이스의 스크린 픽셀의 숫자를 값으로 함 |
|---|---|
| min-width, max-width | 스크롤바를 포함한 뷰포트의 최소, 최대 넓이 |
| orientation | 뷰포트의 방향 |
미디어쿼리 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리 기본</title>
<style>
/* mobile first!! bootstrap이 대표적 */
body {
background-color: tomato;
}
/* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
@media screen and (max-width:1000px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>유용한 디자인 사이트
사진
https://pixabay.com/ko/
https://www.pexels.com/ko-kr/
템플릿
https://cargo.site/Templates
https://themeforest.net/
https://dribbble.com/
이미지 스프라이트
색상조합
그라데이션
구분선
CSS 트릭
프론트엔드 개발자 항상 뭘 하고있는 슬링