사용 안내서 취소

CSS를 사용하여 페이지 레이아웃 구성

검색

마지막 업데이트 날짜 2022년 11월 28일

CSS 레이아웃의 기본 구조를 살펴보고 Dreamweaver에서 CSS를 사용하여 페이지와 콘텐츠를 디자인하는 방법에 대해 학습합니다.

CSS 페이지 레이아웃 정보

CSS 페이지 레이아웃에서는 웹 페이지의 내용을 구성하는 데 기존의 HTML 표 또는 프레임이 아니라 겹쳐 놓기 스타일 시트 포맷을 사용합니다. CSS 레이아웃의 기본 구성 블록은 대부분의 경우 텍스트, 이미지 및 기타 페이지 요소의 컨테이너로 작동하는 HTML 태그인 div 태그입니다. CSS 레이아웃을 만들 때 페이지에 div 태그를 삽입하고 해당 태그에 내용을 추가하고, 여러 위치에 해당 태그를 배치할 수 있습니다. 표의 행 및 열 내부로 위치가 제한되는 표 셀과 달리 div 태그는 웹 페이지의 모든 위치에 나타날 수 있습니다. div 태그 위치를 절대적으로 지정하거나(x 및 y 좌표 지정) 또는 상대적으로 지정할 수 있습니다(현재 위치에 대하여 위치를 지정). 또한 오늘의 웹 표준에 의해 선호되는 방법인 플로트, 패딩, 여백을 지정함으로써 div 태그를 지정할 수 있습니다.

CSS 페이지 레이아웃 구조 정보

계속해서 이 단원을 살펴보려면 기본 CSS 개념을 이해하고 있어야 합니다.

CSS 레이아웃의 기본 구성 블록은 대부분의 경우 텍스트, 이미지 및 기타 페이지 요소의 컨테이너로 작동하는 HTML 태그인 div 태그입니다. 다음 예는 세 개의 개별 div 태그 즉, 큰 “컨테이너” 태그 하나와 이 태그 내에 있는 두 개의 다른 태그(사이드바 태그 및 기본 내용 태그)가 포함된 HTML 페이지를 보여 줍니다.

A. 컨테이너 div B. 사이드바 div C. 기본 내용 div

HTML의 세 가지 div 태그에 대한 코드는 다음과 같습니다.

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

위 예에서는 어떠한 div 태그에도 “스타일”이 연결되어 있지 않습니다. 정의된 CSS 규칙이 없으면 각 div 태그와 그 내용은 페이지의 기본 위치에 삽입됩니다. 그러나 위의 예와 같이 각 div 태그에 고유한 ID가 있는 경우 이 ID를 사용하여 CSS 규칙을 만들고 적용하면 div 태그의 스타일과 위치를 변경할 수 있습니다.

다음 CSS 규칙에서는 페이지의 첫 번째 또는 “컨테이너” div 태그에 대한 스타일 규칙을 만듭니다. 이 CSS 규칙은 문서 헤드에 포함하거나 외부 CSS 파일에 저장할 수 있습니다.

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

#container 규칙을 통해 컨테이너 div 태그의 스타일을 780픽셀의 폭, 흰색 배경, 페이지의 왼쪽 여백 없음, 두께가 1픽셀인 검정색 실선 테두리, 텍스트 왼쪽 정렬로 지정할 수 있습니다. 컨테이너 div 태그에 규칙을 적용한 결과는 다음과 같습니다.

A. 텍스트 왼쪽 정렬 B. 흰색 배경 C. 두께 1픽셀의 검정색 실선 테두리

다음 CSS 규칙에서는 사이드바 div 태그의 스타일 규칙을 만듭니다.

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

#sidebar 규칙을 통해 사이드바 div 태그의 스타일을 200픽셀의 폭, 회색 배경, 15픽셀의 위쪽 및 아래쪽 패딩, 10픽셀의 오른쪽 패딩, 20픽셀의 왼쪽 패딩으로 지정할 수 있습니다. 기본 패딩 순서는 위쪽-오른쪽-아래쪽-왼쪽 순입니다. 또한 이 규칙을 통해 사이드바 div 태그의 위치를 플로트: 왼쪽(사이드바 div 태그를 컨테이너 div 태그의 왼쪽으로 미는 속성)으로 지정할 수 있습니다. 사이드바 div 태그에 규칙을 적용한 결과는 다음과 같습니다.

