[Day 20] CSS - 반응형 웹과 미디어 쿼리


[Day 20] CSS - 반응형 웹과 미디어 쿼리

이번 게시글부터는 다른 폰트를 이용해서 써보겠습니다 ㅎ.ㅎ(뭔가 더 깔끔해보이는 것 같아요!) 1. 반응형 웹 디자인 : 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 주는 것 1) 뷰포트(viewport) : 실제 내용이 표시되는 영역 - <meta> 태그 이용해서 <head></head>사이에 작성 <meta name="viewport" content="속성1=값1", "속성2=값2", .....> 뷰포트 속성 - width(뷰포트 너비) - height(뷰포트 높이) - user-scalabe(확대, 축소 가능 여부) - initial-scale(초기 확대, 축소 값) 가장 많이 쓰이는 뷰포트 속성 <meta name="viewport" content="width=device-width, initial-scale=1"> <!--뷰포트의 너비는 스마트폰 화면 너비에 맞춤, 초기 화면 배율은 1--> cf) 뷰포트 단위 vw(뷰포트 너비의 1%) vh(뷰포트...


#css #노란오리의하루기록 #미디어쿼리 #반응형웹 #뷰포트

원문링크 : [Day 20] CSS - 반응형 웹과 미디어 쿼리