CSS3 응용과 레이아웃
<p></p>학습 목표
- CSS3를 사용해 수평 정렬하는 방법을 알아봅니다.
- CSS3를 사용해 중앙 정렬하는 방법을 알아봅니다.
- CSS3를 사용해 One True 레이아웃을 구성하는 방법을 알아봅니다.
- CSS3의 절대 좌표를 활용하는 방법을 알아봅니다.
Preview
이 장에서는 웹 페이지 개발에 사용하는 주요 레이아웃 구성 방법을 정리합니다. 간단하게 정리하지만 응용할 수 있는 분야가 굉장히 많으므로 이 책에서 가장 중요한 내용이라고 생각합니다. 따라서 CSS3 응용 부분이라 수업 여건상 다루지 못하더라도 개인적으로 차근차근 살펴보고 여러 번 연습하기 바랍니다.
이 장은 응용 예제로만 구성되어 있습니다. 한 번씩 따라 해 보고, 필요한 기능을 찾아 용도에 맞게 변형해 사용합니다. 이해하기 어려운 부분이 있다면 4~6장에서 다룬 기본 내용을 참고 합니다.
응용 예제 7-1 수평 정렬
6장에서 배운 float와 overflow 속성을 사용해 레이아웃을 만드는 방법을 살펴보겠습니다. 수평으로 ㅇ요소를 정렬할 때는 반드시 다음 규칙을 기억해주세요.
" 자손에게 float 속성을 지정하고, 부모의 overflow 속성을 hidden으로 적용합니다. ㅁ"
특별한 경우를 제외하면 대부분 이러한 규칙을 사용해서 요소를 수평으로 정렬합니다. 다음 코드는 div,item 태그에 float 속성을 left로 적용하고, 부모의 overflow 속성을 hidden으로 적용해 요소를 수평으로 정렬합니다.
[코드 7-1] 수평정렬
<!DOCTYPE html>
<html>
<head>
<title>Float with Overflow</title>
<style>
div.container {
overflow: hidden;
}
div.item {
float: left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container>
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</body>
</html>
코드를 실해앟면 div.item. 태그가 수평으로 정렬됩니다.
NOTE_ overflow 속성을 적용하지 않았을 때
overflow 속성을 왜 지정해야 하는지 의문을 품을 수 있습니다. 간단하게 비교해서 알아보겠습니다. [코드 7-1]에서 overflow 속성을 제거해서 [코드 7-2]처럼 수평 정렬한 요소의 앞뒤로 글자를 넣어 줍니다. 이 상태로 코드를 실행하면 [그림 7-1]처럼 출력됩니다.
코드 7-2 수평 정렬과 overflow 속성
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="container">
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
[그림 7-1] overflow 속성을 적용하지 않았을 때
float 속성을 설정하면 해당 요소가 부유하므로 [그림 7-1]처럼 보입니다. 이를 막으려고 부모의 overflow 속성을 hidden으로 입력했습니다. width 속성과 height 속성을 입력하지 않고 overflow 속성을 적용하면 자손이 차지하는 너비를 모두 감싸는 특성이 있습니다. 따라서 [그림 7-2]처럼 요소 위쪽과 아래쪽에 글자가 출력됩니다.
[그림 7-2] overflow 속성을 적용했을 때
overflow 속성을 사용하지 않고 height 속성을 지정하기도 합니다.
응용 예제 7-2 중앙 정렬 레이아웃 구성
중앙 정렬은 현대에 가장 많이 사용하는 레이아웃 구성 방법입니다. 포털을 비롯한 다른 웹 사이트를 살펴보면 [그림 7-3]처럼 특정한 너비의 중앙에 내용이 위치합니다.
이러한 구성을 중앙 정렬 레이아웃이라고 합니다. 만드는 방법은 간단합니다. 다음 코드처럼 중앙 정렬 요소에 해당하는 태그에 width 속성을 부여하고 margin 속성을 '0 auto'로 입력합니다.
[코드 7-3] 중앙 정렬 레이아웃
<!DOCTYPE html>
<html>
<head>
<title>Margin width</title>
<style>
/* 초기화 */
* { margin: 0; padding: 0;
}
/* 주제 */
body {
margin: 0 auto;
width: 960px;
}
</style>
</head>
<body>
<h1>Lorem ipsm</h1>
<h2>Neque porro quispuam est qui...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Quisque cursus sem tortor, eu interdum elit.</p>
</body>
</html>
코드를 실행하면 body 태그에 해당하는 제목과 본문이 중앙에 위치합니다. 간단한 내용이지만 웹 페이지 전체나 제목 요소에 적용할 수 있는 중요한 내용이므로 반드시 기억하기 바랍니다.
NOTE_ 그리드 시스템
일반적으로 중앙 정렬 된은 공간의 너비는 특정한 숫자로나누어 떨어지는 숫자를 사용합니다. 예를 들어 960px은 1,2,,3,4,5,6,8,10,12로 나누어 떨어지는 숫자이므로 레이아웃을 구성하기가 쉽습니다. 나누어 떨어지는 숫자를 사용할 때는 [그림 7-4]처럼 쉽게 레이아웃을 구성할 수 있기 때문입니다.
화면을 쪼개서 레이아웃을 구성하는 것을 그리드 시스템이라고 하며, 일반적으로 880px, 960px, 980px을 많이 사용합니다.
응용 예제 7-3 One True 레이아웃 구성
One True 레이아웃은 [그림 7-5]처럼 웹 페이지를 만들 때 사용하는 기본 레이아웃 구성 방법입니다. 국내 모든 포털 사이트의 메인 페이지는 One True 레이아웃을 사용해 개발했습니다.
One True 레이아웃을 사용하는 방법은 종합 예제에서 다룰 것이므로 여기에서는 레이아웃 구성 방법을 살펴보겠습니다. One True 레이아웃의 기본 원리는 굉장히 쉽습니다.
"행을 독립적으로 생각 합니다."
행을 독립적으로 생각해서 공간을 나눕니다.ㅏ [그림7-5]는 3개의 행으로 구분되므로 다음 코드처럼 공간을 3개로 분할합니다. 각 태그를 #top 태그, #middle 태그, #bottom 태그라고 칭하겠습니다.
코드 7-4 One True 레이아웃의 행 구성
<body>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</body>
이어서 열을 구분합니다. [그림 7-5]에서는 중간에 있는 공간을 2개로 나눕ㄴ디ㅏ. 따라서 다음 코드처럼 #middle 태그 내부를 공간 분할 태그로 분할합니다.
코드 7-5 One True 레이아웃의 열 구성
<body>
<div id="top"></div>
<div id="middle">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
</body>
이렇게 공간을 분할한 후 다음 과정을 거쳐 레이아웃을 구성합니다.
1. 부모 태그에 고정된 너비를 입력합니다.
2. 수평 정렬하는 부모 태그의 overflow 속성에 hidden을 적용합니다.
3. 자손 태그에 적당한 너비를 입력하고 float 속성을 적용합니다.
이 과정을 거쳐 [코드 7-6] 처럼 작성할 수 있습니다. 중앙 정렬 레이아웃을 사용해 body 태그에 고정된 너비를 설정하고, 요소를 수평으로 정렬해야 하는 #middle 태그의 overflow 속성에 hidden을 적용했습니다. 마지막으로 #left 태그와 #right 태그에 적당한 너비를 설정하고 float 속성을 적용합니다. 또 실행 결과를 효과적으로 살펴보려고 배경 색상도 넣습니다.
[코드 7-6] One True 레이아웃 구성
<!DOCTYPE html>
<html>
<head>
<title>One True Layout</title>
<style>
body {
width: 500px;
margin: 10px auto;
}
#middle { overflow: hidden; }
#left { float: left; width: 150px; background: red; }
#right { float: left; width: 350px; background: blue; }
#top { background: green; }
#bottom { background: purple; }
</style>
</head>
<body>
<div id="top">Lorem ipsum dolor sit amet, consectertur adipiscing.</div>
<div id="middle">
<div id="left">Lorem ipsum dolor sit amet, consectetur adipsicingl.</div>
<div id="right">Lorem ispum dolor sit amet, consectetur elit.</div>
</div>
<div id="bottom">Lorem ipsum dolor sit amet, consectetur.</div>
</body>
</html>
각 태그가 적당한 위치를 찾아 들어가죠? 자손 태그의 너비 총합이 부모의 너비가 될 대가 가장 좋습니다. [코드 7-6]에서 부모는 너비가 500px입니다. 따라서 #left 태그와 #right 태그의 너비 총합(150px +350px)이 500px이 되도록 구성했습니다.
NOTE_ ONE True 레이아웃의 핵심은 각 행을 독립적으로 구성한다는 것입니다. 이를 구현하려고 다음 규칙을 적용해 스타일시트를 작성합니다.
1. 자손에 float 속성을 적용합니다.
2. 부모의 overflow 속성에 hidden을 적용합니다.
width 속성과 height 속성을 지정하지 않고 overflow 속성에 hidden을 적용하면 부유하는 영역을 감쌉니다. [코드7-6]에서 overflow 속성을 지정하지 않으면 [그림 7-6]처럼 float 속성을 적용한 자손이 있는 행을 다른 행이 침범합니다.
두 가지 규칙을 기억하고 있으면 어떠한 레이아웃이든 개발할 수 있습니다. 중요한 내용이므로 기억하기 바랍니다.
응용 예제 7-4 절대 위치를 사용해 요소 배치
절대 위치를 사용한 요소 배치는 본문에서 다루었습니다. 그림 [7-7]처럼 웹 페이지를 만들어 보세요. 참고로 원은 div태그에 border-radius 속성을 적용해 만듭니다.
[그림 7-7] 절대 위치를 사용한 요소 배치
6장에서 다룬 다음 내용만 기억하고 있다면 손쉽게 [그림 7-7]과 같은 웹페이지를 만들 수 있었을 겁니다.
"자손의 position 속성에 absolute를 적용하려면, 부모의 position 속성에 relative를 적용합니다.
이 내용을 적용했다면 다음 코드처럼 작성했을 것입니다. 자주 사용하는 내용이므로 반드시 기억하세요. 그 외의 부분은 어렵지 않으므로 추가 설명은 생략합니다.
[코드 7-7] 절대 위치
<!DOCTYPE html>
<html>
<head>
<title>Absolute Position</title>
<style>
#container {
width: 500px; height: 300px;
border: 3px solid black;
overflow: hidden;
position: relative;
}
.circle {
position: absolute;
width: 100px; height: 100px;
border-radius: 50% 50%;
}
#red {
background: red;
left: 20px; top: 20px;
}
#green {
background: green;
right: 20px; bottom: 20px;
}
#blue {
background: blue;
right: 20px; bottom: 20px;
}
#yellow {
background: yellow;
left: 20px; bottom: 20px;
}
</style>
</head>
<body>
<h1>Dummy Text</h1>
<div id="container">
<div id="red" class="circle"></div>
<div id="green" class="circle"></div>
<div id="blue" class="clrcle"></div>
<div id="yellow" class="clrcle"></div>
</div>
<h1>Dummy Text</h1>
</body>
</html>
응용 예제 7-5 절대 위치를 사용한 요소를 중앙에 배치
다음 과정을 거쳐 요소를 화면 가운데에 배치할 수 있습니다.
1. 중앙 정렬하려는 div 태그의 position 속성을 absolute로 지정합니다.
2. [그림 7-8]처럼 left속성과 top 속성을 모두 50%로 지정합니다.
[그림 7-8] 절대 위치를 사용한 중앙 배치
3. 중앙에 정렬하려는 div 태그의 margin-left 속성과 margin-top 속성에 음수를 입력합니다.
그러면 요소가 왼쪽 위로 끌어당겨지면서 요소의 중심이 페이지 중앙에 위치합니다. 이때 입력하는 값은 div 태그 너비와 높이의 정확히 반이어야 합니다.
[그림 7-9] 절대 위치를 사용한 중앙 배치 - 3단계
이를 구현하면 다음 코드와 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Adsolute Position</title>
<style>
/* 초기화 */
* { margin; 0; padding: 0;
}
/* 주제 */
body { background: red; }
#container {
/* 색상 크기 적용 */
width: 500px; height: 250px;
background: orange;
/* 위치 설정 */
position: absolute;
left: 50%; top: 50%;
margin-left: -250px;
margin-top: -125px;
}
</style>
</head>
<body>
<div id="container>
<h1>절대 좌표를 사용한 중앙 정렬</h1>
</body>
</html>
응용 예제 7-6 고정 위치를 사용해 바 생성
최근 만드는 웹 페이지에는 [그림 7-10]처럼 바가 있습니다. 바는 웹 페이지의 상하좌우에 붙어서 사용자를 따라다니는 요소로 인터넷 쇼핑몰이나 웹 응용 프로그램에서 많이 사용합니다.
이러한 고정바를 만드는 방법은 간단합니다. 우산 position 스타일 속성에 fixed를 적용하고 left, top, right, bottom 속성에 값을 입력해 위치를 설정합ㄴ디ㅏ. 이어서 width 속서오가 height 속성으로 크기를 설정하면 됩니다. 이를 구현하면 다음과 같습니다.
[코드 7-9] 바 생성
<!DOCTYPE html>
<html>
<head>
<title>Fixed Bar</title>
<style>
.container {
margin-top: 50px;
margin-left: 50px;
}
.top_bar {
background: red;
position: fixed;
left: 0; top: 0; fight: 0;
height: 50px;
}
.left_bar {
background: blue;
position: fixed;
left: 0; top: 50px; bottom: 0;
width: 50px;
}
</style>
</head>
<body>
<div class="top_bar"></div>
<div class="left_bar"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet.</p>
<p>Donec eros neque.</p>
<p>Nam et metus vitae tellus mattis bibendum.</p>
<p>Pellentesque hendrerit placerat.</p>
</div>
</body>
</html>
응용 예제 7-7 글자 생략
인터넷을 돌아다니다 보면 게시판의 목록 페이지나 [그림 7-11]처럼 모바일 페이지에서 글자가 새얅된 모습을 자주 볼 수 있습니다. 이는 한 행을 넘어가는 글자를 자동으로 생략하는 기능입니다.
이러한 기능은 다음 코드처럼 ellipsis 클래스를 만들면 쉽게 구현할 수 있습니다.
[코드 7-10] 글자 생략과 ellipsis 클래스
<!DOCTYPE html>
<html>
<head>
<title>Ellipsis</title>
<style>
h1, p {
width: 300px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1 class="ellipsis">Lorem ipsum dolor sit amet, consectetur</h1>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur</p>
</body>
</html>
300px의 너비를 넘어가는 글자는 ...으로 처리되어 사라집니다. 글자를 생략하는 스타일 속성은 다른 목적으로는 사용하지 않으므로 자세한 설명은 생략합니다.
