CSS 반응형 레이아웃 만들기

Web 프로그램/Layout 2018. 6. 2. 08:12

728x90

반응형웹은 다양한 디바이스(PC, 노트북, 테블릿, 스마트폰 등)에 최적화된 UI를 제공하게 할 수 있다.
웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 한다.
너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문이다.
해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높인다.

이러한 작업을 할 수 있게 해주는 것이 @media 이다. media 쿼리는 장치 특성에 따라 브라우저가 해석해야 할 CSS 코드를 분기 처리하는 규칙이다. 보통 해상도 또는 해상력을 판별하여 분기 처리한다.

CSS3 @media 쿼리는 IE6~8 브라우저에서는 지원되지 않는다. 그래서 Javascript로 구현된 respond.js를 이용해서 이 문제를 해결해야한다. respond.min.js 라이브러리를 사용하면 IE6~8 브라우저도 media 쿼리를 해석할 수 있다.

html5shiv.js 파일을 문서 head 요소 내부에 삽입하면 IE6~8 브라우저도 HTML5 요소를 화면에 표시하게 된다.

하지만 html5shiv.js 파일을 추가해도 새로운 요소들 때문에 화면이 깨지는 증상을 발견할 수 있다. 이유는 display:block 으로 표시를 해야 할 블럭 요소들이 display:inline 으로 랜더링 되기 때문이다.

header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{
display:block
}

인라인 형태로 표시되던 새로운 HTML5 요소를 블럭 요소로 변경해 준다. 이제 IE 6~8 브라우저도 HTML5 요소를 화면에 제대로 표시하게 된다.

최근에는 IE6~8 사용 거의 안하므로 이런 건 무시하자.

고정으로 보일 영역과 가변으로 보일 영역을 지정한다.
고정 영역에서도 padding 처리, 글꼴 크기 등을 조절하여 디바이스 기기에 따라 변하게 작성한다.

A 영역에는 공용으로 사용할 기본 CSS를 모두 적어준다.

B/C/D/E 영역에는 기본 사항과 공통 요소 값을 다르게 적어주면 해당 해상도에 따라 덮어쓰기가 된다.

A

/* ########### 599px 이하 ########### */
@media (max-width: 599px) {
B
}

/* ########### 600px 이상 ~ 767px 이하 ########### */
@media (min-width: 600px) and (max-width: 767px) {
C
}

/* ########### 768px 이상 ########### */
@media ( min-width: 768px ) {
D
}

/* ########### 1040px 이상 ########### */
@media ( min-width: 1024px ) {
E
}

Layout 구성하는 예제를 작성해보자.

가장 먼저 전체 Layout 에서 헤더 중심으로 파일을 살펴본다.

<!doctype html>
<html lang="en">
<head>
<title>반응형 웹 예제</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

</body>
</html>

webkit 계열 iOS, Android 모바일 브라우저에서 이코드를 해석한다.

jQuery 를 사용하기 위해 https://www.w3schools.com/ 를 참조하여 Header 를 구성하면 편하다.

이제 main.css 파일 내용은 @media 를 사용해서 작성할 것이다.

<body> </body> 사이의 구성할 Layout 은 <div></div> 를 사용한다.

div 태그는 기본 속성이 세로로 하나씩 추가되므로 container 에 가로로 정렬되도록 하려면 별도 처리를 해야 한다.

div 태그 : float 속성으로 가로 정렬 한다.

/* ########### 768px 이상 ########### */
@media ( min-width: 768px ) {
    .container:after {content:"";display:both;clear:both;}
    .sidemenu { float:left; width:160px;}
    .content {float:none; width:auto; margin-left:160px;}
    /* sidemenu 와 content 의 왼쪽 오른쪽의 간격 */
    .sidemenu    {
        padding-right: 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .footer {

clear:both; /* float 속성 적용한 것을 해제하겠다. */

width:100%;

}
}

<div class="header"></div>

에는 상단 가로정렬 메뉴를 만들어보자.

위와 같은 코드만 추가하면 메뉴는 세로 정렬로 추가된다.

가로 정렬로 추가되도록 하려면 CSS 코드를 추가해줘야 한다.

/* 메뉴(가로 정렬) */
.topmenu ul {    margin: 0; padding: 0; list-style: none; }
.topmenu li a    {
    display: block;
    padding: 7px 10px;
    color: #000000;
    font-size: 14px;
    text-decoration: none;
}
.topmenu li a:hover {background-color: #F7D358;}
.topmenu ul:after    {content: ""; display: block; clear: both;}
.topmenu li {float: left; width: auto;}

header를 바의 형태로 디자인 하려면

.header {background-color: #58D3F7;}

사이드 메뉴 만들기

/* 사이드 메뉴(sidemenu) */
.sidemenu ul {margin: 0; padding: 0; list-style: none;}
.sidemenu li a   {
   display: block;
   padding: 5px;
   color: #000000;
   font-size: 14px;
   text-decoration: none;
}
.sidemenu li a:hover {background-color: #eeeeee;}

content 부분

    <div class="content">
       <article class="story">
           <h2>본문 제목</h2>
           <p><img src="img/img_sample.png" alt=""></p>
           <p>본문 내용을 여기에 작성한다.</p>
           <p>김남길과 김아중이 연기한 명불허전은 조선시대 침술대가 허임을 소재로......</p>
       </article>
   </div>

/* 본문 기사 */
.story h1   {margin-top: 0;   margin-bottom: 10px;font-size: 26px;}
.story p   {margin-top: 0;   margin-bottom: 10px;}
.story img   {max-width: 100%; height: auto}

연습한 Layout 샘플 파일을 첨부한다.

layout_sample.zip

구글에서 "반응형 css 예제" 로 검색하면 참고할 수 있는 자료가 많이 나온다.

div 화면 구성하는 것을 많이 다뤄보면 도움된다.

저작자표시 비영리

'Web 프로그램 > Layout' 카테고리의 다른 글

MDBootstrap Layout 알아둘 사항 (0)	2019.01.22
Layout 만들기 예제 -1 (0)	2018.04.24
div 태그를 이용하여 레이아웃 만들기 (0)	2018.04.24
bxslider 사용 예제 (폴더내 파일 자동 인식) (0)	2017.04.28
[PHP] 현재 디렉토리 경로 설정 (자동인식) (0)	2017.02.20

Link2Me