속성 인스펙터([윈도우] > [속성])가 아직 열려 있지 않다면 열고 패널 왼쪽 모서리에서 CSS 옵션을 선택하십시오.
마지막 업데이트 날짜
2021년 12월 20일
Dreamweaver에서 텍스트 속성 관리자를 사용하여 HTML 서식 또는 CSS 서식을 적용하는 방법을 살펴봅니다.
텍스트 속성 검사기를 사용하여 HTML 서식 또는 CSS(Cascading Style Sheet) 서식을 적용할 수 있습니다.HTML 서식을 적용하면 Dreamweaver가 페이지 본문의 HTML 코드에 속성을 추가합니다.CSS 서식을 적용하면 Dreamweaver가 문서의 헤드 부분이나 별도의 스타일시트에 속성을 작성합니다.
CSS 인라인 스타일을 만들면 Dreamweaver는 페이지의 본문에 직접 스타일 속성 코드를 추가합니다.
텍스트 서식 지정 정보(CSS 대 HTML)
Dreamweaver에서 텍스트의 서식을 지정하는 것은 일반적인 워드 프로세서를 사용하는 것과 비슷합니다.텍스트 블록에 대한 기본 서식 스타일(단락, 제목 1, 제목 2 등)을 설정하거나, 선택한 텍스트의 글꼴, 크기, 색상, 정렬을 변경하거나, 굵게, 기울임꼴, 코드(고정폭), 밑줄 등의 텍스트 스타일을 적용할 수 있습니다.
Dreamweaver에는 CSS 속성 검사기와 HTML 속성 검사기, 이렇게 두 개의 속성 검사기가 하나로 통합되어 있습니다.CSS 속성 검사기를 사용하면 Dreamweaver가 Cascading Style Sheets(CSS)를 사용하여 텍스트의 서식을 지정합니다.CSS는 웹 디자이너와 개발자에게 웹 페이지 디자인에 대한 더 큰 제어권을 제공하는 동시에 접근성 개선 기능과 파일 크기 감소를 제공합니다.CSS 속성 검사기를 사용하면 기존 스타일에 액세스하고 새로운 스타일을 만들 수 있습니다.
CSS를 사용하는 것은 웹 페이지의 구조를 손상시키지 않으면서 웹 페이지의 스타일을 제어하는 방법입니다.웹 페이지의 구조적 논리에서 시각적 디자인 요소(글꼴, 색상, 여백 등)를 분리함으로써, CSS는 콘텐츠의 무결성을 희생하지 않으면서 웹 디자이너에게 시각적 및 타이포그래피 제어 기능을 제공합니다.또한 단일하고 독립적인 코드 블록 내에서 타이포그래피 디자인과 페이지 레이아웃을 정의하면—이미지 맵, font 태그, 테이블, 스페이서 GIF에 의존하지 않고도—더 빠른 다운로드, 간소화된 사이트 유지 관리, 그리고 여러 웹 페이지에서 디자인 속성을 제어할 수 있는 중앙 지점을 제공합니다.
CSS로 만든 스타일을 문서에 직접 저장하거나, 더 강력하고 유연한 기능을 원한다면 외부 스타일시트에 스타일을 저장할 수 있습니다.외부 스타일시트를 여러 웹 페이지에 첨부하면 스타일시트에 적용한 모든 변경 사항이 모든 페이지에 자동으로 반영됩니다.페이지의 모든 CSS 규칙에 액세스하려면 CSS 스타일 패널([윈도우] > [CSS 스타일])을 사용하십시오.현재 선택한 항목에 적용되는 규칙에 액세스하려면 CSS 스타일 패널(현재 모드) 또는 CSS 속성 인스펙터의 대상 규칙 팝업 메뉴를 사용하십시오.
원한다면 HTML 마크업 태그를 사용해 웹 페이지의 텍스트 서식을 지정할 수 있습니다.CSS 대신 HTML 태그를 사용하려면 HTML 속성 인스펙터를 사용해 텍스트 서식을 지정하십시오.
같은 페이지 내에서 CSS와 HTML 3.2 서식을 결합할 수 있습니다. 서식 적용에는 우선 순위가 있습니다. 즉, HTML 3.2 서식은 외부 CSS 스타일 시트를 사용하여 적용한 서식보다 우선하며 문서에 임베드된 CSS는 외부 CSS보다 우선 적용됩니다.
속성 인스펙터에서 CSS 규칙 편집
다음 중 하나를 수행하십시오.
- 편집하려는 규칙으로 서식이 지정된 텍스트 블록 내부에 삽입점을 배치하십시오.규칙이 [대상 규칙] 팝업 메뉴에 나타납니다.
- [대상 규칙] 팝업 메뉴에서 규칙을 선택합니다.
- [규칙 편집]을 클릭하십시오.
CSS 속성 관리자의 다양한 옵션을 사용하여 규칙을 변경합니다.
대상 규칙
CSS 속성 관리자에서 편집하는 규칙입니다. 텍스트에 기존 스타일이 적용되어 있는 경우, 페이지의 텍스트 내부를 클릭하면 텍스트 형식에 영향을 주는 규칙이 나타납니다.대상 규칙 팝업 메뉴를 사용하여 새 CSS 규칙, 새 인라인 스타일을 만들거나 선택한 텍스트에 기존 클래스를 적용할 수도 있습니다.새 규칙을 만드는 경우 새 CSS 규칙 대화 상자를 완성해야 합니다.자세한 내용은 이 주제 끝부분의 링크를 참조하십시오.
규칙 편집
대상 규칙에 대한 CSS 규칙 정의 대화 상자가 열립니다.대상 규칙 팝업 메뉴에서 새 CSS 규칙을 선택하고 규칙 편집 버튼을 클릭하면 Dreamweaver에서 새 CSS 규칙 정의 대화 상자가 대신 열립니다.
CSS Designer
CSS Designer 패널이 열리고 현재 보기에서 대상 규칙의 속성이 표시됩니다.
글꼴
대상 규칙의 글꼴을 변경합니다.
크기
대상 규칙의 글꼴 크기를 설정합니다.
텍스트 색상
선택한 색상을 대상 규칙의 글꼴 색상으로 설정합니다. 색상 상자를 클릭하여 웹 안전 색상을 선택하거나 인접한 텍스트 필드에 16진수 값(예: #BB5153)을 입력합니다.
볼드체
대상 규칙에 굵게 속성을 추가합니다.
기울임체
대상 규칙에 기울임체 속성을 추가합니다.
왼쪽 정렬, 가운데 정렬, 오른쪽 정렬
대상 규칙을 왼쪽, 가운데 또는 오른쪽으로 정렬합니다.
글꼴, 크기, 텍스트 색상, 굵게, 기울임체 및 정렬 속성은 항상 문서 창에서 현재 선택 영역에 적용된 규칙에 대한 속성을 표시합니다. 이러한 속성을 변경하면 대상 규칙에 영향을 미칩니다.
속성 관리자를 사용하여 텍스트 색상 편집
텍스트에 대한 특정 규칙을 적용하지 않은 경우, 속성 관리자에서 직접 텍스트의 색상을 편집할 수 있습니다. 다음 예에서 편집 전 텍스트의 색상에 주목하십시오. 색상 피커 옆의 필드에는 흰색이 표시되어 커서를 놓은 텍스트의 색상을 나타냅니다.
텍스트의 색상을 편집하려면 우선 편집하려는 텍스트를 선택합니다. 색상 피커를 클릭하고 원하는 색상을 선택합니다. 속성 관리자에 새 색상이 표시되는 다음 이미지를 참조하십시오.
속성 관리자에서 HTML 형식 설정
속성 관리자([창] > [속성])가 아직 열려 있지 않다면 열고 HTML 버튼을 클릭합니다.
형식을 지정할 텍스트를 선택합니다.
선택한 텍스트에 적용할 옵션을 설정합니다.
서식
선택한 텍스트의 단락 스타일을 설정합니다. 단락은 <p> 태그의 기본 형식을 적용하고, 제목 1은 H1 태그를 추가하는 방식입니다.
ID
선택 사항에 ID를 할당합니다. ID 팝업 메뉴(해당하는 경우)는 문서에서 사용되지 않고 선언된 모든 ID를 나열합니다.
클래스
현재 선택된 텍스트에 적용된 클래스 스타일을 표시합니다.선택 영역에 스타일이 적용되지 않은 경우 팝업 메뉴에 CSS 스타일 없음이 표시됩니다.선택 영역에 여러 스타일이 적용된 경우 메뉴가 비어 있습니다.
[스타일] 메뉴를 사용하여 다음 중 하나를 수행하십시오:
선택 영역에 적용할 스타일을 선택합니다.
현재 선택된 스타일을 제거하려면 [없음]을 선택합니다.
[이름 변경]을 선택하여 스타일 이름을 변경합니다.
[스타일시트 첨부]를 선택하여 페이지에 외부 스타일시트를 첨부할 수 있는 대화 상자를 엽니다.
볼드체
[환경 설정] 대화 상자의 [일반] 범주에서 설정된 스타일 환경 설정에 따라 선택된 텍스트에 <b> 또는 <strong>을 적용합니다.
기울임체
[환경 설정] 대화 상자의 [일반] 범주에서 설정된 스타일 환경 설정에 따라 선택된 텍스트에 <i> 또는 <em>을 적용합니다.
비순차 목록
선택한 텍스트의 불릿 목록을 만듭니다. 텍스트를 선택하지 않은 경우 새 글머리 기호 목록이 시작됩니다.
순차 목록
선택한 텍스트의 숫자 목록을 만듭니다. 텍스트를 선택하지 않은 경우 새 번호 목록이 시작됩니다.
[인용 블록] 및 [인용 블록 제거]
blockquote 태그를 적용하거나 제거하여 선택된 텍스트의 들여쓰기를 설정하거나 제거합니다.목록에서 들여쓰기를 하면 중첩된 목록이 만들어지고 들여쓰기를 제거하면 목록의 중첩이 해제됩니다.
링크
선택한 텍스트의 하이퍼텍스트 링크를 만듭니다. 폴더 아이콘을 클릭하여 사이트의 파일을 찾아보거나, URL을 입력하거나, Point-To-File 아이콘을 파일 패널의 파일로 드래그하거나, 파일 패널에서 상자로 파일을 드래그하십시오.
제목
하이퍼텍스트 링크의 텍스트 도구 설명을 지정합니다.
대상
링크된 문서가 로드될 프레임이나 창을 지정합니다:
_blank는 링크된 파일을 새로운 이름 없는 브라우저 창에 로드합니다.
_parent는 링크가 포함된 프레임의 상위 프레임셋이나 창에 링크된 파일을 로드합니다.링크가 포함된 프레임이 중첩되지 않은 경우 링크된 파일은 전체 브라우저 창에 로드됩니다.
_self는 링크와 같은 프레임이나 창에 링크된 파일을 로드합니다. 이 대상은 기본값이므로 일반적으로 지정할 필요가 없습니다.
_top은 링크된 파일을 전체 브라우저 창에 로드하여 모든 프레임을 제거합니다.
HTML 속성 관리자에서 클래스 이름 바꾸기
Dreamweaver는 HTML 속성 관리자의 클래스 메뉴에서 페이지에 사용 가능한 모든 클래스를 표시합니다. 클래스 스타일 목록 마지막에 있는 이름 바꾸기 옵션을 선택하여 이 목록의 스타일 이름을 바꾸세요.
[속성 검사기] 패널에서 [클래스] 드롭다운 목록을 선택합니다.
팝업되는 목록에서 목록 끝에 있는 [이름 바꾸기]를 선택하세요.
[스타일 이름 바꾸기] 팝업 메뉴에서 이름을 바꿀 스타일을 선택합니다.
[새 이름] 텍스트 필드에 새 이름을 입력하고 [확인]을 클릭합니다.
