[html] 반응형 html 페이지

예전에는 데스크톱용 홈페이지만 만들었다고 하면 지금은 다양한 디바이스가 있습니다.

 

<!-- 예전 방식 -->
.left {
float:left;
width:50%
}

.right {
float:right;
width:50%
}

html에서는 예전과 달리 고정된 px을 사용하지 않고

Flex grid %, Flex box vw, vh를 사용해서 구현합니다.

 

추가로 css에서

Media Queries를 이용해 모바일, 태블릿, 데스크톱 화면을 어떻게 보여줄 것인지 구성할 수 있습니다.

그래서 데스크톱, 태블릿, 모바일 화면을 생각하면서 만들어야 합니다.

 

<!-- Media Query -->

@media screen and (min-widht: 800px) {
	.container {
    	widht: 50%;
    }
}


<!-- 
스크린 width 최소 값이 800이상이면 
container width 값이 50%로 적용

screen 대신 speech, print, all
and 대신 not, only, ,를 이용해서 작성 가능 
대부분 min-width, max-width를 이용해서 만듬.
 -->