클래스와 ID 스타일 정의 및 적용

여러 요소에 동일한 스타일을 지정하려면 클래스를 사용하십시오. 클래스를 사용하면, 클래스를 태그와 연관시켜 다양한 태그에 동일한 스타일을 지정할 수 있습니다.

전제조건: 스타일시트 작성

여러 클래스를 동일 태그 발생마다 연관시키면 동일 태그에 여러 스타일을 지정할 수 있습니다.

클래스 스타일을 작성하고 적용하려면 다음을 수행하십시오.

  1. 프로젝트 탐색기 보기에서 파일을 두 번 클릭하여 편집할 .css 파일을 여십시오. 편집 영역에서 스타일시트가 열립니다.
  2. 클래스 스타일을 작성하려면 다음을 수행하십시오.
    1. 스타일 규칙 추가 아이콘( 스타일 규칙 추가 아이콘 그림)을 클릭하십시오. 새 스타일의 선택기 설정 대화 상자가 열립니다.
    1. 클래스 단일 선택 단추를 선택하십시오. 클래스 이름 필드에 클래스 이름을 지정하십시오. 이름은 마침표로 시작해야 합니다(예: .note). ID 옵션은 클래스 옵션과 기능이 거의 동일합니다. 유일한 차이점은 ID를 페이지의 한 위치(하나의 태그)에만 적용할 수 있다는 점입니다. 따라서, ID가 아닌 클래스를 사용하는 것이 좋습니다. ID를 사용 중일 경우에는 ID 단일 선택 단추를 선택하고 ID 필드에 이름을 입력하십시오. 이름은 #로 시작해야 합니다.
    2. 확인을 클릭하십시오.
    3. 스타일 추가 대화 상자를 사용하여 특정 스타일 정의를 추가하십시오.
    4. 확인을 클릭하여 변경사항을 저장하십시오. 지정한 클래스 이름이 스타일 보기에 표시됩니다.
  3. 요소에 클래스를 적용하려면 다음을 수행하십시오.
    1. Page Designer의 디자인 페이지에서 요소를 선택하십시오.
    2. 특성 보기에서 클래스 필드 옆에 있는 찾아보기 아이콘( 특성 보기의 클래스 필드 그림)을 클릭하십시오. 클래스 선택 대화 상자가 열립니다.
    3. 스타일시트를 펼치고 원하는 클래스를 선택하십시오.

      클래스 선택 대화 상자에서 선택한 클래스의 그림

    1. 확인을 클릭하십시오.
  4. ID 스타일을 적용하려면 다음을 수행하십시오.
    1. ID 스타일을 적용하려는 요소를 선택하십시오.
    2. 특성 보기에서 모든 속성 아이콘(모든 속성 아이콘 그림)을 클릭하십시오.
    3. ID 필드에 ID 이름을 입력하십시오(# 없이).

      특성 보기에서 ID 속성 그림

  5. 동일한 방법으로 다른 요소를 선택하고 동일한 클래스 스타일을 적용할 수 있습니다. 스타일 도구 모음에서 정의된 클래스 스타일을 적용할 수도 있습니다. Page Designer에서 도구 모음 > 스타일을 선택하여 스타일 도구 모음을 표시하십시오. 드롭 다운 목록에서 클래스 이름을 선택하여 초점이 놓인 요소에 클래스 스타일을 적용할 수 있습니다.
  6. 스타일시트에서 사용 중인 클래스 정의를 보려면 스타일 보기에서 스타일을 클릭하십시오. 특성 보기에서 스타일 정의를 확인할 수 있습니다.
관련 개념
CSS(캐스케이딩 스타일시트) Designer
관련 태스크
스타일 정의
사전 정의된 영역의 스타일 지정
지정된 스타일 제거
요소에 대한 스타일 정의
의사 HTML 링크 스타일 정의
이용약관 | 피드백
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.