에티테마

CSS @MEDIA 쿼리 예제 및 설명

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 19-07-05 20:08

본문

55dee34970804f806a0e86846473ee78_1562325219_59.png


미디어쿼리를 사용하게 되면 스마트폰이나 해상도의 화면에 따라서 css 를 처리할 수 있습니다.


PC 또는 태블릿의경우 1200px 값이 많으므로 그 이상일경우 실행되는경우에는 min 값을 사용한다.
아래 예제에서 min-width: 1200px 값인경우 1200px 이상 일경우 실행되게 된다.


min :  해당 값 보다 클경우 실행
max :  해당 값 보다 작을경우 실행

아래 두개의 예를 보면 응용할 수 있습니다.

@media (min-width: 1200px) {
 

// 너비 width 가 1200px 이상일경우 실행 

}


@media (max-width: 1199px) {
 

// 1200px 보다 작은 1199px 이므로 최대값이 1199px 보다 적을경우 실행

// 1199px 이하 값 일경우
 

}


@media (max-width: 1024px) {

}


@media (max-width: 768px) {

}


@media (max-width: 533px) {

}

@media (max-width: 414px) {

}

@media (max-width: 384px) {

}


 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.