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

  • 아티클

업데이트: 2007년 11월

이 연습에서는 Visual Studio 2008의 CSS 스타일 시트 기능을 소개합니다. 여기서는 세 개의 열로 이루어진 페이지 레이아웃을 만드는 과정을 설명하며 새 웹 페이지 및 새 스타일 시트를 만드는 기본적인 방법을 보여 줍니다.

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

  • 파일 시스템 웹 사이트 만들기

  • CSS 기반 기능을 사용하여 웹 사이트 사용자 지정

  • CSS를 사용하여 3열 페이지 레이아웃 만들기

사전 요구 사항

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

  • Visual Studio 2008 또는 Visual Web Developer 2008 Express Edition. 다운로드 정보는 .NET Framework Developer Center 웹 사이트를 참조하십시오.

  • .NET Framework 버전 3.5

웹 사이트 만들기

이 연습 부분에서는 웹 사이트를 만든 후 페이지를 추가할 수 있습니다. 다음 단원에서는 CSS 파일을 추가한 다음 웹 브라우저에서 페이지를 실행할 수 있습니다.

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

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

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

  2. 새 웹 사이트 상자의 Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

  3. 위치 상자에서 파일 시스템을 클릭하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

    예를 들어, 폴더 이름 C:\CSSWebSite를 입력합니다.

  4. 언어 목록에서 Visual Basic 또는 Visual C#을 클릭한 다음 확인을 클릭합니다.

    참고:

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

    Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지가 만들어집니다.

페이지 요소 추가 및 스타일 지정

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

페이지 요소 추가

다음 절차에서는 CSS 도구를 통해 사용할 수 있는 페이지 요소를 복사합니다. 페이지 요소는 텍스트 및 검색 상자가 있는 배너, 바닥글 및 3개의 텍스트 섹션으로 구성됩니다. 페이지의 주 콘텐츠는 마지막 텍스트 섹션에 있습니다.

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

  1. Default.aspx 페이지를 열거나 이 페이지로 전환합니다.

    참고:

    웹 사이트에서 사용할 수 있는 모든 페이지를 사용할 수 있습니다.

  2. 소스 뷰로 전환합니다.

  3. <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>
  <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>

  4. 페이지를 저장합니다.

  5. 디자인 뷰로 전환하여 기본 서식을 확인합니다.

디자인 뷰에서 스타일 적용

디자인 뷰를 사용하여 페이지 요소에 스타일을 적용하고 결과를 즉시 확인할 수 있습니다. CSS를 작성한 다음 해당 페이지로 전환하여 스타일 지정이 원하는 대로 되었는지 확인할 필요가 없습니다.

디자인 뷰에서 페이지의 개별 요소에 스타일을 여러 가지 방법으로 적용할 수 있습니다. 개별 요소의 style 특성으로 작성되는 인라인 스타일을 사용할 수 있습니다. 이러한 스타일 규칙은 해당 요소에만 적용할 수 있습니다.

페이지의 HTML head 요소에 있는 style 요소에 스타일 규칙을 작성할 수 있습니다. 이러한 스타일 규칙은 현재 페이지의 요소에 적용할 수 있습니다. 마지막으로 외부 CSS 파일에 스타일 규칙을 작성할 수 있습니다. 이러한 경우 스타일 규칙은 웹 사이트의 모든 페이지에 적용할 수 있습니다.

이 연습에서는 서식 및 스타일 지정 정보를 페이지의 style 요소 섹션에 인라인 스타일로 작성합니다. 나중에 CSS 정보를 외부 스타일시트로 이동하여 Visual Studio 2008의 다른 기능을 사용할 수 있습니다.

페이지 배너 서식 지정

서식을 지정할 첫 번째 요소는 <div ID="banner"> 태그로 묶인 요소가 있는 배너 섹션입니다. 이 예제에서는 직접 스타일 적용 도구 모음을 사용하여 제목의 스타일 및 위치를 변경합니다. 또한 배너 영역의 크기를 설정하고 배경색을 추가합니다.

