devlogs-210709

Wonseok Choi·2021년 7월 9일

CSS 개발일지 대구AI스쿨 미디어쿼리

대구AI스쿨

목록 보기

9/49

간단한 요약

미디어쿼리에 관한 강의였다. 현재 1/2만큼 진행한 상황.

배운 내용

1. 모바일 버전 웹사이트

pc 버전과 모바일 버전의 구조가 많이 다를 경우, naver처럼 모바일 버전 웹사이트를 따로 제작하는 경우도 있음

2. Media Query

유저가 사용하는 브라우저의 크기에 따라 다른 css styling을 적용할 수 있다.

일반적으로 인식되는 device 별 해상도
320px <= 스마트폰 < 768px
768px <= 태블릿 < 1024px
1024px <= PC

2-1. 기억할 점

a) 특정 크기에서 미디어쿼리를 적용하고자 할 때, 만약 미디어쿼리 밖의 코드(원래의 값) 중 빠진 것이 있다면, 이는(원래의 값)이 상속된다.

b) 미디어쿼리 사용을 위해 반드시 써야하는 Meta Tag가 있음⬇️
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
viewport: Device의 화면
width=device-width: 웹사이트의 width는 Device의 width값
initial-scale=1.0: 비율은 항상 1.0

c) 특정 Device의 미디어쿼리가 알고 싶다면 여기에서 확인 가능

d) 내가 만든 웹사이트가 다양한 Device에서 어떻게 보이는 지 확인하기 위해선, 크롬의 개발자 도구에서 확인 가능하다.

2-2. 실무 팁

display: none;와 @media () and () {}을 이용하여, 특정 크기(Device)일 경우 특정 요소를 보이지 않게 하기도 한다.
만약 layout을 구축해야 할 경우, 모바일 버전을 먼저 제작한 후에 살을 덧붙여 PC 버전을 제작하는 것이 편할 수 있다. from SIMPLE to COMPLEX

2-3. 미디어쿼리 관련 코딩 진행 팁

아래의 (min-width: 768px)가 모바일 버전의 기준이 된다.
즉, 미디어쿼리 안: PC 버전 // 밖: css code 모바일 버전
h1 {
  font-size: 20px;
  background-color: yellow;
}
@media (min-width: 768px) {
  h1 {
    font-size: 40px;
    background-color: yellowgreen;
  }
}
만약, (min-width: 1024px)에 대한 코딩을 덧붙여 제작한다면, 이 미디어쿼리 안의 값은 더 넓은 화면의 Device를 위한 코드가 된다. 즉, 굳이 (min-width: 768px) and (max-width~)로 미리 세세하게 설정하여 제작할 필요가 없다.