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 / 기초 / !important

CSS / 기초 / !important

개요 CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. 문법 property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 ...

CSS / 구글 웹폰트 사용하는 방법

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다. + 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다. 아래에 있는 검은 색 바를 클릭합니다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS / list-style-type / 목록 앞의 마커 정하는 속성

CSS / list-style-type / 목록 앞의 마커 정하는 속성

목록은 <ul> 또는 <ol> 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정합니다. 속성값은 다음과 같습니다. <ul> : disc, circle, square <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는게 맞지만, <ul>에 decimal을 사용하거나 <ol>에 disc를 사용하는 ...

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...

CSS / background-image / 배경 이미지 정하는 속성

CSS / background-image / 배경 이미지 정하는 속성

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앱니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 ...

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...