배너 텍스트의 서식을 지정하려면

  1. 디자인 뷰에서 "AdventureWorks Styling Page"로 표시되는 배너 섹션의 제목 텍스트를 클릭합니다.

    선택 영역 주위에는 파랑 상자가 표시되며 h1 요소가 선택되었음을 나타내는 탭이 표시됩니다.

  2. 스타일 적용 도구 모음의 대상 규칙 목록에서 새 스타일 적용을 클릭합니다.

    새 스타일 대화 상자가 표시됩니다.

    직접 스타일 적용 옵션의 기본값은 수동이므로 스타일을 수동으로 적용합니다.

  3. 모든 h1 요소에 적용되는 스타일을 만들 수 있도록 선택기 목록에서 h1을 클릭합니다.

    정의 위치 목록이 현재 페이지로 설정됩니다. 이는 스타일 규칙이 현재 페이지의 style 요소에 만들어짐을 나타냅니다.

  4. font-family 목록에서 Impact와 같은 두꺼운 글꼴을 선택합니다.

  5. font-size 상자에서 XX-Large를 입력하거나 선택합니다.

  6. font-variant 상자에서 small-caps를 입력하거나 선택합니다.

  7. 확인을 클릭합니다.

  8. 만들어진 스타일 규칙을 확인하려면 소스 뷰로 전환하고 head 요소 안에 있는 style 요소로 스크롤합니다.

    h1 요소에 대해 만들어진 CSS 스타일 규칙을 확인할 수 있습니다.

  9. 다음 단계를 따라 비슷한 방식으로 배너에서 h2 요소의 스타일을 지정합니다.

    1. 2단계에서 설명한 대로 새 스타일 대화 상자를 엽니다.

    2. h2 요소를 선택합니다.

    3. 새 스타일 상자의 선택기 값을 h2로 설정합니다.

    4. font-family를 Comic Sans MS로 설정하고 font-size를 Small로 설정합니다.

페이지 요소 선택

Visual Studio 2008에서는 페이지의 요소를 여러 가지 방법으로 선택할 수 있습니다. 디자인 뷰 창의 아래 섹션에 있는 빠른 태그 선택기를 사용할 수 있습니다. 페이지에서 임의의 위치에 삽입 지점을 놓으면 해당 영역에 대한 기본 HTML을 표시하는 태그가 빠른 태그 선택기에 나타납니다. 현재 태그를 포함하는 태그는 빠른 태그 선택기 표시줄에 있는 태그의 왼쪽에 나타납니다. 예를 들어 삽입 지점이 테이블 셀에 있는 경우 td 태그가 빠른 선택기 표시줄에 나타나며 테이블 행에 대한 tr 태그 및 해당 테이블에 대한 table 태그 뒤에 옵니다.

빠른 선택기 표시줄에서 태그 위로 포인터를 이동하면 태그의 콘텐츠가 디자인 뷰에서 강조 표시되고 태그에 화살표가 나타납니다. 이 화살표를 클릭하여 태그 및 해당 콘텐츠를 선택하거나, 태그의 콘텐츠만 선택하거나, 태그를 편집 또는 제거하거나, 빠른 태그 편집기 대화 상자를 열거나, 항목에 대한 속성 대화 상자를 열 수 있습니다.

Esc 키를 사용하여 요소의 상위 계층 구조로 이동할 수도 있습니다. 예를 들어 h1 요소는 배너의 div 요소 내에 중첩됩니다. 전체 div 요소를 선택하려면 h1 요소를 클릭하여 선택한 다음 Esc 키를 사용하여 배너 div 요소를 선택합니다. Esc 키를 처음 누르면 h1 요소가 강조 표시되고 해당 요소의 안쪽 여백 및 여백이 표시됩니다. 이러한 여백을 설정하지 않았으므로 기본 설정이 표시됩니다. Esc 키를 다시 누르면 전체 div 요소가 선택됩니다. 요소가 선택되면 태그에 div#banner가 표시됩니다.

배너 크기 조정 및 해당 콘텐츠 위치 조정

