[WEB/CSS] CSS 단위 | 미디어쿼리

728x90

저번에 웹 홈페이지만들면서 반응형 웹에 대한 정리의 필요성을 느꼈는데,
이번에 CSS 미디어쿼리를 정리하는 김에 덧붙여 정리해보려고한다 .

CSS 단위

vh: 화면 넓이를 기준으로 하는 백분율 단위, (1vh= 뷰포트 높이의 1%)
vmin: 브라우저의 너비와 높이 중 작은 값의 1%
vmax: 브라우저의 너비와 높이 중 큰 값의 1%
em: 부모요소(루트요소) font-size를 기준으로 하는 사이즈
rem: 최상위 요소<html>의 기본 font-size를 기준으로 하는 사이즈 -> html의 기본 폰트사이즈는 16px이다. ex) 2rem=32px;

정리

미디어쿼리 @media

미디어쿼리는 CSS에서 특정 스타일을 선택적으로 사용할 때 사용한다. (마치 if문처럼 조건을 넣어 사용한다.)

@media (조건) {
/*스타일부분, 일반덕인 css코드들을 적어준다.
*/
}

@media screen and (max-width: ~~~){

화면의 너비가 ~~~이하일때 적용될 스타일;

}

최대 -일때까지 적용시키겠다.

@media screen and(min-width: 840px)

{

/* =최소가 840px까지 = 너비가 840이상일때 적용시키겠다 */

img{

width:400px;

height:500px;

}

최소840일때까지 적용시키겠다.

*내용 참고 및 출처: 생활코딩

틀린 부분이나 이상한 부분이 있으면 댓글로 지적해주세요!
감사합니다 :)

728x90

Soony's House