팀프로젝트 중.. 다른 조원분의 화면으로 작업물을 보며 논의하다가 내가 만든 타이틀 속 글자들이 섞이는 걸 발견했다.
팀원분이 반응형웹 폰트 설정을 찾아보라고 팁을 주셔서 빠르게 적용할 수 있었다!
미디어쿼리
다양한 디바이스의 뷰포트에 대응하기 위해 사용할 수 있다.
@media 키워드로 시작하며, 조건에 해당하는 경우에 적용할 스타일을 지정한다.
@media (조건) {
// 스타일
}
생각보다 간단하게 설정할 수 있었다.
@media screen and (max-width: 1800px) {
.title p {
font-size: 5rem;
}
}
@media screen and (max-width: 1200px) {
.title p {
font-size: 3rem;
height: 5rem;
}
}
@media screen and (max-width: 600px) {
.title p {
font-size: 2rem;
height: 3rem;
}
}
위 내용을 추가해주었다.
너비를 나누는 기준
최소 반응형 레이아웃
- 가장 심플하게 나누는 경우
- 모바일: ~768px
- 타블렛: ~1024px
- 데스크탑: 1024 ~
가로모드 디바이스 지원 반응형 레이아웃
- 디바이스 사용환경을 최대한 고려한 레이아웃
- 모바일: ~600px
- 모바일 가로, 타블렛 세로: ~900px
- 타블렛 가로: ~1200px
- 데스크탑: ~1800px
- 빅 데스크탑: ~2000px
위 기준은 반드시 맞춰야하는 것은 아니다!
'HTML + CSS' 카테고리의 다른 글
[CSS] Safari z-index (1) | 2024.07.30 |
---|---|
[JS / jQuery / CSS] 다양한 방법으로 자동스크롤 구현하기 (원페이지 스크롤) (0) | 2024.07.22 |
[CSS] position (static, relative, absolute, fixed, sticky) (0) | 2024.07.13 |
[CSS] 선택자(Selector) 문법 (0) | 2024.07.11 |
[CSS] 가상요소로 체크박스 커스텀하기 (::after, ::before) (0) | 2024.07.05 |