1. CSS 스타일 패널
이전 장을 학습한 후에는 누구나 CSS에 대해 어느 정도 이해하고 있다고 생각합니다. 이번 장에서는 CSS를 작성하기 위해 Dreamweaver4를 사용하는 방법을 설명하겠습니다. 먼저 Dreamweaver4를 실행한 후 메뉴에서 Windows->CSS 스타일을 선택합니다(또는 Shitf+F11을 누릅니다). 아래와 같이 CSS 스타일 관리 패널이 나타납니다.
가 CSS 스타일에 표시됩니다. 패널 모든 사용자 정의 CSS 스타일(즉, 위에서 언급한 점으로 시작하는 클래스 선택기, Dreamweaver4에서는 점으로 시작하는 클래스 선택기를 사용자 정의 스타일로 사용함), 적용 버튼을 사용하여 원하는 대로 이러한 CSS 스타일을 페이지에 적용할 수 있습니다. 의 텍스트 또는 문서 영역입니다.
참고: 적용 버튼 앞에 확인란이 있습니다. 선택하면 버튼이 회색으로 표시되어 사용할 수 없게 되며 마우스를 클릭하는 동안에는 사용자 정의된 CSS 스타일이 자동으로 적용됩니다. 페이지의 현재 요소. 확인란이 선택되어 있지 않고 적용 버튼을 사용할 수 있는 경우 적용 시 적용 버튼을 클릭해야 합니다. 사용자 정의 스타일을 객체에 적용하는 것은 현재 HTML 태그 뒤에 class="..."를 추가하는 것과 같습니다. 또한 스타일 앞에 "S" 모양의 기호가 있는데 이는 내부적으로 정의된 스타일을 나타내며, 기호인 경우 해당 스타일이 외부 스타일 시트 파일에 연결되어 있음을 나타냅니다.
참고: CSS 스타일 패널에는 사용자 정의(클래스) CSS 스타일만 표시되며, 기타 CSS 선택기 스타일은 HTML에 의해 제어되는 영역에 자동으로 적용될 수 있으므로 CSS 스타일 패널에 표시되지 않습니다. 태그. (HTML 태그 재정의는 선택자가 단일 HTML 태그인 CSS 스타일을 의미합니다. 원본 HTML 태그의 스타일을 재정의하고 변경하므로 재정의라고 합니다.)
오른쪽 하단에 작은 버튼 4개가 있습니다. Corner 에서 가장 일반적으로 사용되는 명령은 다음과 같습니다.
스타일 시트 첨부: (스타일 시트 링크) 클릭하면 이전에 생성된 외부 스타일 시트를 선택하고 확인을 클릭하면 스타일 시트 선택 대화 상자가 나타납니다. 이 외부 스타일 시트를 추가했습니다. 외부 스타일 시트를 추가할 때 가능하면 상대 경로를 사용하십시오. 새 스타일: (새 스타일) 일반적으로 이 버튼을 사용하여 CSS 스타일 시트를 만듭니다.
스타일 시트 편집: (스타일 시트 편집)을 클릭하면 스타일 시트 편집 대화 상자가 나타나 기존의 모든 내부 및 외부 스타일 시트를 표시합니다. 이 대화 상자에서 스타일을 생성, 편집, 삭제할 수 있습니다. .
삭제: (스타일 삭제) 먼저 삭제할 사용자 정의 CSS 스타일을 선택한 후 이 버튼을 클릭하면 스타일이 삭제됩니다.
위의 작은 삼각형을 클릭하거나 마우스 오른쪽 버튼을 클릭하면 메뉴가 나타납니다.
편집: (편집) 현재 선택한 사용자 정의를 편집합니다. CSS 스타일 이 CSS 클래스 스타일을 편집하려면 스타일 정의 대화 상자로 들어가려면 클릭하세요.
복제: (복사) 현재 선택된 사용자 정의 CSS 스타일 클래스를 복제합니다.
삭제: (삭제) 현재 선택된 사용자 정의 CSS 스타일을 삭제하며 버튼과 동일한 효과를 갖습니다.
적용: (응용 프로그램)은 선택한 CSS 클래스를 페이지의 현재 요소에 적용하는 것을 의미합니다. 적용 버튼과 동일합니다.
새 스타일: (새 스타일)은 버튼과 동일합니다.
스타일 시트 편집: (스타일 시트 편집)은 버튼과 같습니다.
스타일 시트 첨부: (외부 스타일 시트 링크) 버튼과 동일합니다.
스타일 시트 내보내기: (스타일 시트 내보내기) 이 페이지의 내부 스타일 시트를 외부 스타일 시트 파일로 내보냅니다. 참고: Dreamweaver4에서 스타일 시트를 내보내는 데 이 방법을 사용하는 것 외에도 기본 메뉴에서 파일->내보내기->CSS 스타일 내보내기를 사용할 수도 있습니다.
2. 스타일 시트를 만들기 전에 먼저 Dreamweaver4의 세 가지 스타일 시트 유형을 소개합니다(또는 CSS 스타일 패널 메뉴에서 새 스타일). 아래와 같이 새 스타일 대화 상자를 표시합니다.
정의에서 외부 스타일 시트 또는 내부 스타일 시트를 선택할 수 있습니다.
l 새 스타일 시트 파일(새 항목)을 선택합니다. 스타일 시트 파일) 시스템에서는 먼저 이 스타일 시트 파일을 저장한 다음 이 스타일 시트 파일을 정의할 수 있습니다. 전체 페이지의 스타일은 사용자가 만든 스타일 시트 파일을 따르며, 이 외부 스타일 시트 파일을 다른 페이지에 연결하여 하나의 스타일 시트 파일이 여러 페이지를 제어할 수 있습니다.
l 이 문서만(이 문서만 존재함)을 선택하면 내부 스타일 시트가 생성되고 Dreamweaver4에서는 생성된 스타일 시트의 내용을 < 헤드>
유형에서 선택할 수 있는 세 가지 스타일 시트 유형이 있습니다.
l 맞춤 스타일 만들기(클래스): (사용자 정의 스타일 만들기) 페이지에 다음과 같이 적용할 수 있는 스타일을 사용자 정의합니다. 클래스 속성 중간.
l HTML 태그 재정의: (HTML 태그 재정의) 지정된 HTML 태그의 기본 형식을 재정의합니다.
l CSS 선택기 사용: (CSS 선택기 사용) 특정 태그 조합 또는 지정된 ID 속성을 포함하는 모든 태그에 대한 형식 정의입니다.
CSS를 정의하기 전에 먼저 정의된 스타일이 어디에 사용될지 명확하게 고려해야 합니다. 어떤 효과를 얻을 수 있나요? 한 페이지에 정의되어 있습니까? 아니면 여러 페이지의 스타일을 제어합니까? 그런 다음 필요에 따라 적절한 스타일 시트를 정의하십시오.
3. 맞춤 스타일 만들기
페이지에서 중요한 텍스트나 콘텐츠를 눈길을 끌게 만들고 싶을 때가 있습니다. 이러한 중요한 텍스트나 콘텐츠에 대해 별도의 스타일을 정의하여 일반 텍스트를 구별하려면 사용자 정의를 생성하여 중요한 콘텐츠에 대해 별도로 CSS를 정의할 수 있습니다. 스타일. 눈길을 끄는 목적을 달성하기 위해 중요한 텍스트와 콘텐츠의 색상을 빨간색과 굵은 색으로 정의해야 한다고 가정해 보겠습니다.
새 스타일을 클릭하면 새 스타일 대화 상자가 나타나며, 스타일 시트 유형으로 Make Custon 스타일(클래스)을 선택하고 이 문서만을 선택합니다. , 그리고 위의 이름 드롭다운 상자에 정의한 스타일의 이름을 입력합니다. 아래와 같이 ".emphases"를 입력하고 확인을 누릅니다.
참고: 사용자 정의 스타일의 이름 일반적으로 스타일 효과에 따라 이름이 지정됩니다. 이름 앞에 마침표가 있어야 합니다. 이를 놓치면 시스템이 자동으로 채워줍니다.
스타일 정의 대화 상자가 나타나면 범주에 입력을 선택한 다음 그림과 같이 색상을 빨간색으로, 무게를 굵게 설정하고 확인을 누릅니다.
그런 다음 더 추가하세요. CSS 스타일 패널 emphases라는 사용자 정의 스타일이 생성되었습니다.
원본 코드 부분을 살펴보면 다음 스타일 시트가 추가된 것을 볼 수 있습니다. 코드:
이제 필요한 곳에 이 사용자 정의 스타일을 적용할 수 있습니다. 웹 페이지에서 텍스트를 선택하고 스타일 패널에서 강조 스타일을 클릭합니다. 원하는 효과인지 확인해 보세요.
참고: 선택한 콘텐츠가 표나 단락인 경우 전체 표나 단락의 텍스트는 강조 스타일로 정의됩니다. 원본 코드에서 해당 내용이