[CSS] 미디어 쿼리

기본 문법

@media (조건) {
	스타일
}

 

예1) 좁은 화면 스타일링

800px 이하의 좁은 화면에서 특정 엘리먼트의 배경색을 토마토 색으로 바꾸고 싶다면,

<div class="small-tomato"> 좁은 화면에서 배경색이 토마토 색이 됨 </div>

아래와 같이 max-width 속성을 이용해서 미디어 쿼리를 작성하면 된다.

@media (max-width: 800px) {
	.small-tomato {
    	background-color: tomato;
    }
}

 

예2) 넓은 화면 스타일링

800px 이상의 넓은 화면에서 특정 엘리먼트의 글자색을 토마토 색으로 바꾸고 싶다면,

<div class="large-tomato"> 넓은 화면에서는 글자색이 토마토 색으로 됨 </div>

아래와 같이 min-width 속성을 이용해서 미디어 쿼리를 작성하면 된다.

@media (min-width: 800px) {
	.large-tomato {
    	color: tomato;
    }
}

 

적용하기

네이버 프론트를 따라하고 있는데, 화면 크기가 특정 픽셀 이상으로 작아지면 가로 스크롤이 적용되도록 하고 싶다.

미디어 쿼리 + whtie space 같이 사용하면 될 것 같다.

@media (max-width: 1640px) {
	.적용하고 싶은 태그 {
		white-space: nowrap;
    ]
}

이렇게..?

 

 

CSS 미디어 쿼리 (Media Query) 사용법

 

css 가로 스크롤바 만들기

 

네이버 프론트 따라하기 (응용)

.doc {
    grid-column: 1/3;
    grid-row: 4/10;
    min-width: 750px;
}
@media (max-width: 1000px) {
    .doc {
        margin-top: -715px;
    }
}

브레이크 포인트로 사용한 코드

: 화면을 어느 정도 축소시킬 경우 찌부가 되는데, 그 부분 한정 브레이크 포인트로 사용한 코드 by 히데야스