DreamWeaver에서 CSS 스타일 시트를 적용하는 방법에 대한 두 가지 팁
저자：Eve Cole
업데이트 시간：2009-05-31 21:17:47
1. 하이퍼링크의 밑줄을 제거하고 마우스를 하이퍼링크 위로 가져갈 때 색상을 변경합니다.
기본적으로 DreamWeaver로 디자인된 웹 페이지의 하이퍼링크에는 밑줄이 표시되어 있어 보기에 별로 아름답지 않습니다. 이러한 귀찮은 밑줄을 제거하기 위해 많은 신문과 잡지에서 소개하는 방법은 HTML 소스 코드에 코드 조각을 수동으로 추가하는 것입니다. 실제로 DreamWeave에서는 링크 밑줄을 제거하는 것이 쉽습니다. 먼저 DreamWeaver의 문서 창에서 임의의 링크를 만듭니다. 이 링크에 밑줄이 그어져 있는 것을 볼 수 있습니다. 이 밑줄을 제거하는 방법은 무엇입니까?
1. 메뉴 표시줄에서 "텍스트" | "CSS 스타일" | "스타일 시트 편집..."을 클릭하거나 단축키 Ctrl+Shift+E를 직접 눌러 스타일 시트 편집 대화 상자를 불러옵니다.
2. "새로 만들기"를 클릭한 후 "새 스타일" 대화 상자에서 "CSS 선택기 사용" 버튼을 클릭합니다.
3. 선택기 필드에 a를 입력한 다음 확인을 클릭합니다.
4. 그러면 "CSS 스타일 정의" 대화 상자가 나타납니다. 유형 클래스의 장식에서 없음을 선택한 다음 확인을 클릭하고 완료를 클릭합니다. 문서 창에서 링크의 밑줄이 사라진 것을 즉시 알 수 있습니다. 그렇다면 마우스를 링크 위로 가져갈 때 링크 색상이 변경되도록 하려면 어떻게 해야 할까요? 위의 1단계와 2단계를 반복합니다. 그런 다음 선택기 옆에 있는 드롭다운 화살표를 클릭하고 "a:hover"를 선택한 다음 확인을 클릭합니다. 팝업되는 "스타일 정의: hover" 대화 상자에서 유형 클래스의 색상 중 원하는 색상(예: 빨간색 선택)을 선택한 다음 확인을 클릭하고 완료를 클릭하여 완료합니다. F12를 눌러 링크를 미리보고 마우스를 올려놓으면 링크가 빨간색으로 변합니까? 방금 "a: hover에 대한 스타일 정의" 대화 상자의 Backgroud 클래스에서 배경 색상을 녹색으로 선택한 다음 하이퍼링크에 마우스를 놓으면 링크가 빨간색으로 바뀔 뿐만 아니라 또한 녹색 배경이 됩니다. 사실, 방금 CSS 스타일 정의 대화 상자를 통해 더 많은 특수 효과를 얻을 수도 있습니다. 관심 있는 친구는 생각해 볼 수도 있습니다.
2. 재사용 가능한 외부 CSS 스타일 시트를 만듭니다. DreamWeaver를 사용하여 특정 웹 페이지에서 CSS 스타일을 만든 후 해당 스타일을 다른 웹 페이지에 적용하려는 경우 CSS 스타일을 다시 만들 필요가 없습니다. 외부 CSS 스타일 시트 파일(외부 CSS 스타일 시트)을 생성하면 나중에 이 스타일 시트 파일의 스타일을 마음대로 호출할 수 있습니다. 관리를 용이하게 하기 위해 먼저 사이트가 있는 폴더에 CSS라는 새 폴더를 만듭니다. 이 폴더는 특별히 외부 스타일 시트 파일(확장자는 css)을 배치하는 데 사용됩니다.
1. 문서 창에서 Ctrl+shift+E를 눌러 스타일 시트 편집 대화 상자 창을 불러옵니다. 2. "링크"를 클릭합니다.
3. 팝업 외부 스타일 시트 연결 대화 상자에서 찾아보기를 클릭하고 방금 생성한 CSS 폴더를 찾습니다.
4. 스타일시트 파일 선택 창의 "파일 이름" 열에 *.css(*는 임의의 이름 가능)를 입력합니다. 현재 CSS 폴더에는 스타일시트 파일이 없습니다. "파일 이름" 필드에 입력하면 새 외부 스타일 시트 파일의 이름이 됩니다. 예를 들어 title.css를 입력한 다음 선택 | 확인을 클릭합니다.
5. 스타일시트 편집 대화창에 title.css(링크)가 추가될 예정이며, 더블클릭하세요.
6. "title.css" 팝업창에서 "새로 만들기"를 클릭하세요.
7. "새 스타일" 대화 상자에서 "사용자 정의 스타일 만들기(클래스)" 버튼을 클릭합니다. 8. 이름 열에 myheadline과 같은 이름을 입력하고 확인을 클릭합니다.
9. 다음 "title.css의 .myheadline에 대한 스타일 정의" 대화 상자에서 글꼴, 색상 등 다양한 설정을 하고 완료되면 확인을 클릭합니다. 새로운 스타일을 생성하려면 다시 "새로 만들기"를 클릭하고 6, 7, 8, 9단계를 반복한 후 마지막으로 "저장" | "완료"를 클릭하면 외부 스타일 시트 파일 title.css가 생성됩니다. title.css의 모든 스타일은 메뉴 표시줄의 "TEXT" | "CSS 스타일" 하위 메뉴에 나열됩니다. 다른 웹페이지에서 이 title.css를 호출하려면 위의 1~3단계를 반복한 다음 스타일시트 파일 선택 창의 "파일 이름" 열에 title.css를 입력하세요. "선택" | "확인" | "완료"를 클릭하면 title.css의 모든 스타일이 웹 페이지 메뉴 표시줄의 "텍스트" | "CSS 스타일" 하위 메뉴에 표시되며 적용할 수 있습니다. 이 웹 페이지에 이러한 스타일이 있습니다.
