개발일지 210709

학습한 내용

미디어쿼리

미디어쿼리

웹사이트를 모바일, 태블릿 환경에 맞도록 변화시키기 위해 설정

@media (min-width: ) and (max-width: ) {} 

• 사용자가 접속한 기기의 width값을 기준으로 환경 파악 가능
  📌check
  320 ~768px 미만 스마트폰
  768 ~ 1024px 미만 태블릿
  1024px 이상 PC
  
  
  📌주의점
  미디어쿼리 바깥쪽에 설정된 값을 확인하며 설정해야함!
  미디어쿼리 안쪽은 바깥쪽에 영향을 받음.
  이것이 번거롭다면 네이버처럼 모바일 따로 피시버전 따로 만들어라.
  
  
• 반드시 넣어야할 메타태그

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

✔viewport : 접속에 사용된 기기의 화면을 의미
✔width=device-width : 위드는 디바이스가 가진 위드값으로 설정
✔initial-scale=1.0 : 비율은 항상 1.0


✔orientation: portrait 사용자가 스마트폰을 세로로 들었을 때
✔orientation: landscape 사용자가 스마트폰을 가로로 들었을 때

참고사이트

• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  모든 디바이스 크기에 맞게 사용하고 싶을 때!
  모든 디바이스 크기를 알고 싶을 때!
• https://www.w3schools.com/css/css_rwd_viewport.asp

실무 tip 및 응용

• 기기 버전에 맞는 글자를 전달할 때
  ✔display 속성 사용✔

ex ) display: none;

• h1 태그는 block 성격이기 때문에 display: block;로 설정
  
  
• 먼저 모바일 버전을 제작하는 게 좋음
  태블릿 -> pc 로 확장하면서 만들면 효율적
  코드분량이 줄어들게 됨.

어려운 점

오늘은 기초 단계이다보니 막히는 부분은 없었다.
다만 @media (min width : 600px) 값 설정하고 난 후 브라우저에서 결과보다가 599.xxpx
600px미만인데도 불구하고 변화되길래 왜이럴까하며 고민했다.
나와 똑같은 고민으로 먼저 질문을 하신 분의 답변을 보니 크게 신경쓰지 않아도 될 듯하다.
근데 왜 저렇게 될까... 단위 문제인가..?

학습소감

이제 진짜 홈페이지 만들 때가 다가온 것 같다. 무섭;;