0528 개발일지

김가현·2021년 5월 28일

서울 디지털 소셜 임팩트 개발일지

목록 보기

4/29

학습한 내용

미디어쿼리: 반응형 웹사이트를 만들 때 사용하는 CSS 코드. 사용하는 기기에 맞게 자연스러운 변화를 줌.
```
@media (min-width: 200px) and (max-width: 767px) {
    .pc {
      color: blue;
      font-size: 20px;
      background-color: yellow;
    }
 }
```
위와 같이 사용하는 기기의 width값에 맞춰서 각각의 css를 작성해주면 된다.
미디어쿼리 사용 시 주의점

미디어쿼리 안에 작성하지 않은 속성은, 미디어쿼리 밖에 작성한 코드를 상속하기 때문에 양쪽의 코드를 확인해가며 변경을 해줘야한다.
미디어쿼리 사용 시 html 파일의 head 태그 안에
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
위와 같은 태그를 입력해줘야한다.
viewport: 웹사이트에 접속하는 기기의 화면
width=device-width: 웹사이트의 width값은 기기의 width값으로 적용
initial-scale=1.0: 비율은 1.0을 유지

※ 해당 meta 태그 참고 사이트
https://www.w3schools.com/css/css_rwd_viewport.asp
※ 디바이스 기기의 명확한 width값을 알고싶을 때 참고하기 좋은 사이트
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

작업한 페이지를 모바일 버전으로 확인하고 싶다면
1. 작성한 파일을 서버에 올려 도메인주소를 입력해 각 디바이스에서 접속하고 확인하기
  정확한 결과를 확인할 수 있지만 모든 디바이스에서 결과를 확인하기가 현실적으로 어려움
2. 크롬 브라우저의 개발자 도구를 사용하기
  
  기본적으로 다양한 디바이스의 크기를 제공하고 있고, 그 외에 커스텀 사이즈를 만들어서 등록하고 확인하는 것도 가능하다.
미디어쿼리 실무 팁
display 속성을 사용해서 원하는 정보를 원하는 기기에 맞춰서 표시할 수 있다.
```
.pc {
  color: red;
  font-size: 50px;
  background-color: pink;
}

.mobile {
  display: none;
}

@media (min-width: 320px) and (max-width: 767px) {
  .pc {
    display: none;
  }

  .mobile {
    display: block;
  }
}
```
위와 같이 미디어쿼리 밖에선 모바일 버전 오브젝트의 display 값을 none으로, 미디어쿼리 안에 작성하는 코드엔 pc 버전 오브젝트에 display값을 none으로, 모바일 버전 오브젝트에 원래의 속성과 일치하는 display 값을 주면 된다.
그렇지만 그렇게 좋은 방식이라고 보기는 어렵기 때문에 기획단계부터 각 디바이스를 모두 고려해서 컨텐츠를 작성하는 게 중요하다.

※ 일반적으로 모바일 버전의 웹사이트가 pc 버전의 웹사이트보다 정보가 적고 단순하기 때문에, 반응형 웹사이트 작업 시 모바일 버전 기획을 먼저 하는 것이 좋을 수도 있다.