연습: 기존 CSS 파일 작업

아티클
10/22/2014

업데이트: 2007년 11월

이 연습에서는 Visual Studio 2008의 CSS 스타일시트 기능을 소개합니다. 이 연습에서는 2열 페이지 레이아웃을 만들고 수정하는 방법을 안내하고 새 웹 페이지 및 새 CSS 스타일시트를 만드는 기본 기술을 설명합니다.

이 연습에서는 다음 작업을 수행합니다.

파일 시스템 웹 사이트 만들기
Visual Web Developer의 CSS 관련 기능 사용
CSS를 사용하여 2열 페이지 레이아웃을 만들기

참고:

이 연습에서는 연습: CSS 파일 만들기 및 수정에서 다루지 않은 Visual Studio 2008의 추가 기능을 보여 줍니다.

참고:
이 연습에서는 연습: CSS 파일 만들기 및 수정에서 다루지 않은 Visual Studio 2008의 추가 기능을 보여 줍니다.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

Visual Studio 2008 또는 Microsoft Visual Web Developer Express Edition. 다운로드에 대한 자세한 내용은 Microsoft Visual Studio Express Editions 웹 사이트를 참조하십시오.
.NET Framework 버전 3.5
웹 페이지에 추가할 수 있는 이미지. 이미지는 위치 지정 기능을 설명하는 데 사용되므로 실제 이미지가 중요하지는 않습니다.

웹 사이트 만들기

이 연습 단계에서는 웹 사이트를 만들어 페이지를 추가합니다.

연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 Visual Web Developer에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하고 이 연습의 뒷부분에 나오는 "HTML 요소 및 CSS 파일 추가"로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트를 만듭니다.

새 파일 시스템 웹 사이트를 만들려면

Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에서 파일 시스템을 선택한 다음 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\CSSWebSite를 입력합니다.
언어 목록에서 Visual Basic 또는 **Visual C#**을 클릭합니다.

선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 되지만 페이지마다 개별적으로 프로그래밍 언어를 설정할 수 있습니다.
확인을 클릭합니다.

Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지를 만듭니다.

HTML 요소 및 CSS 파일 추가

스타일 지정할 요소를 만드는 대신 서식 및 스타일 지정 도구에 초점을 맞출 수 있도록 이 단원에서는 요소 집합이 제공합니다. 이러한 요소를 복사하여 페이지에 붙여넣을 수 있습니다. 코드에는 배너, 왼쪽 및 오른쪽 세로 막대 섹션, 주 콘텐츠 섹션 및 바닥글을 포함하는 div 요소로 만들어진 섹션이 있습니다. 이러한 단순 요소에는 작업할 수 있는 텍스트 및 요소 ID가 있습니다. 경우에 따라 페이지에 있는 특정 요소의 스타일을 지정하는 데 사용할 수 있는 CSS 클래스가 요소에 포함됩니다.

HTML 요소 추가

이 단원에서는 사용할 콘텐츠를 추가합니다. 페이지는 텍스트 및 검색 상자가 있는 배너, 바닥글 및 세 개의 텍스트 섹션으로 구성됩니다. 페이지의 주 콘텐츠는 마지막 텍스트 섹션에 있습니다.

HTML 요소를 페이지에 추가하려면

소스 뷰에서 Default.aspx 페이지를 엽니다.

<form> 요소 뒤에 다음 코드를 추가합니다.

<div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
<asp:Image ID="Image1" />
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

페이지를 저장합니다.
디자인 뷰로 전환하여 기본 서식을 확인합니다.

CSS 파일 추가

이 단원에서는 앞 단원에서 페이지에 추가한 요소의 서식 및 스타일을 지정하는 CSS 스타일시트(.css 파일)를 추가합니다. 스타일시트에서는 ID 기반 및 클래스 기반 스타일 규칙이 모두 사용됩니다.

CSS 파일을 추가하려면

솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

새 항목 추가 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 스타일시트를 클릭합니다.
이름 상자에 Layout.css를 입력한 다음 추가를 클릭합니다.

body 스타일 규칙이 포함된 새 스타일시트가 편집기에서 열립니다.

body 스타일 규칙을 제거한 후 다음 규칙을 파일에 붙여넣습니다.

#pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

파일을 저장합니다.

스타일시트에 스타일 규칙 추가

기존 CSS 스타일시트를 사용하는 중이면 스타일 관리 창을 사용하여 스타일시트에서 스타일 규칙을 변경할 수 있습니다. 이 연습에서는 페이지를 원래의 3열 레이아웃에서 2열 레이아웃으로 수정합니다. 그런 다음 원래 레이아웃에 적용된 스타일을 제거합니다.

오른쪽 열 제거 및 스타일 다시 지정

