프론트엔드 개발자
-
[원티드] 프리온보딩 9월 챌린지 - 반응형 웹 사이트 개발 3일차Front-end 개발 2023. 9. 13. 19:02
목차 1. 미디어쿼리의 사용법 2. 다양한 미디어쿼리의 활용 3. JS 를 이용한 화면 사이즈 분기 4. 미디어쿼리는 단순히 사이즈만 나누는 것이 아니다. 1. 미디어쿼리의 사용법 1-1. 미디어쿼리의 기본 - HTML Link 태그로 사용 (실무에서 사용 잘 안함) > 파일을 나눠서 사용함 > - CSS @media 키워드로 사용 (일반적인 사용법) - @media only all and (조건) and (조건( {} > all : 미디어 설정, 생략시 기본값 all, screen | print 를 주로 사용 > only : 특정 미디어에만 적용하는 경우, screen | print 를 지정하는 경우 > and : 미디어 쿼리의 조건은 모두 and 키워드로 연결 > 조건 : 반드시 괄호 () 안에 조건..