[기초CSS 강좌 ] 반응형 레이아웃 만들기(홈페이지만들기)
.
반응형 홈페이지 만들기
웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다.
특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다.
이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다.
@media
이러한 작업을 할 수 있게 해주는 것이 @media입니다. 예를 들어
@media ( max-width: 768px ) {
body { color: red; }
}
와 같이 하면, 웹브라우저의 가로 해상도가 768px 이하일 때 글자색을 빨간색으로 바꿉니다. 즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능합니다.
주의할 점은 가로폭 조정을 위해서 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 넣어야 한다는 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
모바일 우선(Mobile First) VS 데스크톱 우선(Desktop First)
작은 가로폭부터 큰 가로폭 순서로 만드는 것을 모바일 우선(Mobile First), 큰 가로폭부터 작은 가로폭 순서로 만드는 것을 데스크톱 우선(Desktop First)이라고 합니다.
모바일 우선(Mobile First)
작은 가로폭부터 큰 가로폭 순서로 만들고, min-width를 이용합니다.
A
@media ( min-width: 768px ) {
B
}
@media ( min-width: 1024px ) {
C
}
기본 모양은 A, 768px 이상일 때는 B, 1024px 이상일 때는 C가 적용됩니다.
Bootstrap 등 대부분의 프레임워크는 모바일 우선으로 만들어져 있습니다.
데스크톱 우선(Desktop First)
큰 가로폭부터 작은 가로폭 순서로 만들고, max-width를 이용합니다.
A
@media ( max-width: 1023px ) {
B
}
@media ( max-width: 767px ) {
C
}
기본 모양은 A, 1023px 이하일 때는 B, 767px 이하일 때는 C가 적용됩니다.
예제 1
데스크톱 우선으로 만든 간단한 반응형 레이아웃 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#jb-container {
width: 940px;
margin: 10px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
#jb-header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
#jb-content {
width: 580px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-sidebar {
width: 260px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#jb-footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
@media ( max-width: 480px ) {
#jb-container {
width: auto;
}
#jb-content {
float: none;
width: auto;
}
#jb-sidebar {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h1>기독교인의 삶 </h1>
</div>
<div id="jb-content">
<h2>2018년 새해기도문</h2>
<p>
거룩하신 하나님!
이 시간 말씀을 통하여 은혜를 베풀어주시옵소서.
믿음 소망 사랑을 더하시며 하나님을 아는 지혜를 더하시며
성령의 능력으로 사로잡아주시며 소명의식으로 가득하게 하소서.
하나님 앞에서 거룩한 삶을 위한 진지한 결단을 갖게 하소서.
새해에도 그리스도 안에서 저희들 꾸준히 영적 성장을 하게 하시고
교회의 모든 식구들에게 육신의 건강과 가정의 평화를 주시며
저희 교회가 주의 은혜와 능력 가운데서 부흥 발전하며 예배, 교육, 친교, 선교, 봉사 등
교회 본분에 충실하게 하시며 저희 모두의 삶이 하나님의 영광을 나타내는
삶이 되게 하여 주시옵소서.
</p>
</div>
<div id="jb-sidebar">
<h2>Sidebar</h2>
<ul>
<li>믿음</li>
<li>소망</li>
<li>사랑</li>
</ul>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>
위 코드 결과입니다. 컴퓨터에서
모바일에서
