레이아웃_4
레이아웃
정보를 정리해서 일관된 모습으로 보여지도록 하는 것은 디자인에서 매우 중요한 주제이다.
구획을 나누고 적절히 정보를 배치하는 것을 레이아웃(layout)이라고 한다.
media query
화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 기능이다.
화면의 크기에 적합하게 능동적으로 디자인하는 반응형 디자인의 핵심 기술이다.
예시
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (max-width:600px){
body{
background-color: green;
}
}
@media (max-width:500px){
body{
background-color: red;
}
}
@media (min-width:601px){
body{
background-color: blue;
}
}
</style>
</head>
<body>
~500px : red
501~600px : green
601px~ : blue
</body>
</html>
media query 활용
페이지가 창의 크기에 따라서 적합한 디자인으로 바뀌도록 한다.
See the Pen Untitled by Bakcoding (@bakcoding) on CodePen.