A. 폭 200픽셀 B. 위쪽 및 아래쪽 패딩, 15픽셀

끝으로 기본 컨테이너 div 태그의 CSS 규칙에 의해 레이아웃이 완성됩니다.

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

#mainContent 규칙을 통해 기본 내용 div의 스타일을 250픽셀의 왼쪽 여백(컨테이너 div의 왼쪽과 기본 내용 div의 왼쪽 사이에 250픽셀의 공간을 삽입하는 속성)으로 지정할 수 있습니다. 또한 이 규칙을 통해 기본 내용 div 태그의 오른쪽, 아래 및 왼쪽에 20픽셀의 여백을 삽입합니다. mainContent div에 규칙을 적용한 결과는 다음과 같습니다.

전체 코드는 다음과 같이 표시됩니다.

A. 20픽셀의 왼쪽 패딩 B. 20픽셀의 오른쪽 패딩 C. 20픽셀의 아래쪽 패딩

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>

메모

위의 예제 코드는 Dreamweaver에서 제공하는 미리 디자인된 레이아웃을 사용하여 새 문서를 작성할 때 두 개의 열로 고정된 왼쪽 사이드바를 만드는 단순화된 버전의 코드입니다.

CSS 레이아웃을 사용하여 페이지 만들기

Dreamweaver에서 새 페이지를 만들 때 이미 CSS 레이아웃이 포함된 페이지를 만들 수 있습니다. Dreamweaver에서 제공하는 16개의 여러 CSS 레이아웃 중 원하는 것을 선택할 수 있습니다. 또한 직접 CSS 레이아웃을 만들어 구성 폴더에 추가하면 해당 레이아웃을 [새 문서] 대화 상자에서 선택할 수 있습니다.

CSS 레이아웃을 사용하여 페이지 만들기

파일 > 새로 만들기를 선택합니다.
[새 문서] 대화 상자에서 [빈 페이지] 범주를 선택합니다. 이 범주가 기본 선택 항목입니다.
페이지 형식에서 만들려는 페이지 종류를 선택합니다.

메모

레이아웃으로 HTML 페이지 형식을 선택해야 합니다. 예를 들어 HTML, ColdFusion®, PHP 등을 선택할 수 있습니다. ActionScript™, CSS, 라이브러리 항목, JavaScript, XML, XSLT 또는 ColdFusion 구성 요소 페이지는 CSS 레이아웃을 사용하여 만들 수 없습니다. [새 문서] 대화 상자의 [기타] 범주에 있는 페이지 형식 역시 CSS 페이지 레이아웃을 포함할 수 없습니다.
레이아웃에서 사용할 CSS 레이아웃을 선택합니다. 16개의 여러 레이아웃 중에서 선택할 수 있습니다. 선택한 레이아웃과 이 레이아웃에 대한 간략한 설명을 [미리보기] 창에서 볼 수 있습니다.

미리 디자인된 CSS 레이아웃은 다음과 같은 유형의 열을 제공합니다.

고정

열 너비가 픽셀로 지정됩니다. 열의 크기가 브라우저의 크기 또는 사이트 방문자의 텍스트 설정에 따라 조절되지 않습니다.

유동적

열 너비가 사이트 방문자의 브라우저 폭에 대한 백분율로 지정됩니다. 사이트 방문자가 브라우저 폭을 넓히거나 좁히는 경우 디자인이 적용되지만 사이트 방문자의 텍스트 설정에 따라 변경되지는 않습니다.
[DocType] 팝업 메뉴에서 문서 유형을 선택합니다.
팝업 메뉴의 [레이아웃 CSS]에서 레이아웃의 CSS 위치를 선택합니다.

헤드에 추가

레이아웃용 CSS가 만들려는 페이지의 헤드에 추가됩니다.

새 파일 만들기

새 외부 CSS 스타일 시트에 레이아웃의 CSS를 추가하고 만드는 페이지에 새 스타일 시트를 연결합니다.

기존 파일에 링크

