간단한 요약

미디어쿼리에 관한 강의였다. 현재 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~)로 미리 세세하게 설정하여 제작할 필요가 없다.

어려운 내용

미디어 쿼리에 대해서는 이번에 처음 배웠다. 하지만 이번 강의 초반에 언급된 적응형, 반응형 웹사이트와 관련한 내용이라 많이 난해한 개념은 아니었다.

소감

몰랐던 내용의 학습 및 실무 팁까지 종종 얻을 수 있어, 늘 만족하며 강의를 듣고 있다.

나의 코드

진행한 나의 코드는 역시 Github에 업로드하였다.