직접 스타일 적용 도구 모음을 사용하여 디자인 뷰에서 배너와 해당 콘텐츠의 크기 및 위치를 조정할 수 있습니다. 스타일 규칙은 이전 스타일 규칙이 작성된 위치와 같은 현재 페이지에 작성됩니다.

참고:

Ctrl 키 및 화살표 키를 사용하여 이미 설정된 크기 요소의 값을 변경할 수 있습니다. 예를 들어 배너의 너비를 785픽셀로 끌면 Ctrl+왼쪽 화살표 키 조합을 사용하여 너비를 780픽셀로 줄일 수 있습니다.

배너의 크기를 조정하려면

  1. 디자인 뷰로 전환합니다.

  2. h1 텍스트("AdventureWorks Styling Page")를 클릭하여 선택한 다음 Esc 키를 두 번 눌러 배너 div 요소인 포함 요소를 선택합니다.

  3. 오른쪽 아래 모퉁이의 크기 조정 핸들을 끌어 배너 div 요소의 크기를 조정합니다.

    끌기 작업 시 도구 설명에 너비 및 높이 값이 표시됩니다. 이러한 값은 디자인 뷰 창의 아래 섹션에 있는 상태 표시줄에도 나타납니다.

  4. 너비가 약 780픽셀, 높이가 약 100픽셀이 될 때까지 요소의 크기를 조정합니다.

  5. 만들어진 스타일 규칙을 확인하려면 분할 뷰로 이동하고 style 요소로 스크롤합니다.

    #banner 선택기를 사용하여 배너 div 요소에 대해 만들어진 스타일 규칙을 확인할 수 있습니다.

  6. 디자인 뷰에서 배너 div 요소가 선택되어 있는지 확인합니다. div#banner는 태그 탐색기에서 계속 선택된 상태여야 합니다.

  7. 서식 메뉴에서 배경색을 클릭합니다.

    색 선택이 표시됩니다.

  8. 배너의 색을 선택한 다음 확인을 클릭합니다.

제목에서 텍스트를 가운데에 맞추는 스타일 규칙을 적용할 수도 있습니다. 이 작업은 안쪽 여백 값을 설정하여 수행할 수 있습니다.

배너 내에서 제목 요소의 위치를 지정하려면

  1. 디자인 뷰에서 배너 div 요소를 선택합니다.

  2. 서식 메뉴에서 단락을 클릭합니다.

    단락 대화 상자가 표시됩니다.

    h1 요소가 배너 div와 같은 길이이므로 h1 요소 내에서 텍스트의 위치를 지정하여 배너 영역에서 가운데에 맞출 수 있습니다.

  3. 단락 상자의 맞춤 드롭다운 목록에서 가운데 맞춤을 선택한 다음 확인을 클릭합니다.

  4. h2 요소를 선택한 다음 2단계와 3단계를 반복합니다.

  5. 배너 div 요소를 선택합니다.

  6. 도구 설명에 현재 안쪽 여백 값이 표시될 때까지 Shift 키를 누른 채 div 요소의 가장자리에 마우스 포인터를 둡니다.

  7. 안쪽 여백 가장자리가 div 요소의 위쪽 테두리에 인접할 때까지 해당 가장자리를 끕니다.

  8. 두 텍스트 요소가 가운데에 맞춰질 때까지(약 30픽셀) 끕니다.

배너를 완성하려면 검색 div 요소와 해당 요소를 배너에 배치해야 합니다. Visual Studio 2008의 다른 기능인 위치 지정 모눈을 사용하여 이 작업을 수행할 수 있습니다.

