Css 레이아웃
DB CAFE
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
CSS / 고정형 레이아웃 만들기 레이아웃을 만드는 방법
웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(
)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는목차
1 2-Column Layout
1.1 Content
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.
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.
</body>
</html>
<!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>
2 2-Column Layout
2.1 Content
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.
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.
</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>
3 3-Column Layout
3.2 Content
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.
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.
</body>
</html> <!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>
4 3-Column Layout
4.2 Content
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.
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.
</body>
</html>