비디오: CSS 파일생성과 연결 2025
Dreamweaver에서 외부 스타일 시트를 만든 후에는 웹 페이지에 연결할 수 있습니다. 다음 단계별 지침에서는 Dreamweaver에 포함 된 사전 정의 된 스타일 시트를 사용하거나이 지침을 사용하여 이전 연습의 단계를 사용하여 작성한 모든 스타일 시트를 첨부 할 수 있습니다.
스타일 시트를 붙이려는 페이지를 열고 다음 단계를 따르십시오.
-
CSS Designer 패널의 맨 위에있는 소스 패널에서 더하기 (+) 아이콘을 클릭하고 드롭 다운 목록에서 기존 CSS 파일에 연결을 선택하십시오.
기존 CSS 파일 첨부 대화 상자가 열립니다.
-
찾아보기 버튼을 클릭하고 로컬 사이트 폴더에서 CSS 파일을 찾습니다.
다른 웹 사이트에있는 원격 CSS 파일을 사용하려는 경우 URL을 입력 할 수도 있지만 작업중인 웹 사이트에 포함 된 스타일 시트를 사용하는 것이 가장 일반적입니다.
-
링크 또는 가져 오기 옵션을 선택하십시오.
스타일 시트를 HTML 파일에 첨부하는 경우, 대부분의 경우 항상 링크를 선택하는 것이 가장 좋습니다. 하나의 스타일 시트가 다른 스타일 시트를 참조 할 수있게하는 고급 옵션 인 다른 스타일 시트에 대한 참조를 포함하는 하나의 마스터 외부 스타일 시트를 작성하려면 가져 오기를 선택하십시오.
-
(선택 사항) 조건부 사용 섹션에서 옵션을 선택합니다.
조건부 사용 기능을 사용하여 스타일 시트를 첨부 할 때 미디어 쿼리를 정의합니다.
-
확인을 클릭하십시오.
대화 상자가 닫히고 Dreamweaver에서 HTML 파일의 맨 위에 코드 줄을 추가하여 스타일 시트에 대한 링크를 설정합니다. 외부 스타일 시트를 연결하면 해당 스타일이 Dreamweaver 페이지의 내용에 자동으로 적용되고 스타일 시트에 정의 된 스타일의 선택기 이름이 CSS 디자이너 패널의 선택기 패널에 표시됩니다.
동일한 HTML 페이지에 여러 스타일 시트를 첨부 할 수 있으며 동일한 문서에서 내부 및 외부 스타일 시트를 사용할 수 있습니다. 예를 들어 텍스트 스타일을 하나의 스타일 시트에 저장하고 레이아웃 스타일을 다른 스타일에 저장 한 다음 두 문서를 동일한 문서에 첨부 할 수 있습니다. 이렇게하면 정의 된 모든 스타일을 페이지에서 사용할 수 있습니다.
마찬가지로, 파일 인쇄용과 브라우저 용으로 다른 스타일 시트를 다른 목적으로 만듭니다.