배너 내에서 검색 div 요소의 위치를 지정하려면

  1. 디자인 뷰에서 검색 div 요소(div#search)를 선택합니다.

  2. 서식 메뉴에서 위치 설정을 클릭한 다음 절대를 선택합니다.

  3. 검색 div 요소를 해당 탭(div#search로 표시되는 텍스트)으로 배너 내의 위치 중 텍스트 요소의 오른쪽으로 끕니다.

    두 파랑 선이 위쪽 및 왼쪽 위치 지정 값을 나타내는 선택 영역에서 확장됩니다.

  4. 검색 div 요소가 원하는 위치에 배치되면 해당 요소를 놓습니다.

유연한 3열 레이아웃 만들기

Visual Web Developer의 디자인 뷰를 통해 페이지 요소의 서식을 지정하여 스타일 규칙을 만들 수 있습니다. 동일한 도구를 사용하여 페이지 레이아웃을 만들 수도 있습니다.

이 연습에서는 부동 스타일 규칙을 사용하여 3열 레이아웃을 만듭니다. 먼저 왼쪽 및 오른쪽 세로 막대의 크기와 위치를 설정한 다음 주 콘텐츠 섹션의 안쪽 여백을 조정하여 유연한 3열 레이아웃을 만듭니다.

참고:

디자인 뷰에서 요소의 위치가 올바르게 표시되려면 도구 모음을 숨겨야 할 수도 있습니다. 이렇게 하면 페이지 요소의 위치를 표시할 수 있는 보다 많은 공간이 제공됩니다.

세로 막대 열 만들기

배너의 크기를 조정하는 것과 동일한 방식으로 페이지 레이아웃에서 세로 열의 크기를 조정할 수 있습니다. 세로 막대 열의 크기를 조정할 때는 필요한 경우 높이 값이 아닌 너비 값만 설정하여 텍스트가 열의 길이를 확장하도록 할 수 있습니다. div 요소의 너비만 설정하려면 이전 예제에서 설명한 대로 div 요소의 모퉁이를 끄는 대신 div 요소의 오른쪽을 끕니다.

왼쪽 및 오른쪽 세로 막대 div 요소의 크기와 위치를 조정하려면

  1. 디자인 뷰에서 왼쪽 세로 막대 div 요소를 선택합니다. 이 작업은 태그 탐색기에서 div.column#leftsidebar를 선택하여 수행할 수 있습니다.

  2. 왼쪽 세로 막대 div 요소의 오른쪽 가장자리를 끌어 너비가 약 200픽셀이 될 때까지 요소의 크기를 조정합니다.

    끌기 작업 시 높이 값이 괄호로 묶여 표시되며 이는 해당 값이 설정되지 않았음을 나타냅니다.

  3. 서식 메뉴에서 위치를 클릭합니다.

    위치 대화 상자가 표시됩니다.

  4. 줄 바꿈 스타일에서 왼쪽을 선택한 다음 확인을 클릭합니다.

  5. 오른쪽 세로 막대 div 요소를 선택하고 너비가 약 250픽셀이 될 때까지 오른쪽 가장자리를 끕니다.

  6. 서식 메뉴에서 위치를 클릭합니다.

  7. 줄 바꿈 스타일에서 오른쪽을 클릭한 다음 확인을 클릭합니다.

가운데 열 만들기

가운데 열을 만들려면 여백 및 안쪽 여백을 설정하여 콘텐츠를 왼쪽 및 오른쪽 열에서 떨어지게 이동합니다. 먼저 왼쪽 테두리를 만든 다음 안쪽 여백을 사용하여 콘텐츠를 테두리에서 떨어지게 이동합니다.

가운데 열의 스타일을 지정하려면

  1. 디자인 뷰에서 주 콘텐츠 div 요소를 선택합니다.

  2. Ctrl 키를 누른 채 주 콘텐츠 div 요소의 오른쪽 여백을 끌어 오른쪽 여백을 260픽셀으로 설정합니다. 왼쪽 여백은 값이 210픽셀이 되도록 끕니다.

  3. 주 콘텐츠 div 요소를 선택한 채로 서식 메뉴에서 테두리 및 음영을 선택합니다.

    테두리 및 음영 대화 상자가 표시됩니다.

  4. 설정에서 사용자 지정을 선택합니다.

  5. 스타일 목록에서 실선을 선택하고 미리 보기에서 왼쪽 테두리 단추를 클릭합니다.

  6. 너비 텍스트 상자에 1px를 입력합니다.

  7. 안쪽 여백의 왼쪽 상자에 10px를 입력합니다.

  8. 확인을 클릭합니다.

바닥글 조정

사용자가 페이지의 크기를 조정하거나 페이지가 대형 서식 모니터에 표시되는 경우 바닥글이 줄이 바뀌고 열 중 하나의 가장자리에 나타날 수 있습니다. 이를 방지하려면 지우기 스타일 규칙을 설정합니다.

바닥글 div 요소를 조정하려면

  1. 디자인 뷰에서 바닥글 div 요소를 선택합니다.

  2. 서식 메뉴에서 새 스타일을 클릭합니다.

    새 스타일 대화 상자가 표시됩니다.

  3. 선택기 상자에서 #footer를 입력하거나 선택합니다.

  4. 범주 목록에서 레이아웃을 클릭합니다.

  5. 지우기 목록에서 모두를 선택합니다.

  6. 확인을 클릭합니다.

스타일시트 만들기 및 사용

스타일시트에 스타일 규칙을 추가하면 CSS를 효율적으로 사용할 수 있습니다. 그러면 모든 페이지에서 스타일을 참조할 수 있으므로 페이지가 일관성 있게 보입니다.

CSS 스타일시트를 ASP.NET 테마와 함께 사용할 수도 있습니다. 스타일시트를 테마와 함께 사용하려면 테마를 올바른 폴더에 넣어야 합니다. 테마 및 CSS에 대한 자세한 내용은 ASP.NET 테마 및 스킨 개요를 참조하십시오.

스타일시트를 만들려면 새 페이지를 만들 때 사용하는 기술과 같은 기술을 사용합니다.

스타일시트를 만들어 페이지에 첨부하려면

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

  2. Visual Studio에 설치되어 있는 템플릿에서 스타일시트를 선택합니다.

  3. 이름 상자에 Layout.css를 입력한 다음 추가를 클릭합니다.

    편집기가 열리고 빈 body 스타일 규칙이 포함된 새 스타일시트가 표시됩니다.

  4. Default.aspx 페이지를 열거나 이 페이지로 전환하고 디자인 뷰로 전환합니다.

  5. 서식 메뉴에서 CSS 스타일을 클릭한 다음 스타일 관리를 클릭합니다.

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

  6. 스타일시트 첨부를 클릭합니다.

  7. 스타일시트 선택 대화 상자가 표시됩니다.

  8. Layout.css 파일을 선택한 다음 확인을 클릭합니다.

    Layout.css라는 새 탭이 스타일 관리 창에 만들어집니다.

스타일시트를 페이지에 여러 가지 방법으로 할당할 수 있습니다. 가장 간단한 방법은 파일을 솔루션 탐색기에서 소스 뷰에 있는 페이지의 head 요소로 끄는 것입니다.

스타일 규칙을 페이지에서 스타일시트로 이동

스타일 관리 창을 사용하여 스타일을 한 페이지에서 다른 페이지로 이동하거나 스타일 규칙이 페이지에 적용되는 방식을 확인할 수 있습니다.

지금까지 이 연습에서 사용자가 만든 스타일시트는 Default.aspx 페이지의 style 요소에 저장되었습니다. 이러한 스타일 규칙을 사용자가 만든 새 스타일시트로 이동할 수 있습니다.

스타일 관리 창을 사용하여 스타일 규칙을 이동하려면

  1. 스타일 관리 창의 현재 페이지 탭에서 모든 스타일을 선택합니다. Shift+클릭을 사용하여 선택할 수 있습니다.

  2. 선택한 스타일을 스타일 관리 창의 Layout.css 탭으로 끕니다.

    스타일 규칙이 Default.aspx 페이지에서 제거되어 Layout.css 파일로 이동됩니다. 소스 뷰에서 Default.aspx 페이지를 검토하고 편집기에서 Layout.css 페이지로 전환하여 이를 확인할 수 있습니다.

스타일 관리 창을 사용하여 스타일시트에서 스타일의 순서를 변경할 수도 있습니다. 예를 들어 검색 스타일 규칙이 배너 스타일 규칙 바로 아래에 오도록 끌 수 있습니다.

다음 단계

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

참고 항목

작업

연습: Visual Web Developer에서 기본 웹 페이지 만들기

개념

Visual Web Developer의 웹 사이트 형식