210709 개발일지

1) 학습한 내용
웹프로그래밍6_미디어쿼리
github

웹사이트를 PC,모바일,태블릿 사용시 자연스럽게 변화주는 것
적응형웹사이트: 사이트 크기 줄일수록 끊겨가며 나타남(고정 픽셀값 가지고있음)
반응형 웹사이트: 사이트 크기 줄일수록 자연스럽게 (퍼센티지 값 사용)

width값 기준이 분기점
320px ~ 768px미만	: 스마트폰
768px ~ 1024px 미만 	: 태블릿
1024px 이상 ~ 		: PC

@media (min-width: 300px) and (max-width: 767px) {
    .pc {
        color: blue;
        font-size: 20px;
        background-color: yellow;
    }

}

미디어 쿼리 주의점
pc버전 css를 모바일에서 다르게 적용시, pc버전의 css코드를 확인해가며 작업해야함
바깥쪽 코드가 미디어쿼리 안 쪽에도 상속되므로! 번거로우면 파일을 따로 만들어도 됨

*반드시 넣어줘야하는 메타태그

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

"viewport" : 웹사이트 사용시 기기 화면의미
"width=device-width, initial-scale=1.0" : 접속된 기기의 디바이스의 높이값을 높이로 보며, 비율은 항상 1.0으로 두겠다.의 의미
https://www.w3schools.com/css/css_rwd_viewport.asp

[media query standard device]
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
참고)orientation: portrait(세로)/landscape(가로) : 스마트폰 사용시 세로모드, 가로모드 아니면 아예 추가로 기준점(@media)을 하나 더 만들어줘도 됨

모바일 버전 확인시: 크롬 검사모드 들어가서 핸드폰 모양 누른후, html 우측화면에 놓기
사이트의 모바일 버전을 보고싶으면 늘였다 줄였다하면서 찾아야함
https://www.awwwards.com/websites/

실무팁)
모바일, pc버전 각 사용시 나타내야 하는 자료가 다를 때

h1 두 개 일때 예시 1,2
예시1.

  <h1 class="pc">PC Hello world</h1>
  <h1 class="mobile">Mobile Hello world</h1>
  .pc {
      display: none;

      color: red;
      font-size: 50px;
      background-color: pink;
  }

display: none; 쓰면 Mobile Hello world 내용만 출력됨

예시2.

.mobile {
    display: none;
}

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

처음 모바일 안보이게 설정해놓고 중간 pc값 나타나게 한후, 다시 모바일값 나타내려면
h1이 block값이므로 다시 넣어주면 나타나게 됨 inline도 나타남(하지만 각 코드마다 고유성격 값을 넣는게 더나음), none이외의 값만 넣어주면 나타남. (늘이면)PC Hello world - (줄이면)Mobile Hello world 나타남

---

모바일 버전 시작

  <h1>미디어쿼리의 응용</h1>
  h1 {
      font-size: 20px;
      background-color: yellow;
  }

  @media (min-width 768px) {
      h1 {
          font-size: 40px;
          background-color: pink;
      }
  }

  @media (min-width: 1024px) {
      h1 {
          font-size: 80px;
          background-color: gray;
      }
  }

h1은 모바일 버전, 첫 번째 @media은 태블릿, 두 번째 @media는 pc버전이 되는 것
이 때 첫 번째 @media는 768px이상 max-width 1024px 미만이란 의미
모바일-태블릿-pc 순서로 하는 것이 코드분량이 줄어들게 됨.

2) 학습내용 중 어려웠던 점
각 화면 별 적용과 미디어쿼리 2개이상의 사용

3) 해결방법
다시한번 코드를 읽어봄으로 개념이 이해되었다.

기계 별 화면 크기 코드 참조사이트
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

4) 학습소감
매일 쓰는 적응형,반응형 사이트의 활용법을 알게되었다.