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

이 연습에서는 Visual Studio의 CSS 스타일시트 기능을 소개합니다. 또한 3열 페이지 레이아웃을 만드는 방법을 설명하고 새 웹 페이지 및 스타일시트를 만드는 방법에 대한 기본 기술을 보여 줍니다.

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

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

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

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

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

  • 컴퓨터에 Visual Studio 또는 Visual Web Developer Express가 설치되어 있어야 합니다.

    참고참고

    Visual Studio를 사용하는 경우 이 연습에서는 Visual Studio를 처음 시작할 때 웹 개발 설정 컬렉션을 선택했다고 가정합니다. 자세한 내용은 방법: 웹 개발 환경 설정 선택을 참조하십시오.

  • Visual Studio에서의 작업 방법에 대해 전반적으로 이해하고 있어야 합니다.

    Visual Studio에서 웹 페이지를 만드는 방법에 대한 소개는 연습: Visual Studio에서 기본 웹 페이지 만들기를 참조하십시오.

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

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

참고참고

ASP.NET 웹 사이트 및 ASP.NET 웹 응용 프로그램용 기본 프로젝트 템플릿에는 미리 빌드된 Site.css 파일이 포함되어 있습니다. 이 파일에는 마스터 페이지(Site.master)와 콘텐츠 페이지(Default.aspx 및 About.aspx)의 모양을 정의하는 CSS 규칙이 포함되어 있습니다. ASP.NET 웹 페이지에서 CSS를 만들고 작업하는 방법을 보여 주기 위해 이 연습에서는 비어 있는 웹 사이트 프로젝트에서 시작한 다음 이 사이트에 CSS 기능을 명시적으로 추가합니다.

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

  1. Visual Studio 또는 Visual Web Developer Express를 엽니다.

  2. 파일 메뉴에서 새 웹 사이트를 클릭합니다.

    새 웹 사이트 대화 상자가 표시됩니다.

  3. 설치된 템플릿에서 Visual Basic 또는 VisualC#을 클릭한 다음 ASP.NET 빈 웹 사이트를 선택합니다.

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

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

  5. 확인을 클릭합니다.

    Visual Studio에서 다른 페이지나 파일은 포함하지 않고 Web.config 파일만 포함하는 웹 사이트 프로젝트를 만듭니다.

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

  7. Web Form을 선택하고 페이지 이름을 Default.aspx로 지정한 다음 추가를 클릭합니다.

    Visual Studio에서는 Default.aspx 페이지를 만들고 소스 뷰에서 해당 페이지를 엽니다.

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

페이지 요소 추가

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

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

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

    참고참고

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

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

  3. form 요소 내에서 기본적으로 만들어진 빈 div 요소를 제거합니다.

  4. 여는 <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>
    
    참고참고

    페이지의 가독성을 높이려면 편집 메뉴에서 문서 서식을 클릭하십시오.

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

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

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

디자인 뷰에서 다음 방법으로 페이지의 개별 요소에 스타일을 적용할 수 있습니다.

  • 개별 요소의 style 특성으로 작성되는 인라인 스타일을 사용합니다. 이러한 스타일 규칙은 해당 요소에만 적용할 수 있습니다.

  • 페이지의 HTML head 요소에 있는 style 요소에 스타일 규칙을 작성합니다. 이러한 스타일 규칙은 현재 페이지의 요소에 적용할 수 있습니다.

  • 외부 CSS 파일에 스타일 규칙을 작성합니다. 이러한 경우 스타일 규칙은 웹 사이트의 모든 페이지에 적용할 수 있습니다.

이 연습 단계에서는 페이지의 style 요소 섹션에 작성되는 서식 및 스타일 규칙을 정의합니다. 나중에 만든 CSS 정보를 외부 스타일시트로 이동합니다.

페이지 배너 서식 지정

서식을 지정할 첫 번째 요소는 <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. h2 요소인 "Making CSS Styling Easier in Design View"라는 제목에 포인터를 놓습니다.

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

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

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

    5. font-familyComic Sans MS로 설정하고 font-sizeSmall로 설정합니다.

    6. 확인을 클릭합니다.

