CSS 작업 개요
업데이트: 2007년 11월
CSS 스타일시트에는 웹 페이지의 요소에 적용되는 스타일 규칙이 포함되어 있습니다. 이러한 스타일은 요소가 표시되는 방법 및 페이지에서의 요소 위치를 정의합니다. Visual Studio 2008은 CSS 작업에 사용할 수 있는 도구를 제공합니다.
이 항목의 내용은 다음과 같습니다.
시나리오
CSS 도구 기능
배경
코드 예제
클래스 참조
새로운 기능
시나리오
Visual Studio 2008에서는 디자이너를 사용하여 웹 페이지를 만들고 편집하는 동안 인라인이거나 웹 페이지에 포함되거나 또는 외부 스타일시트에 포함된 스타일 규칙을 작성할 수 있습니다. 시각 보조 기능을 사용하여 페이지 요소에 적용된 여백 및 안쪽 여백을 볼 수 있습니다. 또한 위치 지정 도구를 사용하여 요소의 위치를 지정할 수 있습니다.
맨 위로 이동
CSS 도구 기능
Visual Studio 2008에서는 스타일 및 CSS 스타일시트를 만들고 적용하며 관리하는 도구 집합을 제공합니다. 도구는 다음과 같습니다.
스타일 적용 창을 사용하여 스타일을 만들고 수정하며 적용할 수 있습니다. 또한 외부 CSS에 연결하거나 외부 CSS를 제거할 수 있습니다. 이 창은 스타일 형식을 식별하고 해당 스타일이 현재 웹 페이지에서 사용되는지 여부와 현재 선택 항목에서 사용되는지 여부를 보여 줍니다. 자세한 내용은 방법: 스타일 적용 및 스타일 관리 창 사용을 참조하십시오.
스타일 관리 창은 스타일 적용 창과 같은 기능을 많이 제공합니다. 그러나 스타일 관리 창을 사용하면 스타일을 내부 스타일시트(페이지의 style 요소)에서 외부 스타일시트로 이동하거나 그 반대 방향으로 이동할 수 있습니다. 또한 이 창을 사용하여 스타일을 스타일시트 안으로 이동할 수 있습니다. 자세한 내용은 방법: 스타일 적용 및 스타일 관리 창 사용을 참조하십시오.
CSS 속성 창에서는 웹 페이지의 현재 선택 항목에서 사용하는 스타일을 보여 줍니다. 또한 스타일에 대한 우선 순위를 보여 주고 모든 CSS 속성의 전체 목록을 제공합니다. 따라서 기존 스타일에 속성을 추가하고 이미 설정한 속성을 수정하며 새 인라인 스타일을 만들 수 있습니다. 자세한 내용은 방법: CSS 속성 창 사용을 참조하십시오.
직접 스타일 적용 도구 모음을 사용하여 클래스 기반 스타일 또는 ID 기반 스타일을 적용하거나 제거할 수 있고 새 스타일을 만들고 적용할 수 있습니다. 이 도구 모음을 사용하면 Visual Studio에서 생성된 스타일을 더 많이 제어할 수 있습니다. 자세한 내용은 방법: 직접 스타일 적용 도구 모음 사용을 참조하십시오.
태그 선택기를 사용하면 웹 페이지에서 작업하는 동안 HTML 태그를 선택할 수 있습니다. 태그 선택기 표시줄은 편집 창의 아래쪽에 있습니다. 페이지의 아무 곳에나 커서를 두면 해당 영역에 대한 기본 HTML 태그를 표시하는 태그가 빠른 태그 선택기 표시줄에 나타납니다. 또한 Esc 키를 사용하여 HTML 계층 구조를 위로 이동하여 다른 태그 내에 중첩된 태그를 선택할 수 있습니다. 자세한 내용은 Visual Web Developer에서 HTML 편집기 태그 탐색을 참조하십시오.
맨 위로 이동
배경
서식 특성을 페이지의 각 요소에 개별적으로 할당하는 대신 스타일 규칙을 만들 수 있습니다. 웹 브라우저에서 특정 요소 또는 특정 ID나 스타일 클래스를 포함하는 요소의 인스턴스가 발견되면 이러한 규칙은 속성 값(일반적으로 서식 규칙)을 적용합니다.
CSS 스타일 작업을 수행하려면 스타일을 만들고 적용하는 방법을 이해해야 합니다. 이 단원에는 CSS 스타일 및 CSS 스타일 작업을 쉽게 만드는 Visual Studio 2008의 도구에 대한 W3C CSS 사양 정보가 포함되어 있습니다.
CSS 스타일 규칙 정의
각 CSS 스타일 규칙(스타일이라고도 함)은 선택기(예: h1)와 선언(예: color:blue)이라는 두 부분으로 구성됩니다. 선언은 속성(color)과 해당 값(blue)으로 구성됩니다. 스타일 규칙에 대한 구문은 다음과 같습니다.
Selector { property : value ; property2 : value2}
예를 들어 다음 CSS 스타일 규칙은 모든 h1 요소의 모든 텍스트가 가운데에 맞춰지고 텍스트의 글꼴 색이 파랑이 되도록 지정합니다.
h1 {text-align:center; color:blue;}
여러 스타일 형식 사용
요소, 클래스가 할당된 요소 또는 ID별 요소에 적용되는 스타일 규칙을 정의할 수 있습니다. 스타일은 선택기로 구성되는 해당 규칙 집합에 의해 정의되고 뒤에는 왼쪽 중괄호({)와 오른쪽 중괄호(}) 사이에 표시되는 속성 선언 블록이 옵니다. 각 스타일 형식은 해당 선택기에 의해 다른 스타일 형식과 구분됩니다. 클래스 기반 선택기는 마침표(.) 뒤에 옵니다. ID 기반 선택기는 숫자 기호(#) 뒤에 옵니다. 요소 기반 스타일에 대한 선택기는 HTML 요소의 이름(예: h1)으로만 구성됩니다.
요소 기반 스타일
요소 기반 스타일은 특정 HTML 요소의 모든 인스턴스에 적용할 속성을 정의합니다. 요소 기반 스타일은 요소의 개별 인스턴스에 대한 클래스 기반 스타일이나 ID 기반 스타일로 재정의할 수 있습니다. 예를 들어 모든 단락(p 요소에 있는 콘텐츠) 주위에 25픽셀의 여백을 만들 수 있습니다. 이 작업을 위해 p 요소를 해당 선택기로 사용하고 여백 속성에 대한 선언을 포함하는 요소 기반 스타일을 만듭니다. 다음 예제에서는 이러한 요소 기반 스타일 규칙을 보여 줍니다.
p { margin-left: 25px; margin-right: 25px }
클래스 기반 스타일
클래스 기반 스타일은 특정 요소 형식의 하위 집합(예: 전체가 아닌 일부 p 요소)에 적용할 속성을 정의합니다. 또한 일부 p 요소와 일부 span 요소와 같은 여러 요소 형식에 적용할 수 있습니다. 다음 예제에서는 클래스 기반 스타일 규칙을 보여 줍니다. introduction이라는 이름은 스타일 선택기(클래스의 이름)입니다.
.introduction {font-size: small; color: white}
다음 예제에서는 <p> 태그에 대한 클래스를 지정하는 방법을 보여 줍니다.
<p class="introduction">
ID 기반 스타일
ID 기반 스타일은 해당 ID 특성에 의해 식별되는 특정 요소에 적용할 속성을 정의합니다. 가끔 웹 페이지에서 단일 HTML 요소의 스타일을 지정하려고 할 때 ID 기반 스타일을 사용합니다. 다음 예제에서는 ID 기반 스타일을 보여 줍니다. footer라는 이름은 이 스타일을 적용할 ID를 지정합니다.
#footer {background-color: #CCCCCC; margin: 15px}
다음 예제에서는 <p> 태그에 대한 ID를 지정하는 방법을 보여 줍니다.
<p id="footer">
CSS 스타일 작성
다음을 포함하여 여러 장소에서 CSS 스타일 규칙을 작성할 수 있습니다.
HTML 태그가 있는 인라인
웹 페이지의 style 요소
웹 페이지에 연결되거나 웹 페이지로 가져오는 외부 스타일시트(.css 파일)
일반적으로 전체 웹 사이트에 적용될 규칙을 외부 스타일시트에 작성합니다. 페이지의 style 요소에 있는 페이지에만 적용할 스타일 규칙을 작성합니다. 단일 페이지 요소에 적용할 스타일 규칙을 인라인 스타일로 작성합니다. 많은 디자이너와 개발자는 하나 이상의 외부 스타일시트에 모든 스타일 규칙을 작성하면 스타일을 보다 쉽게 유지 관리할 수 있다는 사실을 알고 있습니다.
인라인 스타일 만들기
인라인 스타일 규칙은 스타일 특성을 사용하여 요소의 열린 태그에서 정의됩니다. 웹 페이지의 단일 요소에 대한 속성을 정의하려는데 해당 스타일을 다시 사용하지 않으려는 경우 인라인 스타일을 사용합니다.
다음 예제에서는 인라인 스타일을 보여 줍니다.
<p style="font-weight: bold; font-style: italic; color: #FF0000">
내부(페이지별) CSS 스타일 만들기
CSS 스타일 규칙은 웹 페이지의 head 요소 내에 있는 style 요소에 정의할 수 있습니다. 이런 경우 스타일 규칙은 해당 페이지의 요소에만 적용됩니다.
다음 예제에서는 CSS 스타일 규칙을 정의하여 웹 페이지의 모든 h1 요소에 적용하는 방법을 보여 줍니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML 4.0 CSS Element Style Example</title>
<style type="text/css"> h1{text-align:center; color:blue;} </style>
</head>
<body>
<h1>This text is centered and blue</h1>
</body>
</html>
이 웹 페이지에서 <h1> 태그와 </h1> 태그 사이에 표시되는 모든 텍스트는 가운데에 맞춰지고 파랑입니다. 문서의 각 h1 요소에 대해 이러한 스타일 특성을 다시 할당할 필요가 없습니다. h1 요소에 있는 모든 텍스트의 색 또는 속성을 변경하려는 경우 한 스타일 규칙을 편집할 수 있습니다.
외부 CSS 스타일시트 만들기
외부 스타일시트는 파일 이름 확장명이 .css이고 스타일 규칙만 포함되어 있는 텍스트 파일입니다. 다음 예제에 표시된 대로 link 요소를 사용하여 스타일시트를 웹 페이지에 연결할 수 있습니다.
<link rel="stylesheet" type="text/css" href="myStyles.css" />
이 link 요소는 외부 스타일시트 myStyles.css의 스타일 규칙을 현재 페이지에 적용합니다.
외부 스타일시트에 나열되는 스타일 규칙은 style 요소에 나열되는 것과 같은 방법으로 작성되지만<style> 태그와 </style> 태그 안에 포함되지 않습니다. 다음 예제에서는 간단한 .css 파일의 전체 내용을 보여 줍니다.
h1 { text-align:center; color:blue; }
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }
외부 스타일시트를 여러 HTML 페이지에 연결하여 웹 사이트 전체에 스타일을 적용할 수 있습니다. 스타일시트는 서식 규칙과 콘텐츠를 구분하므로 스타일 규칙을 쉽게 관리할 수 있습니다.
CSS 스타일 규칙의 우선 순위 이해
CSS 스타일 규칙은 우선 순위를 따른다는 의미에서 "연쇄적"입니다. 전역 스타일 규칙이 먼저 HTML 요소에 적용되고 로컬 스타일 규칙이 전역 스타일 규칙을 재정의합니다. 예를 들어 웹 페이지에 있는 style 요소에 정의된 스타일은 외부 스타일시트에 정의된 스타일을 재정의합니다. 마찬가지로 페이지의 HTML 요소에 정의된 인라인 스타일은 다른 위치의 같은 요소에 대해 정의된 스타일을 재정의합니다.
로컬 CSS 스타일 규칙에 의해 재정의되지 않은 개별 전역 스타일 규칙은 로컬 스타일이 적용된 후에도 요소에 적용됩니다. 이전 단원의 예제에서 h1 요소의 텍스트와 관련된 로컬 CSS 스타일은 h1 텍스트에 대한 웹 브라우저의 일부 전역 스타일 규칙(h1 텍스트 가운데 맞춤, 파랑으로 표시)을 바꿉니다. 그러나 글꼴 특성과 같은 사용 가능한 스타일을 모두 변경하지는 않습니다. 전역 스타일 규칙과 로컬 스타일 규칙 모두 순서대로 적용됩니다. 따라서 이 페이지의 모든 h1 텍스트가 굵게, 가운데 맞춤 및 파랑으로 서식이 지정되는 큰 글꼴로 표시됩니다.
코드 예제
맨 위로 이동
클래스 참조
CSS 도구에 적용되는 클래스는 없습니다.
맨 위로 이동
새로운 기능
Visual Studio 2008은 이전보다 CSS 스타일시트 작업을 쉽게 해주는 몇 가지 새로운 도구를 통해 다양한 기능의 CSS 편집 환경을 제공합니다. 레이아웃을 디자인하고 콘텐츠의 스타일을 지정하는 작업의 많은 부분을 디자인 뷰에서 CSS 속성 창, 스타일 적용 및 스타일 관리 창, 직접 스타일 적용 도구를 사용하여 수행할 수 있습니다. 또한 디자인 뷰에서 WYSIWYG 시각적 레이아웃 도구를 사용하여 위치, 여백 및 안쪽 여백을 변경할 수 있습니다.
맨 위로 이동