반응형 웹 - 미디어쿼리

jb kim·2021년 8월 15일
0

html 자동 생성시 viewport 지우지 말기

<meta name="viewport" content="width=device-width, initial-scale=1.0">

css 페이지 제일 위에 폰트 넣기

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

1. 화면이 작은 태블릿 같은 경우

사이드바를 아래로 내려 좀더 보기 좋게 만들수 있다. 그런데 화면이 넒을때는 이대로 하면서 화면이 일정 px 이하에서만 내려가도록 한다.
이때 미디어쿼리 를 사용 합니다.

사이드바 CSS 밑에 작성

@media screen and (max-width: 700px){
  .main-area,
  .sidebar{
    width: auto;
    float: none;
  }
}

2. main-area의 패딩 40px

적은 화면에서 즉 미디어쿼리 700px 이하에서는 제거한다.

@media screen and (max-width: 700px){
  .main-area,
  .sidebar{
    width: auto;
    float: none;
  }

  .main-area{
    padding-right: 0;
  }
}

3. 스마트폰 사이즈일 경우


약간의 패딩 좌우 40px도 부담이 된다.

컨테이너 아래의 새로운 미디어쿼리를 만든다.

@media screen and (max-width: 480px){
  .container{
    padding-left: 20px;
    padding-right: 20px;
  }
}

content-area의 위쪽 패딩 40px이 스마트폰환경에서는 너무 크다

@media screen and (max-width: 480px){
  .content-area{
    padding-top: 20px;
  }
}

4. 내용 안보이게 하기

스마트폰 화면 이어서 넓은 화면에서는 부과적인 설명등이 있어도 부담도지 않지만 아주 작은 화면에서는 핵심만 보여주는것이 좋다.
그러므로 설명 같은 info-box 클래스의 박스및 작은 제목, 메뉴에서도 필요없는 것들을 hide-small 클래스를 넣어서 안 보여지게 한다.

@media screen and (max-width: 480px){
  .hide-small{
    display: none;
  }
}

5. 메뉴 아이템들을 700px이하에서

site-nav 클래스 CSS 찾아서 아래에 작성

@media screen and (max-width: 700px) {
.site-nav li{
width: 33.332%;
margin-right: 0;
}
.site-nav a{
padding: 15px 0;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
}
}

6. 메뉴 아이템들이 480px 이하

@media screen and (max-width: 480px) {
  .site-nav li{
    width: ??%; /* 절반! */
  }
}

7. 반대로 화면이 무지하게 넓을때

기준을 1300px로 하자
이제까지 작을때는 max-width를 사용했고
화면이 클때는 min-width(1300px) => 즉 1300보다 클때!!!
컨테이너 css 아래에 작성

큰화면에서는 폰트사이즈 17px , 컨테이너의 최대 가로 1200px

@media screen and (min-width: 1300px){

  body{
    font-size: 17px;
  }
  
  .container{
    max-width: 1200px;
  }
}
profile
픽서

0개의 댓글