다음 중 하나를 수행하여 CSS Designer를 엽니다.
마지막 업데이트 날짜
Dreamweaver 웹 페이지를 일반적인 외부 CSS 스타일 시트에 연결하여 편집하는 데 드는 노력과 시간을 줄이는 방법을 살펴봅니다.
외부 CSS 스타일 시트를 편집하면 해당 CSS 스타일 시트에 링크된 모든 문서가 변경 사항을 반영하여 업데이트됩니다. 문서에 있는 CSS 스타일을 내보내어 새 CSS 스타일 시트를 만들고, 외부 스타일 시트에 첨부하거나 링크하여 문서에 있는 스타일을 적용할 수 있습니다.
직접 만들었거나 사이트로 복사해 온 스타일 시트를 페이지에 첨부할 수도 있습니다. 또한 Dreamweaver에는 미리 작성된 스타일 시트가 포함되어 있어 자동으로 사이트로 옮겨지거나 페이지에 첨부할 수 있습니다.
-
- [윈도우] > [CSS Designer]를 선택합니다.
- Shift+F11을 누릅니다.
-
CSS Designer에서 소스 옆에 있는 + 아이콘을 클릭하고 [기존 CSS 파일 첨부]를 선택합니다.
기존 CSS 파일 첨부 -
다음 중 하나를 수행합니다.
[검색]을 클릭하여 외부 CSS 스타일 시트를 찾습니다.
[파일/URL] 상자에 스타일 시트의 경로를 입력합니다.
-
[추가 방식]에서 옵션을 하나 선택합니다.
현재 문서에 외부 스타일 시트를 링크하려면 [링크]를 선택합니다. 이 옵션은 HTML 코드로 href 태그 링크를 만들고, 게시된 스타일 시트가 있는 URL을 참조합니다. 이 방식은 Microsoft Internet Explorer와 Netscape Navigator 모두에서 지원됩니다.
한 외부 스타일 시트에서 다른 시트로 연결되는 참조를 추가하는 데에는 링크 태그를 사용할 수 없습니다. 스타일 시트를 중첩하려면 가져오기 명령을 사용해야 합니다. 대부분의 브라우저는 스타일 시트에서뿐만 아니라 페이지 내에서도 가져오기 명령을 인식합니다. 외부 스타일 시트에서 규칙이 겹치는 경우 속성 간 충돌 문제를 해결하는 방법은 스타일 시트가 링크되었는지 아니면 페이지로 가져온 것인지에 따라 약간의 차이가 있습니다. 외부 스타일 시트를 링크하지 않고 가져오려는 경우에는 [가져오기]를 선택합니다.
-
[미디어] 팝업 메뉴에서 스타일 시트에 대한 대상 미디어를 지정합니다.
미디어 종속 스타일 시트에 대한 자세한 내용은 World Wide Web Consortium 웹 사이트(www.w3.org/TR/CSS21/media.html)를 참조하십시오.
-
[미리보기] 버튼을 클릭하여 해당 스타일 시트의 스타일이 현재 페이지에 적용되는지 확인합니다.
적용된 스타일이 예상과 다르면 [취소]를 클릭하여 해당 스타일 시트를 제거합니다. 페이지는 이전의 모양으로 돌아갑니다.
-
[확인]을 클릭합니다.
내 계정 로그인