미디어쿼리2 [WEB/CSS] CSS 단위 | 미디어쿼리 저번에 웹 홈페이지만들면서 반응형 웹에 대한 정리의 필요성을 느꼈는데,이번에 CSS 미디어쿼리를 정리하는 김에 덧붙여 정리해보려고한다 . CSS 단위 절대적 단위상대적 단위pxemcmremmmvw vh % px: 가장 흔하게 사용했던 px은 container 크기가 변경돼도 그대로 고정된 값으로 유지되어, 반응하지않는다.vw: 화면 넓이를 기준으로 백분율 단위 (1vw = 뷰포트너비의 1%) -> 만약 화면이 800px 라면, 1vw=8px 이다.vh: 화면 넓이를 기준으로 하는 백분율 단위, (1vh= 뷰포트 높이의 1%)vmin: 브라우저의 너비와 높이 중 작은 값의 1%vmax: 브라우저의 너비와 높이 중 큰 값의 1%em: 부모요소(루트요소) font-size를 기준으로 하는 사이즈rem: 최상.. 2024. 8. 2. 미디어 쿼리와 그리드 적용 1. 미디어 쿼리 - 접속하는 미디어의 타입/ 특징 / 해상도에 따라 다른 스타일 속성을 적용하는 기술 · 기본 문법 @media and () (){ /*css 코드; */ } - not / only ㄴ not 뒤에 오는 모든 조건 부정. ㄴ only 미디어 쿼리를 지원하는 기기에서만 해석하라. -mediatype ㄴ 생략 가능함. (생략시 all 로 인식함.) ㄴ 생략하지 않으면 반드시 다음에 and 연산자가 와야한다. all 모든 기기 print 인쇄 장치(ex. 프린터기) screen 컴퓨터 화면 or 스마트 기기 speech 웹페이지를 소리 내어 읽어주는 장치(ex. 스크린 리더기) -media feature ㄴ 적용될 미디어의 조건을 적음. min-width 미디어 쿼리가 적용될 최소 너.. 2024. 1. 7. 이전 1 다음
