![[CSS] 고정레이어 만들기](https://i0.wp.com/www.walterz.net/wp-content/uploads/2017/07/33904010290_a208543c82_z.jpg?resize=640%2C359&ssl=1)
페이스북의 상단 메뉴바와 우측 메신저 레이어와 같이 고정된 레이어를 생성하는 방법을 설명하는 글입니다. 자바스크립트가 아닌 HTML 오브젝트의 CSS 속성을 활용한 것이기 때문에 초보자도 쉽게 이해할 수 있을 것입니다. 고정 레이어는 메뉴를 고정시키거나 위로가기 버튼을 만들어 방문자가 다른 페이지에 쉽게 접근할 수 있도록 할 때 많이 사용됩니다.
CSS를 이용하여 생성한 고정 레이어
고정 레이어는 겉으로 보기에 복잡해 보이지만 실제로는 매우 간단하게 만들 수 있습니다. HTML DOM 객체의 CSS 속성 중 하나인 position 속성을 fixed로 설정하면 해당 레이어는 브라우저 화면에 고정됩니다. 이 방법을 활용하면 페이스북의 접속중 친구목록과 같이 고정된 레이어를 활용하여 방문자에게 편리한 인터페이스를 제공할 수 있습니다.
참고로 이 블로그도 모바일 화면에서는 고정된 레이어를 활용하고 있습니다. 상단의 메뉴 바를 웹브라우저 상단에 고정시켜 방문자가 쉽게 다른 메뉴로 이동할 수 있도록 배려하고 있습니다.
고정레이어 생성 예제
웹브라우저 화면에 고정되는 레이어는 자바스크립트나 CSS를 이용하여 만들 수 있습니다. 과거에는 자바스크립트를 이용하여 만드는 것이 주를 이루었다면, 지금은 CSS 버전의 발전으로 CSS를 좀 더 많이 사용하는 추세입니다. CSS가 자바스크립트보다 가볍고 빠르게 작동하는 스크립트 언어이기 때문입니다. 이 글에서 설명하는 예제도 자바스크립트가 아닌 CSS를 활용하여 고정되는 레이어를 만드는 소스코드입니다.
고정된 레이어가 포함된 HTML 예제를 통하여 좀 더 쉽게 알아보도록 하겠습니다. 아래의 HTML 소스는 웹브라우저 화면 상단에 고정된 레이어를 생성합니다. 소스코드를 보면 아시겠지만, 자바스크립트는 사용되지 않았습니다. CSS는 자바스크립트보다 간단하고 컴퓨터에서도 빠르게 처리되는 스크립트 언어이기 때문에 속도상으로 매우 빠릅니다.
만약 자바스크립트를 사용했었다면, 스크롤바를 감지하여 상단 객체의 top 속성을 계속해서 바꾸어주어야 하는 처리가 필요합니다. 이렇게 연속적인 계산 작업이 발생될 때에는 연산 속도가 느린 컴퓨터에서 조금 버벅되는 느낌이 들 수 있습니다. 그렇기 때문에 CSS를 활용하는 것입니다. 아래의 HTML 예제를 바탕으로 고정 레이어 생성에 대하여 쉽게 알아보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>고정 레이어 실험</title>
<style type="text/css">
#layer_fixed
{
height:35px;
width:100%;
color: #555;
font-size:12px;
position:fixed;
z-index:999;
top:0px;
left:0px;
-webkit-box-shadow: 0 1px 2px 0 #777;
box-shadow: 0 1px 2px 0 #777;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="layer_fixed">
<table cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle; padding-left: 20px; padding-right: 20px;">
고정된 레이어입니다.
</td>
</tr>
</table>
</div>
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
</body>
</html>
위의 HTML 소스코드를 CSS 부분과 BODY 부분으로 나누어 설명하도록 하겠습니다. CSS 부분에서는 BODY 부분에 추가된 DIV 오브젝트의 스타일을 정의하는 부분이고 BODY 부분은 웹브라우저 화면에 콘텐츠를 출력하는 부분입니다. 이 소스코드에서는 CSS 부분이 가장 중요합니다. CSS의 position 속성이 고정 레이어를 만들 때 가장 결정적인 역할을 담당하기 때문입니다.
CSS 부분에 관한 설명
#layer_fixed
{
height:35px;
width:100%;
color: #555;
font-size:12px;
position:fixed;
z-index:999;
top:0px;
left:0px;
-webkit-box-shadow: 0 1px 2px 0 #777;
box-shadow: 0 1px 2px 0 #777;
background-color:#ccc;
}
CSS 부분에서 가장 중요한 것은 position 속성입니다. 이 속성이 fixed로 설정되어 있을 때 해당 객체가 웹브라우저 화면에 고정됩니다. position 속성이 fixed로 설정되어 있을 때에는 left, top, right, bottom 속성을 활용하여 해당 DIV 객체가 위치하는 곳을 직접 지정할 수도 있습니다. 위 예제에서는 top과 left 속성이 모두 0px로 설정되어 있으므로 왼쪽에서 0픽셀, 위에서 0픽셀 즉, 웹브라우저 상단에 레이어를 고정시키는 결과를 가져옵니다.
z-index 속성은 레이어가 다른 레이어에 대하여 어느정도의 위치에 있는지를 나타냅니다. 쉽게 말해서, 다른 레이어와 겹치는 위치를 나타내는 것인데, 숫자가 높을 수록 위쪽에 위치하게 됩니다. 워드프로세서의 [객체 맨 위로]와 같은 속성을 떠올리면 되겠습니다. 위 예제에서는 z-index 값이 999이므로 대부분의 레이어보다 항상 위쪽에 위치하게 됩니다. 따라서 어떠한 객체가 나타난다 하더라도 화면 상단에 고정된 레이어를 가리는 객체는 나타나지 않을 것입니다.
box-shadow 속성은 객체에 그림자를 만들어주는 속성입니다. 위치가 고정된 레이어에 미적인 요소를 더하기 위하여 그림자 속성을 추가하였습니다. 공중에 떠 있는 객체라는 사실을 사용자가 쉽게 인지할 수 있도록 레이어의 아래쪽에 그림자를 넣는 것이 일반적으로 사용되는 레이아웃 디자인 방법입니다. 위 예제를 실행하면 상단 박스에 그림자가 나타나는 것을 확인할 수 있습니다.
BODY 부분에 관한 설명
<div id="layer_fixed">
<table cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle; padding-left: 20px; padding-right: 20px;">
고정된 레이어입니다.
</td>
</tr>
</table>
</div>
BODY 부분은 실제로 브라우저에 나타나는 내용이 입력되는 부분입니다. 위 예제에서는 앞서 설명했던 CSS에서 정의한 layer_fixed를 ID로 가지는 레이어를 생성하였습니다. 웹브라우저 화면에 고정되는 레이어는 일반적으로 DIV 태그를 사용하여 만듭니다. 이렇게 만들어진 DIV 태그는 레이어라고 부릅니다. 위 예제에서 상단에 고정될 레이어에 테이블을 삽입한 이유는 가운데 정렬을 하기 위함입니다.
테이블 내부에 각종 내용을 추가하여 멋있는 고정된 레이어를 만들 수 있습니다. 화면상단에 고정되는 레이어에서 가장 많이 사용되는 콘텐츠는 메뉴입니다. 이 블로그에서도 모바일 화면에 한정하여 상단 메뉴는 화면에 고정될 수 있도록 만들었습니다. 이 방법은 모바일 환경에서 다른 페이지로의 접근을 용이하게 하여 방문자가 해당 사이트에 좀 더 오랫동안 머무를 수 있게 할 수 있습니다.
타이틀 이미지: Christiaan Colen, JavaScript source code ransomware, Flickr. CC BY-SA 2.0.