레이아웃에 필요한 CSS 규칙을 이미 포함하고 있는 기존의 CSS 파일을 지정할 수 있습니다. 이 옵션은 여러 문서에서 동일한 CSS 레이아웃(단일 파일에 포함되는 CSS 규칙)을 사용할 경우 특히 유용합니다.
다음 중 하나를 수행하십시오.
- 팝업 메뉴의 [레이아웃 CSS]에서 헤드에 추가(기본 옵션)를 선택한 경우 [만들기]를 클릭합니다.
- [레이아웃 CSS] 팝업 메뉴에서 [새 파일 만들기]를 선택한 경우 [만들기]를 클릭한 다음 [스타일 시트 파일로 저장] 대화 상자에서 새 외부 파일의 이름을 지정합니다.
- 팝업 메뉴의 [레이아웃 CSS]에서 [기존 파일에 링크]를 선택한 경우 [스타일 시트 추가] 아이콘을 클릭하고, [외부 스타일 시트 링크] 대화 상자에서 필요한 옵션을 설정하고, [확인]을 클릭하여 [CSS 파일 첨부] 텍스트 상자에 외부 파일을 추가합니다. 그런 다음 [새 문서] 대화 상자에서 [만들기]를 클릭합니다.
메모

[기존 파일에 링크] 옵션을 선택한 경우 지정한 파일에는 CSS 파일에 대한 규칙이 이미 포함되어 있어야 합니다.

레이아웃 CSS를 새 파일에 삽입하거나 기존 파일에 링크하면 Dreamweaver에서는 만드는 HTML 페이지에 해당 파일을 자동으로 링크합니다.

메모

레이아웃 CSS의 위치로 [새 외부 파일] 또는 [기존 외부 파일]을 선택한 경우에도 IE 렌더링 문제를 해결하도록 돕는 Internet Explorer CC(조건 주석)는 새 CSS 레이아웃 문서의 헤드에 임베드된 채로 남아 있습니다.
(선택 사항) 페이지를 만들 때 CSS 스타일 시트를 새 페이지(CSS 레이아웃에 연결되지 않은 페이지)에 첨부할 수도 있습니다. 이렇게 하려면 [CSS 파일 첨부] 창 위에 있는 [스타일 시트 첨부] 아이콘을 클릭하고 CSS 스타일 시트를 선택합니다.

이 프로세스의 세부 과정을 보려면 David Powers의 문서 새 문서에 자동으로 스타일 시트 첨부를 참조하십시오.

선택 항목 목록에 CSS 레이아웃 추가하기

[새 문서] 대화 상자의 선택 항목 목록에 추가할 CSS 레이아웃이 포함된 HTML 페이지를 만듭니다. 레이아웃의 CSS는 HTML 페이지의 헤드에 있어야 합니다.

메모

맞춤형 CSS 레이아웃과 Dreamweaver에서 제공하는 다른 레이아웃 간에 일관성을 유지하려면 .htm 확장명을 사용하여 HTML 파일을 저장해야 합니다.
HTML 페이지를 Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts 폴더에 추가합니다.
(선택 사항) 레이아웃의 미리보기 이미지(예: .gif 또는 .png 파일)를 Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts 폴더에 추가합니다. Dreamweaver에서 제공하는 기본 이미지는 227 픽셀(가로) x 193 픽셀(세로)의 PNG 파일입니다.

메모

미리보기 이미지를 쉽게 추적할 수 있도록 HTML 파일과 동일한 이름으로 지정합니다. 예를 들어 HTML 파일의 이름이 myCustomLayout.htm이면 미리보기 이미지의 이름은 myCustomLayout.png로 지정합니다.
(선택 사항) Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes 폴더를 열고, 동일한 폴더에서 기존 노트 파일을 복사하여 붙여넣고, 맞춤형 레이아웃의 사본 이름을 변경하여 맞춤형 레이아웃의 노트 파일을 만듭니다. 예를 들어 oneColElsCtr.htm.mno 파일을 복사하여 myCustomLayout.htm.mno로 이름을 변경할 수 있습니다.
(선택 사항) 맞춤형 레이아웃의 노트 파일을 만든 후 해당 파일을 열어 레이아웃 이름, 설명 및 미리보기 이미지를 지정할 수 있습니다.

유사 검색

쉽고 빠르게 지원 받기

신규 사용자이신가요?

CSS를 사용하여 페이지 레이아웃 구성

CSS 페이지 레이아웃 정보

CSS 페이지 레이아웃 구조 정보

CSS 레이아웃을 사용하여 페이지 만들기

CSS 레이아웃을 사용하여 페이지 만들기

선택 항목 목록에 CSS 레이아웃 추가하기

유사 검색

쉽고 빠르게 지원 받기

이 페이지 공유

커뮤니티에 질문하기

문의