1. 반응형 웹사이트
- 하나의 웹사이트로 접속하는 기기의 화면의 크기에 맞춰 자동으로 레이아웃 및 콘텐츠를 구성하는 개발방법
- 스마트폰의 대중화로 인해 중요성 인식
- 인터넷에 접속되는 기기가 다양해지면서 더 다양한 스크린에 대응해야 하는 이슈 (스마트폰, 랩탑, PC, 워치, 티비, 냉장고, 자동차, ...)
2. 미디어 쿼리와 반응형 웹사이트의 범위
📚 미디어 쿼리 기본
@media all and (조건) and (조건) {}- all: 미디어 설정, default: all, screen | print를 주로 사용
- only: 특정 미디어에만 적용하는 경우, screen | print를 지정하는 경우
- and: 미디어 쿼리의 조건은 모두 and 키워드로 연결
- 조건
- 반드시 괄호()안에 조건을 입력
- min: 최소값이 일치할 때, 입력한 사이즈 이상부터 적용
- max: 최대값이 일치할 때, 입력한 사이즈 이하부터 적용
@media only screen and (min-width: 320px) {}- 스크린 형태에만 적용
- 0 ~319px 적용 안함
- 320px부터 적용
🤓 유용한 미디어 쿼리 모음 (접근성에 대한 고려)
훨씬 더 많지만 추린것으로, 반응형 웹사이트의 범위는 넓고 방대하다..
화면크기 (뷰포트)
@media screen and (min-width:576px) {}
@media screen and (min-width:768px) {}
@media screen and (min-width:992px) {}
@media screen and (min-width:1200px) {}화면방향
// 브라우저에서도 화면비가 가로가 더 넓냐 아니냐에 따라 가로 세로가 나눠짐
@media only screen and (orientation:portrait) {}
@media only screen and (orientation:landscape) {}픽셀밀도
// 고해상도 기기에서 좀 더 선명하게 보이게하는
@media only screen and (device-pixel-ratio:2) {}
//요즘엔 2가 거의 기본, 하지만 이걸 넘어가는 경우도 많다. 4넘어가는 것도 있음..
@media only screen and (resolution:144dpi) {}
// 화면의 dpi가 얼마가 되냐에따라 철회할 수 있음화면비율
// 화면비율에 따라 어떻게 보여줄지
// 티비나 자동차처럼 와이드 디스플레이가 나오면서 각광받음
@media only screen and (aspect-ratio:2/3) {}
@media only screen and (aspect-ratio:9/16) {}
@media only screen and (aspect-ratio:9/19.5) {}마우스 포인터
// hover가 터치하는 순간에 잠깐 먹는 순간이 있는데 그걸 없애고 싶을 때 (클릭햇다고 인식..)
@media only screen and (pointer: coarse) and (any-pointer: fine) {}
@media only screen and (pointer: fine) and (any-pointer: coarse) {}
@media only screen and (hover: none) and (any-pointer: hover) {}프린트
@media only screen { background:rgb(230, 230, 230) }
@media only print {
background: #fff;
@page {
margin: 20em
}
}컬러 & 컬러모드
@media all and (color) {} //컬러화면일때
@media all and (monochrome) {} //흑백화면일때 (시각장애인)
@media only screen and (prefers-color-scheme: dark) {} //기기가 다크모드일때
@media only screen and (prefers-color-scheme: light) {}주변광도
// 기기에따라 노트북에서는 조도를 감지함
// ex) 다크모드인데 주변환경이 너무 밝을때 화면을 어떻게 보여줄지
@media only screen and (light-level: normal) {}
@media only screen and (light-level: dim) {}
@media only screen and (light-level: washed) {}고대비모드
// 장애인 차별 금지법 등에 의해서 시각장애인 배려
// 컬러를 구분하지못하는 사람들을 위함
@media all and (prefers-contrast: more) {}
@media all and (prefers-contrast: less) {}애니메이션 & 투명도
// 기기에서 애니메이션을 사용자가 줄여놓으면 의도한 바와 다르게 보여줄수 있기 때문에 여기에서 삭제하도록 수정하거나 함
@media only screen (prefers-reduced-motion: reduce) {}
@media only screen (prefers-reduced-transparency: reduce) {}
반응형 사이즈 관련 참고할만한 유용한 사이트들
https://mediaqueriestest.com/: 현재 화면의 미디어쿼리에서의 값들을 알려줌
https://browserleaks.com/: 위사이트에서 종류 더 다양
https://giona.net/tools/css3-mediaquery-generator/: 미디어쿼리를 만들어주는 사이트
📐 미디어쿼리 - 기종별 화면사이즈 분기
📱 모바일 퍼스트
@media (min-width: 768px) {
/* 태블릿 */
}
@media (min-width: 1024px) {
/* 랩탑, 데스크탑 */
}🖥️ 데스크탑 퍼스트
@media (max-width: 1023px) {
/* 태블릿 */
}
@media (max-width: 639px) {
/* 모바일 (가로로 돌렸을 때도 모바일사이즈로 나와야하면 기준사이즈가 달라져야하기 때문에 상황에 따라 다름)*/
}- 크롬 개발자도구에서 크기를 반응형으로 지정하면, 사이즈를 나눠주는데 이걸 기준으로 하면 보편적임
- 모든 케이스를 맞출 수 없기 때문에 구글에서 제안하는 사이즈를 기준으로 맞추는 것이 일반적
- 인터넷상에서 템플릿을 찾아봐도, 이 사이즈를 기준으로 많이 나옴
📱 태블릿 구간 설정
@media (min-width: 768px){}
@media (min-width: 768px) and (max-width: 1024px){
/* 아이패드 가로 & 세로 */
}- 일반적으로 768px부터 적용(아이패드 세로 사이즈 기준)
- 0 ~767px까지는 모바일, 768px부터는 태블릿
- 768px과 스마트폰 가로 사이즈 중복 구간 발생
- 정확히 태블릿에만 적용하기 위해서는 다른 조건을 추가해야함
💡 미디어쿼리 활용
@media screen and (-webkit-max-device-pixel-ratio: 1) {
/* 고해상도 디스플레이가 아닌 경우 (구형 디바이스) */
}
@media screen and (orientation:portrait) {
/* 기기가 세로인 경우 */
}
@media screen and (orientation:landscape) {
/* 기기가 가로인 경우 */
}
@media screen and (any-hover:none) {
/* 입력 방법이 hover를 지원하지 않는 경우, 오직 터치스크린 */
}🐭 마우스관련 기기별 적용사항
https://codepen.io/marshall-ku/pen/jOGOdWa
🍯 기기별 사이즈 참고 사이트
https://www.mydevice.io/: use agent도 알려줌
https://yesviz.com/viewport/: 얘가 제일 최신
3. 반응형에 유용한 css Function
var(): css 변수의 값을 삽입
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
calc(): 속성값으로 사용될 계산을 수행
width: calc(100% - 100px);min(), max(): 쉼표로 구분된 값 목록에서 가장 작은 값, 가장 큰 값을 속성값으로 사용
width: min(50%, 300px);
clamp(min, prefered, max): 최소값과 최대값 사이의 범위 내에서 중간값을 고정
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));env():
- 노치있는 스마트폰의 노치를 어떻게 처리할 것인지 설정
