파일 > 새로 만들기를 선택합니다.
마지막 업데이트 날짜
2024년 4월 25일
CSS 레이아웃의 기본 구조를 살펴보고 Dreamweaver에서 CSS를 사용하여 페이지와 콘텐츠를 디자인하는 방법에 대해 학습합니다.
CSS 페이지 레이아웃 정보
CSS 페이지 레이아웃에서는 웹 페이지의 내용을 구성하는 데 기존의 HTML 표 또는 프레임이 아니라 겹쳐 놓기 스타일 시트 포맷을 사용합니다. CSS 레이아웃의 기본 구성 블록은 대부분의 경우 텍스트, 이미지 및 기타 페이지 요소의 컨테이너로 작동하는 HTML 태그인 div 태그입니다. CSS 레이아웃을 만들 때 페이지에 div 태그를 삽입하고 해당 태그에 내용을 추가하고, 여러 위치에 해당 태그를 배치할 수 있습니다. 표의 행 및 열 내부로 위치가 제한되는 표 셀과 달리 div 태그는 웹 페이지의 모든 위치에 나타날 수 있습니다. div 태그 위치를 절대적으로 지정하거나(x 및 y 좌표 지정) 또는 상대적으로 지정할 수 있습니다(현재 위치에 대하여 위치를 지정). 또한 오늘의 웹 표준에 의해 선호되는 방법인 플로트, 패딩, 여백을 지정함으로써 div 태그를 지정할 수 있습니다.
CSS 페이지 레이아웃 구조 정보
이 섹션을 진행하기 전에 기본 CSS 개념을 숙지해야 합니다.
CSS 레이아웃의 기본 구성 요소는 div 태그입니다. 이는 대부분의 경우 텍스트, 이미지 및 기타 페이지 요소의 컨테이너 역할을 하는 HTML 태그입니다.다음 예시는 세 개의 별도 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 레벨 제목 </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 규칙은 문서의 head 부분이나 외부 CSS 파일에 위치할 수 있으며, 페이지의 첫 번째 또는 "container" div 태그에 대한 스타일 규칙을 만듭니다:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#container 규칙은 컨테이너 div 태그에 폭 780픽셀, 흰색 배경, 여백 없음(페이지 왼쪽에서), 검은색 1픽셀 실선 테두리, 왼쪽 정렬 텍스트의 스타일을 지정합니다.container div 태그에 규칙을 적용한 결과는 다음과 같습니다:
A. 텍스트 왼쪽 정렬 B. 흰색 배경 C. 두께 1픽셀의 검정색 실선 테두리
다음 CSS 규칙에서는 사이드바 div 태그의 스타일 규칙을 만듭니다.
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#sidebar 규칙은 sidebar div 태그를 폭 200픽셀, 회색 배경, 상하 패딩 15픽셀, 우측 패딩 10픽셀, 좌측 패딩 20픽셀로 스타일을 지정합니다.기본 패딩 순서는 위쪽-오른쪽-아래쪽-왼쪽 순입니다. 또한 이 규칙은 float: left 속성으로 sidebar div 태그의 위치를 지정하는데, 이 속성은 sidebar div 태그를 컨테이너 div 태그의 왼쪽에 배치합니다.sidebar 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>제목 없는 문서</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
테두리: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
배경: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--container div 태그-->
<div id="container">
<!--sidebar div 태그-->
<div id="sidebar">
<h3>사이드바 콘텐츠</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 태그-->
<div id="mainContent">
<h1> 주요 콘텐츠 </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 레벨 제목 </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에 포함된 미리 디자인된 레이아웃을 사용하여 새 문서를 만들 때 2열 고정 왼쪽 사이드바 레이아웃을 생성하는 코드의 간소화된 버전입니다.
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 페이지에 파일을 링크합니다.
메모
IE 렌더링 문제를 해결하는 데 도움이 되는 Internet Explorer 조건부 주석(CC)은 레이아웃 CSS 위치로 새 외부 파일 또는 기존 외부 파일을 선택하더라도 새 CSS 레이아웃 문서의 head에 포함되어 있습니다.
(선택 사항) 페이지를 만들 때 새 페이지에 CSS 스타일 시트를
첨부할 수도 있습니다(CSS 레이아웃과 관련 없음).
이렇게 하려면 CSS 파일 첨부 창 위의 [스타일 시트 첨부] 아이콘을 클릭하고 CSS 스타일 시트를 선택합니다.
이 과정에 대한 자세한 단계별 안내는 David Powers의 기사 새 문서에 자동으로 스타일 시트 첨부를 참조하십시오.
선택 목록에 사용자 정의 CSS 레이아웃 추가
새 문서 대화 상자의 선택 목록에
추가하려는 CSS 레이아웃이 포함된 HTML 페이지를 만듭니다.레이아웃용 CSS는 HTML 페이지의
head에 있어야 합니다.
메모
사용자 정의 CSS 레이아웃을 Dreamweaver와 함께 제공되는 다른 레이아웃과 일치하게 만들려면 HTML 파일을 .htm 확장자로 저장해야 합니다.
Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts
폴더에 HTML 페이지를 추가합니다.
(선택 사항) 레이아웃의 미리 보기 이미지(예:
.gif 또는 .png 파일)를 Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts
폴더에 추가합니다.Dreamweaver와 함께 제공되는 기본 이미지는 가로 227픽셀, 세로 193픽셀 PNG 파일입니다.
메모
미리 보기 이미지에 HTML 파일과 같은 파일 이름을 지정하여 쉽게 추적할 수 있도록 하세요.예를 들어 HTML 파일 이름이 myCustomLayout.htm인 경우 미리 보기 이미지 이름을 myCustomLayout.png로 지정합니다.
(선택 사항) Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes
폴더를 열고, 같은 폴더에 있는 기존 메모 파일을 복사 및 붙여넣기한 후
복사본의 이름을 사용자 정의 레이아웃용으로 변경하여 사용자 정의 레이아웃용 메모 파일을 만듭니다.예를 들어
oneColElsCtr.htm.mno 파일을 복사하고 이름을 myCustomLayout.htm.mno로 변경할 수 있습니다.
(선택 사항) 사용자 정의 레이아웃용 메모 파일을 만든 후
파일을 열어 레이아웃 이름, 설명, 미리 보기 이미지를 지정할 수 있습니다.
