CSS / 고정형 레이아웃 만들기
레이아웃을 만드는 방법
웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다.
2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다.
레이아웃을 만들 때 필요한 속성
CSS로 레이아웃을 만들 때 꼭 알아야 할 속성은 margin, float, clear입니다.
margin은 요소를 가운데 정렬할 때 사용합니다.
margin-left: auto; margin-right: auto;
로 설정하면 선택한 요소를 가운데에 놓을 수 있습니다.
float와 clear는 2단, 3단 등 다단으로 레이아웃을 만들 때 사용합니다.
2단 레이아웃 만들기
다음은 간단한 2단 레이아웃 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
#jb-container {
width: 940px;
margin: 0px 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;
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h1>2-Column Layout</h1>
</div>
<div id="jb-content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</div>
<div id="jb-sidebar">
<h2>Sidebar</h2>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>
만약 사이드바를 왼쪽으로 옮기고 싶으면
- #jb-content의 float: left;를 float: right;
- #jb-content의 float: right;를 float: left;
로 바꿔주면 됩니다.
3단 레이아웃 만들기
다음은 간단한 3단 레이아웃 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
#jb-container {
width: 940px;
margin: 0px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
#jb-header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
#jb-sidebar-left {
width: 160px;
padding: 20px;
margin-right: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-content {
width: 450px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-sidebar-right {
width: 160px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#jb-footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h1>3-Column Layout</h1>
</div>
<div id="jb-sidebar-left">
<h2>Sidebar</h2>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<div id="jb-content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</div>
<div id="jb-sidebar-right">
<h2>Sidebar</h2>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>
Related Posts
배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...
CSS / background-clip / 배경을 어디에 넣을지 정하는 속성
개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...
CSS / Grid / grid-column-gap, grid-row-gap, grid-gap
그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / text-shadow / 글자에 그림자 효과를 주는 속성
개요 text-shadow는 글자에 그림자 효과를 주는 속성이다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다. 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정한다. (필수) offset-y : 그림자의 수직 거리를 정한다. (필수) blur-radius : 흐림 정도를 정한다. (선택 : ...
CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기
content content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고 p:before { content: xxx; } 뒤에 넣으려면 다음과 같이 한다. p:after { content: xxx; } 텍스트 추가하기 p 요소 앞에 Hello World를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS / box-shadow / 박스에 그림자 효과 만드는 속성
개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...
CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...
CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성
개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...