2. 반응형 웹의 맛보기!

33p~ 34p

가변 그리드에 대해서 간단히 알아보자.

간단히 html에 div tag를 이용해서 네모를 출력할 때,

id로 style을 지정해줄때, 가변 그리드를 사용하려면 하나만 바꾸면 됩니다.

<!DOCTYPE HTML>

<head>

<style>

*{margin:0; padding:0;}

#wrap {

width:90%;

height:500px;

margin:0 auto;

background:#ff00ff;

border:4px solid #001;

}

</style>

</head>

<body>

</div>

</body>

</html>

위의 소스는 보통의 html의 style입니다.

하지만 width에 px를 %로 바꾸면?!

width:90%;

이렇게 바꾸면 갑지가 반응형이 되어버립니다.

자~! 반응형 이제 끝?! 일까요??

아닙니다. 현재 웹이 반응형이긴 하지만 접속하는 기기의 해상도나 화면이 어느 크긴지 모르기때문에 아무런 소용이 없습니다.

이것을 해결해 주는 것이 있는데 이것들은 바로

미디어 쿼리와 뷰포트 입니다.

일단 맛보기는 여기까지로 하겠습니다.

감사합니다.

2. 반응형 웹의 맛보기! 끝.

티스토리툴바