페이지 레이아웃을 2열 레이아웃으로 변경하려면 오른쪽 열을 만드는 코드를 제거하면 됩니다. 그런 다음 다른 요소의 스타일을 다시 지정하여 2열 레이아웃을 만들 수 있습니다.

오른쪽 열 코드 및 서식을 제거하려면

Default.aspx 페이지를 열거나 이 페이지로 전환합니다.
디자인 뷰로 전환합니다.
만들어진 .css 파일을 솔루션 탐색기에서 끌어 페이지 위에 놓습니다.

이렇게 하면 .css 파일이 현재 페이지에 연결됩니다. 페이지는 .css 파일에 정의된 스타일이 반영되어 변경됩니다.
소스 뷰로 전환합니다.
<div id="rightsidebar" class="column">으로 시작하는 div 요소를 삭제합니다.
파일을 저장합니다.
서식 메뉴에서 CSS 스타일을 클릭한 다음 스타일 관리를 클릭합니다.

스타일 관리 창이 나타납니다. 기본적으로 이 창은 도킹됩니다.

스타일 관리 창에서 #rightsidebar 스타일을 마우스 오른쪽 단추로 클릭한 다음 삭제를 클릭합니다.

참고:
#rightsidebar 스타일에 대한 아이콘 주위에는 원이 없으며 이는 페이지에서 더 이상 사용되지 않으므로 제거할 수 있다는 것을 의미합니다.

스타일 관리 창에서 #maincontent 스타일을 마우스 오른쪽 단추로 클릭한 다음 스타일 수정을 클릭합니다.

스타일 수정 대화 상자가 나타납니다.
범주에서 상자를 클릭합니다.
여백에서 오른쪽 상자 값을 0으로 변경합니다.
확인을 클릭합니다.
디자인 뷰로 전환합니다. 이제 2열 레이아웃을 갖게 됩니다.
파일을 저장합니다.

이미지 추가

이미지의 스타일을 설정하기 전에 이미지를 프로젝트에 추가하고 이미지의 ImageUrl 속성을 설정해야 합니다.

이미지를 프로젝트에 추가하려면

솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 기존 항목 추가를 클릭합니다.

그러면 기존 항목 추가 대화 상자가 나타납니다.
이미지 파일을 선택하고 추가를 클릭합니다.

이제 이미지가 프로젝트에 추가되었으므로 이미지를 Image 컨트롤에 할당해야 합니다.

이미지를 이미지 컨트롤에 할당하려면

Default.aspx 파일을 열거나 이 파일로 전환합니다.
디자인 뷰로 돌아가서 Image 컨트롤을 선택합니다.
속성 창에서 Image 컨트롤의 ImageUrl 속성을 새로 추가한 이미지 파일의 URL로 설정합니다.

스타일 규칙을 추가하여 이미지 서식 지정

이미지가 텍스트와 함께 더 잘 움직이게 하려면 주 열의 왼쪽 또는 오른쪽 가장자리에 이미지를 배치하고 여백을 추가하여 텍스트를 이미지에서 벗어나게 이동합니다.

레이아웃에 이미지를 추가하려면

Layout.css 파일을 열거나 이 파일로 전환합니다.

다음 코드를 스타일시트에 추가합니다.

img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

Default.aspx 파일을 열거나 이 파일로 전환합니다.
디자인 뷰로 돌아가서 Image 컨트롤을 선택합니다.
스타일 관리 창에서 CSS 스타일을 마우스 오른쪽 단추로 클릭하고 스타일 적용을 선택하여 floatright 또는 floatleft CSS 스타일을 Image 컨트롤에 적용합니다.

선택한 CSS 스타일이 img 스타일에 할당됩니다.

다음 단계

이 연습에서는 Visual Studio 2008에서 사용자 인터페이스를 사용하여 CSS 스타일로 작업하는 기본적인 기술을 설명했습니다. 웹 페이지 모양을 제어할 수 있는 다음 방법을 확인할 수도 있습니다.

새 스타일시트 작업.자세한 내용은 연습: CSS 파일 만들기 및 수정을 참조하십시오.
HTML 요소의 스타일 정보를 프로그래밍 방식으로 설정. 자세한 내용은 방법: 프로그래밍 방식으로 HTML 서버 컨트롤 속성 설정을 참조하십시오.
CSS 스타일뿐만 아니라 ASP.NET 컨트롤의 거의 모든 속성을 지정할 수 있는 테마 및 스킨 만들기.자세한 내용은 ASP.NET 테마 및 스킨 개요를 참조하십시오.

참고 항목

작업

연습: CSS 파일 만들기 및 수정

개념

CSS 작업 개요

ASP.NET 웹 서버 컨트롤 및 CSS 스타일

방법: CSS 속성 창 사용

다음을 통해 공유