"시각화"와 조작의 용이성 때문에 많은 친구들이 DreamWeaver에서 CSS를 작성합니다. 오늘은 모든 사람에게 도움이 되기를 바라며 Dreamweaver에서 CSS를 작성하는 몇 가지 "가장 좋은 습관"을 소개합니다.
CSS는 웹사이트 디자인 과정을 바꾸고 있습니다. CSS를 선호하는 디자이너의 수가 증가함에 따라 Macromedia DW MX에는 새롭고 향상된 CSS 관련 기능이 많이 도입되었습니다. 이러한 새로운 기능을 사용하면 향후 업데이트를 계획하고 W3C 표준을 더욱 준수하는 사이트를 개발할 수 있습니다. 이 문서에서는 DW MX에서 CSS를 사용하고 특정 CSS 기능을 강조하기 위한 몇 가지 제안 사항을 설명합니다.
일반적으로 스타일 시트는 웹 콘텐츠의 모양을 제어하는 형식 지정 규칙의 모음입니다. 세 가지 방법으로 페이지에서 CSS를 사용할 수 있습니다.
인라인: 코드에 작성된 일회성 스타일입니다.
내장형(Embedded): 페이지의 모든 요소를 제어할 수 있는 스타일 시트 외부(External): 여러 페이지의 요소를 제어할 수 있는 스타일 시트
실제로 많은 사이트에서는 필요에 따라 이 세 가지 방법을 조합하여 사용합니다.
CSS로 작업할 때 고려해야 할 중요한 점은 서로 다른 브라우저와 동일한 브라우저의 서로 다른 버전이 CSS를 서로 다른 방식으로 구문 분석한다는 사실입니다. 웹 브라우저의 차이점 외에도 청각 브라우저, TV 기반 브라우저, Palm Pilot 및 TTY(전신 타자기, 원격 타자기)와 같은 휴대용 장치 등 다른 브라우저도 많이 있다는 점을 인식해야 합니다.
모범 사례는 무엇입니까?
대부분의 기술에는 자체적으로 합의된 표준이 있습니다. CSS도 예외는 아닙니다. 웹에 존재하는 CSS가 모두 표준화된 것은 아니지만, 기존 표준에 따라 CSS를 사용하는 것이 도움이 됩니다. 일반적으로 개발자는 콘텐츠와 보고를 최대한 분리해야 합니다. 이점은 다음과 같습니다.
1. 사이트 수명 연장 비표준 스타일 시트가 당시에는 편리하다고 느낄 수 있지만 새 버전의 브라우저가 나온 후에는 호환성 문제가 발생할 가능성이 높습니다. 그때 페이지별로 사이트를 수정하는 것은 시간이 많이 걸리는 작업이 될 것이며 CSS를 사용하는 것도 의미가 없게 될 것입니다.
2. 모든 사용자와 브라우저가 사이트에 액세스할 수 있도록 하십시오. 일부 지방 정부에서는 웹사이트에 장애인도 액세스할 수 있도록 규정했습니다. 청각 브라우저와 같이 장애 인식을 위해 설계된 검색 장치에는 매우 엄격한 CSS 규범 요구 사항이 있습니다.
3. 사이트 업데이트 및 유지 관리를 더 쉽게 만듭니다. CSS를 올바르게 사용하면 한 페이지에서 조정한 내용을 모든 페이지에 빠르게 적용할 수 있습니다.
가장 먼저 해야 할 선택은 사용할 스타일 시트입니다. 모범 사례에 관한 다양한 스타일시트에 대한 분석은 다음과 같습니다.
인라인 CSS: 간단히 말해서, 사용을 피해야 합니다. 다른 단점 중에서도 인라인 CSS를 사용하면 콘텐츠와 서식을 분리하지 않는다는 CSS의 실제 이점을 활용하지 못한다는 의미입니다. DW MX는 주로 인라인 CSS를 사용하여 페이지 요소(이러한 요소를 DW MX 사용자 인터페이스에서는 "레이어"라고 함)를 배치하거나 인라인 스타일 자바스크립트를 사용하여 개체 속성을 변경해야 하는 특정 DHTML 효과를 사용합니다.
임베디드 CSS: 현재 페이지에만 영향을 미치기 때문에 이상적이지도 않습니다. 업데이트 프로세스 중에 페이지가 손실되면 사이트 스타일이 일관되지 않게 됩니다. 또한 사용자가 사이트를 탐색할 때 각 페이지에 대한 스타일 시트 정보를 다운로드해야 합니다.
외부 CSS: 이것이 첫 번째 선택입니다. 외부 CSS를 사용하면 연결된 모든 페이지가 일관된 모양과 스타일을 유지하고 한 번만 변경하면 모든 관련 페이지를 쉽게 업데이트하여 페이지를 더 작게 만들고 더 빠르게 탐색할 수 있습니다. 특정 CSS 기능을 분석할 때 다른 모범 사례가 아래에 설명되어 있습니다.
DW MX에서 CSS 스타일 시트 생성
DW MX에서 CSS 스타일 시트를 생성할 때(텍스트 》CSS 스타일 》새 스타일 시트) 팝업 대화 상자에는 두 가지 옵션이 있습니다: 새 스타일 시트 파일 ) 현재 페이지(이 문서만 해당) "새 스타일 시트 파일"을 선택하면 외부 CSS 생성 프로세스가 시작됩니다. 이 옵션을 사용하려면 실제 생성 프로세스 전에 스타일 시트의 이름을 지정하고 저장 위치를 선택해야 합니다. 다른 옵션인 이 문서만에서는 관련 코드를 페이지에 직접 작성합니다.
기존 스타일 시트를 선택하여 새 스타일 대화 상자에서 새 정의를 편집하거나 추가할 수도 있습니다.
외부 CSS에 연결해야 할까요, 아니면 가져와야 할까요?
외부 스타일 시트를 만든 후 각 페이지(또는 템플릿)에 첨부해야 합니다. 이렇게 하려면 CSS 패널에서 "스타일 시트 첨부" 버튼을 클릭하세요. 외부 스타일 시트 연결 대화 상자가 나타나며, 여기서 이름을 찾은 후 연결하거나 가져올 수 있습니다. 이 외부 스타일 시트.
연결은 가장 일반적으로 사용되는 방법입니다. 스타일 시트를 페이지에 연결하려면 "링크"를 선택하십시오. 페이지에 다음 마크업이 추가됩니다.
연결 옵션은 CSS를 지원하는 모든 브라우저에서 지원됩니다. 일부 오래된 브라우저(예: Netscape 4.x)에서 이 스타일 시트를 "볼" 수 있도록 하려면 다음 방법을 사용해야 합니다.
"가져오기" 옵션을 선택하면 사용되는 태그는 다음과 같습니다.
NetSscape4는 가져온 CSS를 완전히 무시하고 연결된 CSS에 따라 페이지를 해석합니다. 이런 방식으로 브라우저 호환성 문제에 대한 걱정 없이 CSS의 새로운 기능을 사용할 수 있습니다.
CSS 속성 관리자
DW MX의 속성 관리자에서 CSS 모드로 쉽게 전환할 수 있습니다. 기본적으로 속성 관리자는 원시 HTML 모드로 글꼴 태그를 표시합니다. 글꼴 드롭다운 메뉴 옆에 있는 작은 "A"를 클릭하면 글꼴 태그 목록 대신 현재 사용 가능한 CSS 스타일시트가 표시됩니다.
동시에 HTML 모드로 쉽게 다시 전환할 수 있습니다.
미리 만들어진 CSS 스타일 시트
DW MX의 흥미로운 CSS 기능 중 하나는 미리 만들어진 CSS 스타일 시트가 포함되어 있다는 것입니다. CSS를 처음 사용하는 사용자는 먼저 사용해 볼 수 있습니다. 파일 > 새로 만들기를 선택하고 팝업된 새 문서 대화 상자에서 CSS 스타일 시트를 선택하면 사용 가능한 모든 CSS 목록이 오른쪽 상자에 나타납니다. 우리가 모범 사례라고 부르는 것을 연습하려면 "접근 가능"이라고 표시된 것을 선택하세요.
사이트 폴더에 문서를 저장한 다음 위에서 설명한 방법을 사용하여 CSS를 문서에 추가합니다.
디자인 타임 스타일 시트(디자인 타임 스타일 시트)
DW MX의 이 기능을 사용하면 디자인 보기에서 작업하는 동안 페이지에 스타일 시트를 적용할 수 있으므로 사이트 모양을 보다 직관적으로 이해할 수 있습니다. 디자인 타임 스타일시트는 사이트 내에 표시되지 않습니다. 이 기능은 모범 사례의 관점에서 매우 유용합니다. 위에서 설명한 대로 가져오기 방법과 링크 방법을 모두 사용하는 경우 디자인 타임 스타일시트를 첨부하면 둘 중 하나를 사용하여 사이트를 개발할 수 있습니다. 페이지가 다른 스타일 시트 아래에서 어떻게 보이는지 확인하려는 경우 다른 스타일 시트로 쉽게 변경할 수 있습니다.
디자인 타임 스타일시트는 서버측(예: ASP, PHP, ColdFusion) 또는 JavaScript를 통해 클라이언트측에 CSS를 적용하려는 개발자에게도 유용합니다. 서버측 스타일 시트는 클라이언트 브라우저의 열악한 CSS 지원을 처리하는 또 다른 방법이기도 합니다. 하지만 이전 버전의 DW에서는 이 방법을 사용하면 디자인 단계에서 CSS의 실제 효과를 볼 수 없었습니다. 디자인 타임 스타일시트를 사용하면 스타일시트 효과를 실시간으로 볼 수 있으므로 DW MX에서 시각적으로 작업할 수 있습니다. 또 다른 이점은 사이트 파일을 업로드할 때 더 이상 중복된 스타일시트를 찾기 위해 전체 사이트를 탐색할 필요가 없다는 것입니다.
유효성 검사
자신만의 스타일 시트를 만들거나 기존 스타일 시트를 편집하는 경우 유효성 검사를 통해 비표준 태그나 잘못된 코드를 오용하지 않도록 할 수 있습니다. DW MX 자체에는 CSS 유효성 검사기가 포함되어 있지 않으므로 W3C 사이트에서 제공하는 유효성 검사 서비스를 사용할 수 있습니다. DW MX 내에서 HTML 또는 DHTML 태그의 유효성을 검사할 수 있습니다(파일 > 페이지 확인 > 마크업 유효성 검사(HTML용) 또는 파일 > 페이지 확인 > XHTML용 XML로 유효성 검사). DW MX는 CSS 기반 사이트를 개발할 때 다양한 보조 도구를 제공합니다. CSS에 대한 충분한 이해와 함께 MW MX의 도움으로 시간이 지나도 견딜 수 있는 사이트를 개발할 수 있습니다.