Responsive Web Design
이 용어는 스마트폰의 태동과 함께 시작된 개념으로 무척이나 오래되었죠. 작은 기기(스마트폰, 테블릿pc)에서
웹페이지를 검색하는 시대이다 보니 자연스럽게 최적화된 웹페이지의 레이아웃의 필요성이 대두되어 많은(?)
관심을 가지게 되었지만 아직도 이 기술을 잘 활용하지는 않는 편이죠. 관리가 무척 번거롭거든요. 대부분은
모바일용 사이트를 따로 관리하도록 쇼핑몰 업체 등이 제공하는 것을 보면 간단한 사이트 정도많이 화면에
반응하는 레이아웃을 컨트롤 할 수 있기에 그렇게 생각되네요. 아무튼 이 개념을 연습해 보도록 하죠.
Media Queries 알아보기
Media query 는 CSS3에서 소개된 기술로서 특정한 조건이 충족될 때만 발현되는 스타일 시트 블록 구문이라고
생각하시면 됩니다.
하나의 예제를 살펴보죠.
아래의 샘플코드는 브라우저 창 크기를 조정하면 이 문서의 너비가 600픽셀 이하일 때 배경색은 "라이트블루"이고, 그렇지 않으면 "라이트그린"입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
위에서 max-width: 600px 라는 구문은 600픽셀을 넘어가면 라이트그린 으로 색상이 바뀐다는 의미로 해석하시면 됩니다.
'css' 카테고리의 다른 글
| 내용을 가운데 정렬하는 스타일 지정 방법 (0) | 2024.02.16 |
|---|---|
| padding 속성 이해하기 (0) | 2024.02.15 |