CSS 애니메이션, 반응형 웹_2 (9/6)

권숙현·2023년 9월 6일

CSS JavaScript elice's adventure html

Javascript's Adventure

목록 보기

4/10

4장 모바일에 대응되는 웹사이트를 만들어 보자

미디어 쿼리 : 내가 만든 웹사이트를 pc뿐만 아니라 태블릿, 모바일 환경에서도 자유자제로 레이아웃이 변화하도록 만들 수 있는 것

1. 미디어쿼리 소개

[미디어쿼리란]

pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기위
모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
반응형 : 브라우저 폭을 줄이거나 늘렸을 때, 자연스러운 re-size 효과가 나타남
적응형 : 브라우저 폭을 줄이거나 늘렸을 때, 뚝뚝 끊기면서 변화함

[미디어쿼리 media]

<style>
  .media {
    width: 500px;
    height: 500px;
    background-color: red;
  }
  @media (min-width: 320px) and (max-width: 800px) {
    .media {
      width: 300px;
      height: 300px;
      background-color: yellow;
      solid: solid 10px blue;
    }
  /*@media {} 안에 .media {}를 작성하는 방향으로 작성해야함*/
  }
</style>

min-width와 max-width로 브라우저 가로폭 설정
브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css속성으로 대체하겠다는 의미
" 태블릿, 모바일등의 가로 세로 폭으로 min, max폭을 측정 "

[미디어쿼리가 정상적으로 출력되는지 확인하는 법]

크롬 개발자 도구 [option+command+I] > 확인 가능

2. 미디어쿼리 사용시 주의사항

[viewport]

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

위 메타 코드가 head 태그 안에 들어가 있어야 함.

미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음.
여기서 viewport는 다양한 디지철 기기의 화면 상에 표시되는 영역을 의미
너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나
width=device-width : viewport의 가로폭>디바이스의 가로폭
initial-scale=1.0 : 비율은 항상 1.0

[CSS 속성 상속]

<style>
  .media {
    width: 500px;
    height: 500px;
    background-color: red;
  }
  @media (min-width: 320px) and (max-width: 800px) {
    .media {
      width: 300px;
      height: 300px;
      background-color: none;
    }
  }
</style>

미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음 >> 어떤 값을 상속받는지 계속 확인하면서 코드 작성할 필요가 있음
만약 상속을 받지 않고자 하면 속성값으로 none 입력

3. 배운 미디어쿼리 내용 적용하기

1) 상단 intro의 width를 50% >> 100%로 변경하기
2) h1 a > 줄어들면서 가운데 정렬로 변경됨

[main]

1) 본문의 이미지 영역이 50% >> 100%로 위아래 출력으로 변경하기

[foot]

./index.html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  ...
</head>

./index.css
<style>
  @media (min-width:320px) and (max-width:800px) {
    .container{ width: 640px; }
    #intro { height:160px; }
    #intro h1 { width:100%; }
    #intro h1 a { text-align: center; padding: 22px 0 0 0; }
    #intro nav { width:100%; }
    /* 미디어쿼리 작성할 때에는 #intro의 기본 CSS 속성값보다 아래에 작성해야 함. */
    
    #main article { width: 100%; height: 420px; }
    
    #footer { padding: 20px 0;}
    #footer .copyright, #footer .address { width: 100%; }
    #footer .copyright p, #footer .address p { text-align: center; padding: 0;}
    #footer .address p { padding-top: 20px; }
  }
</style>