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