페이지 요소 선택

Visual Studio에서는 페이지의 요소를 여러 가지 방법으로 선택할 수 있습니다. 디자인 뷰 창의 아래 섹션에 있는 빠른 태그 선택기를 사용할 수 있습니다. 페이지에서 임의의 위치에 삽입 지점을 놓으면 해당 영역에 대한 기본 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 키를 두 번 눌러 banner라는 div 요소인 포함 요소를 선택합니다.

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

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

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

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

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

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

  7. 서식 메뉴에서 테두리 및 음영을 클릭합니다.

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

    음영 탭을 선택하고 배경색을 선택한 다음 다른 색을 클릭합니다.

    다른 색 대화 상자가 표시됩니다.

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

    분할 뷰에서 #banner 스타일 규칙이 background-color의 설정을 포함하도록 업데이트되었는지 확인할 수 있습니다.

  9. 배너에 맞도록 폼의 너비를 조정하려면 form 요소를 선택하고 오른쪽의 크기 조정 핸들을 끌어 폼의 너비를 780픽셀로 조정합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

참고참고

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

세로 막대 열 만들기

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

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

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

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

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

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

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

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

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

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

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

가운데 열 만들기

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

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

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

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

    div 요소의 테두리를 끌어 이러한 설정을 지정하는 데 문제가 있는 경우 소스 뷰나 분할 뷰를 사용하여 다음 스타일 규칙을 만들 수 있습니다.

    #maincontent
    {
        margin-right: 290px;
        margin-left: 210px;
    }
    
  3. 주 콘텐츠 div 요소를 선택하고 서식 메뉴에서 테두리 및 음영을 클릭합니다.

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

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

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

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

  7. 안쪽 여백왼쪽오른쪽상자 모두에 10px를 입력합니다.

  8. 확인을 클릭합니다.

    소스 뷰나 분할 뷰에서 #maincontent 요소에 대한 스타일 정의가 업데이트되었는지 확인합니다.

바닥글 조정

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

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

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

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

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

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

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

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

  6. 확인을 클릭합니다.

지금까지 이 연습에서는 페이지에서 직접 요소를 조작하고 해당 설정을 페이지의 head 요소에 있는 style 요소에 저장하여 스타일 정의를 만들었습니다. 만든 스타일 설정은 현재 페이지에만 적용됩니다.

스타일시트에 스타일 규칙을 추가하면 CSS를 효율적으로 사용할 수 있습니다. 그러면 모든 페이지에서 스타일을 참조할 수 있습니다. 스타일시트를 만들려면 새 페이지를 만들 때 사용하는 기술과 같은 기술을 사용합니다.

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

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

  2. 템플릿 목록에서 스타일시트를 선택합니다.

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

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

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

  5. 보기 메뉴에서 스타일 관리를 클릭합니다.

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

  6. 스타일 관리 창의 도구 모음에서 스타일시트 첨부 단추를 클릭합니다.

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

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

    Layout.css라는 새 탭이 스타일 관리 창에 만들어집니다. 이는 Layout.css 파일이 현재 문서에 연결되었음을 나타냅니다. 소스 또는 분할 뷰에서 다음과 같이 link 요소가 페이지의 head 요소에 추가되었는지 확인할 수 있습니다.

    <link href="Layout.css" rel="stylesheet" type="text/css" />
    

    여기에서는 스타일 관리 창을 사용하여 스타일시트를 페이지에 할당하는 방법을 보여 줍니다. 다른 방법으로 스타일시트를 페이지에 할당할 수도 있습니다. 예를 들어 솔루션 탐색기의 파일을 소스 뷰에 표시된 페이지의 head 요소로 끌어오거나, 솔루션 탐색기의 파일을 끌어서 디자인 뷰의 페이지에 놓을 수도 있습니다.

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

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

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

  1. Default.aspx 페이지로 전환합니다.

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

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

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

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

스타일 관리 창을 사용하여 스타일시트에서 스타일의 순서를 변경할 수도 있습니다.

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

커뮤니티 추가 항목

추가
표시: