스타일 작성기 대화 상자
업데이트: 2007년 11월
스타일 작성기 대화 상자에서는 CSS 스타일 특성을 정의할 수 있는 옵션을 제공합니다. CSS 스타일은 개별 서식 및 위치 특성을 동시에 적용할 수 있도록 하나의 특성 집합으로 결합합니다.
스타일 작성기 대화 상자는 두 개의 창으로 구분되어 있습니다. 왼쪽 창에는 글꼴, 배경, 텍스트, 위치, 레이아웃, 가장자리, 목록 및 기타의 8개 일반 범주가 표시됩니다. 범주를 선택하면 오른쪽 창에 선택한 범주에 대한 옵션이 표시됩니다. 스타일 옵션을 선택하면 스타일 작성기 대화 상자에서 자동으로 CSS 스타일 정의를 만듭니다.
단일 웹 페이지에서 개별 HTML 요소에 CSS 스타일 특성을 직접 적용하거나 외부 스타일시트에 저장된 CSS 스타일 규칙에 스타일 특성을 추가할 수 있습니다. 외부 스타일시트는 여러 웹 페이지의 공통된 모양을 한 번에 정의하는 데 사용할 수 있습니다.
스타일 작성기 대화 상자를 표시하려면
주 메뉴에서 서식을 클릭한 다음 스타일을 클릭합니다.
스타일 작성기 대화 상자가 나타납니다.
왼쪽 창에서 CSS 스타일 특성을 정의할 옵션을 선택합니다.
디자인 뷰에서 인라인 CSS 스타일 만들기
디자인 뷰에서 선택한 HTML 요소에 서식을 지정하면 스타일 특성이 요소의 태그에 인라인으로 삽입됩니다. 새로 삽입한 스타일 특성을 확인한 후 조정하려면 HTML 뷰로 전환합니다.
웹 페이지의 HTML 요소에 직접 CSS 스타일 특성을 적용하려면
HTML 디자이너의 디자인 뷰에서 HTML 문서를 엽니다.
문서 개요 창에서 서식을 지정할 요소를 선택한 다음 서식 메뉴에서 스타일을 클릭하여 스타일 작성기 대화 상자를 엽니다.
왼쪽 창에서 CSS 스타일 특성을 정의할 옵션을 선택합니다.
스타일 작성기 대화 상자의 제목에는 선택한 요소의 이름이 포함됩니다. CSS 스타일은 HTML 문서의 <BODY> 요소 내에 있는 요소에 적용할 수 있습니다.
HTML 뷰의 CSS 스타일 태그
디자인 뷰에서 HTML 요소에 인라인 스타일을 추가하면 다음 코드 예제와 같이 여는 태그에 HTML 태그가 추가되어 HTML 뷰에서 보고 편집할 수 있습니다.
<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>
또는 HTML 문서의 <HEAD> 요소 내에 STYLE 블록을 만들 수도 있습니다. 예를 들어, 다음과 같습니다.
<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>
외부 스타일시트의 CSS 스타일
.css 확장명을 가진 별도의 스타일시트 문서에서 스타일을 만들 수도 있습니다.
.css 확장명을 가진 별도의 스타일시트 문서에서 스타일을 만들려면
편집을 위해 외부 스타일시트(.css 문서)를 열거나 웹 응용 프로그램에 스타일시트가 없는 경우 다음 단계를 수행하여 새로 만듭니다.
웹 사이트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자의 Visual Studio에 설치되어 있는 템플릿 목록에서 스타일시트를 선택한 다음 추가를 클릭하여 웹 사이트에 새 스타일시트를 추가합니다.
편집할 스타일시트를 두 번 클릭하여 엽니다.
스타일 메뉴에서 스타일 규칙 추가를 클릭하여 비어 있는 새 스타일 정의를 삽입합니다.
스타일 규칙 선택기 뒤에 있는 중괄호({ }) 안에 삽입 지점을 두고 스타일을 클릭한 다음 스타일 메뉴에서 스타일 작성을 클릭하여 스타일 작성기 대화 상자를 열고 스타일 정의에 특성을 추가합니다.
.gif "참고") 참고: |
|---|
편집할 외부 CSS 스타일시트를 열면 스타일 규칙 추가 및 스타일 작성 옵션이 포함되어 있는 스타일 메뉴가 나타납니다. 스타일 규칙 선택기 뒤에 있는 중괄호 안에 삽입 지점을 놓으면 스타일 메뉴에서 스타일 작성 옵션을 사용할 수 있습니다. |
외부 스타일시트에 정의된 스타일을 웹 페이지의 HTML 요소에 사용할 수 있게 하려면 다음 코드 예제와 같이 페이지의 <HEAD> 요소 내에 외부 스타일시트에 대한 링크를 만듭니다.
<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">
CLASS 및 ID별로 요소에 스타일 정의 적용
스타일 CLASS 속성을 정의하려면 다음 코드 예제와 같이 마침표로 스타일 정의를 시작합니다.
.term { font-size:9pt; font-weight:bold; color:darkblue;}
HTML 디자이너의 HTML 뷰 또는 디자인 뷰에서 웹 페이지의 요소에 정의된 스타일 CLASS 속성을 적용할 수 있습니다. 디자인 뷰에서는 WYSIWYG 편집기에서 텍스트 또는 요소를 선택하거나 문서 개요 창에서 요소를 선택할 수 있습니다. 서식 도구 모음의 스타일 드롭다운 메뉴에서 스타일을 선택하면 선택한 요소에 해당 스타일이 적용됩니다.
HTML 뷰에서는 문서 개요 창을 사용하여 요소를 선택하고 속성 창을 열어 선택한 요소의 CLASS 속성으로 스크롤한 다음 원하는 CSS 스타일의 선택기를 마침표 없이 입력합니다. 그러면 요소의 HTML 태그에 CLASS 속성이 삽입됩니다. 예를 들면 다음과 같습니다.
<DIV CLASS="term">World Wide Web</DIV>
"term" 스타일의 이전 정의를 사용하면 "World Wide Web"이라는 단어가 9pt의 진한 파란색으로 굵게 표시됩니다.
페이지의 단일 위치에서만 사용할 수 있도록 고유 스타일을 정의할 수도 있습니다. 다음 코드 예제와 같이 고유 스타일의 이름을 숫자 기호(#)로 시작합니다.
#bigdeal {font-decoration:underline; font-size:24pt; color:red;}
웹 페이지의 단일 요소에 고유 스타일을 적용하려면
HTML 디자이너의 HTML 뷰에서 페이지를 엽니다.
문서 개요 창을 사용하여 요소를 선택한 다음 속성 창을 엽니다.
이 요소의 ID 속성에 원하는 스타일의 선택기를 입력합니다.
그러면 요소의 태그에 ID 특성이 삽입됩니다. 예를 들면 다음과 같습니다.
<P ID="bigdeal">Happy Birthday</P>
- "term" 스타일의 이전 정의를 사용하면 "Happy Birthday"라는 단어가 24pt의 붉은색 글자로 밑줄이 그어져서 표시됩니다.
작업
연습: Visual Web Developer에서 기본 HTML 편집
UI 요소
옵션에 대한 추가 정보 |
참조 |
|---|---|
글꼴 |
|
배경 |
|
텍스트 |
|
페이지 내 요소의 위치 |
|
흐름 제어, 오버플로, 클리핑 및 페이지 구분선 인쇄 |
|
테두리, 여백 및 안쪽 여백 |
|
목록 |
|
UI(사용자 인터페이스), 표 및 시각 효과 |