210709_[10]_대구 AI스쿨_일반과정_웹 프로그래밍_CSS_8_media_queries

홍연수·2021년 7월 9일

1.학습한 내용

학습 첫번째 시간에 가장 먼저 배웠던 것은 반응형 웹 사이트 였다. 웹이 초창기에는 레이아웃의 변화가 없어서 창의 크기를 바꾸어서 보는 것이 불편했지만, PC 브라우저의 다양화 그리고 스마트폰과 태블릿 pc의 등장으로 사용자의 접속 환경에 맞추어 능동적으로 변화하는것이 필요하게 되었고, 다양한 틀에 맞추어져 변화시키는 것의 기본 개념인 media queries에 대해 학습을 시작하였다.

상기 시켜야할 개념 :
adaptive layout : 변화하기는 하지만, 뚝뚝 끊겨 가면서 줄어들거나 늘어남
responsive layout : 자연스럽게 줄거나 늘어나는 형태.

ex)
1. http://sisikiller.dothome.co.kr/ 이 사이트의 경우에는 adaptive 형태로 만들어짐
2. helbak.com responsive 형태로 제작됨
그리고 보통 모바일 환경에서 접속하면 나오는 m.naver.com의 도메인은 따로 모바일의 형태로 짜여진 것이다.

(1) 기본개념

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

	.mobile{
		display: block;
	}

}

@media 를 붙여서 사용하게 되는데, media 유형의 종류로는 screen, print 등이 있어서
@media screen { 화면스타일 작성 } 이렇게 사용할수 있는데 실무에서는 생략하고 사용을 한다.

기본적으로 어떤 환경(모바일, 윈도우)을 통해 접속하였는지는 width값으로 알 수 있다.

(2) viewport

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

viewport는 기기 화면을 의미,
"device의 width값은 웹사이트의 width값으로 하겠다. 비율은 1.0을 유지하겠다." 라는 의미 이다.

w3school viewport 검색후 첫페이지 들어가기 왜 이 코드를 써야하는지 설명이 나온다. 디바이스 비율에 맞게 맞추어 준다.

viewpoint를 적용하지 않으면 왼쪽과 같이 화면에 출력이 된다.

(3) size(mobile-태블릿-pc)에 대한 정보 확인

추가적으로 각각의 device (회사,종류) 별로 화면 size가 다른데, https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

여기에서 width height에 대한 정보를 알수 있다.
가장 핵심은 아래와 같다.

추가로 chrome 브라우저의 검사기능을 통해서 왼쪽 하단에 표시된 휴대폰 아이콘을 클릭하여도 size를 확인할수 있다.

(4) 추가적인 유용한 팁

여기에서 알아 두어야 할 개념은 (min-device-width) 라는 형태로 써도 무방하나 실무에서는 (min-width) 형태로 사용을 한다는것과 orientation 속성값의 portrait와 landscape의 개념은 각각 세로화면과 가로화면을 의미한다고 생각하면 된다.