외부 스타일 시트 작성 방법

장점 및 단점 외부 스타일 시트

캐스 캐이 딩 스타일 시트에 대한 가장 좋은 점 중 하나는 전체 사이트를 일관성있게 유지하는 데 사용할 수 있다는 것입니다. 가장 쉬운 방법은 외부 스타일 시트 를 링크하거나 가져 오는 것 입니다 . 사이트의 모든 페이지에 대해 동일한 외부 스타일 시트를 사용하면 모든 페이지가 동일한 스타일을 유지할 수 있습니다. 또한 미래에 대한 변경을보다 쉽게 ​​할 수 있습니다. 모든 페이지는 동일한 외부 스타일 시트를 사용하기 때문에 해당 시트를 변경하면 모든 사이트 페이지에 영향을줍니다. 이것은 모든 페이지를 개별적으로 변경해야하는 것보다 훨씬 낫습니다!

외부 스타일 시트의 장점

• 한 번에 여러 문서의 모양과 느낌을 제어 할 수 있습니다.
  • 이는 사람들의 팀과 협력하여 웹 사이트를 만들 때 특히 유용합니다. 많은 스타일 규칙을 기억하기가 어려울 수 있으며 인쇄 된 스타일 가이드가있을 수 있지만 비효율적이며 지루한 경우 예제 텍스트를 12 포인트의 Arial 글꼴 또는 14 포인트 택배로 작성할지 결정할 수 있습니다. 한 곳에서 모든 것을 갖게되고, 그 곳이 변경되기도하므로 유지 보수를 훨씬 쉽게 할 수 있습니다.
• 다양한 HTML 요소 에서 사용할 수있는 스타일 클래스를 만들 수 있습니다.
  • 특정 글꼴 스타일을 사용하여 페이지의 여러 가지 사항에 중점을 두는 경우 스타일 시트에서 설정 한 클래스 속성을 사용하여 해당 스타일 및 스타일에 대한 특정 스타일을 정의하지 않고이 모양과 느낌을 얻을 수 있습니다. 중요성.
• 보다 효율적으로 스타일을 쉽게 그룹화 할 수 있습니다.
  • CSS에서 사용할 수있는 모든 그룹화 방법을 외부 스타일 시트에서 사용할 수 있으므로 페이지에 대한 제어력과 유연성이 향상됩니다.

외부 스타일 시트의 단점

• 외부 스타일 시트는 다운로드 시간을 늘릴 수 있습니다 (특히 파일 크기가 클 경우). CSS 파일은 반드시로드해야하는 별도의 문서이므로 해당 다운로드를 수행하는 데 성능에 영향을줍니다.
• 외부 스타일 시트는 페이지가 제거 될 때 삭제되지 않기 때문에 스타일이 더 이상 사용되지 않을 때 알려주지 않기 때문에 매우 빠르게 커집니다. 특히 여러 사람이 같은 파일에서 작업하는 경우 CSS 파일을 올바르게 관리해야합니다.
• 단일 페이지 웹 사이트 만있는 경우 스타일을 지정할 페이지가 하나뿐이므로 CSS 용 외부 파일이 필요하지 않을 수도 있습니다. 단일 페이지 사이트 만 있으면 외부 CSS의 많은 이점을 잃게됩니다.

외부 스타일 시트를 만드는 방법

외부 스타일 시트는 문서 레벨 스타일 시트와 유사한 구문으로 작성됩니다. 그러나 선택자와 선언문 만 포함하면됩니다. 문서 수준 스타일 시트와 마찬가지로 규칙 구문은 다음과 같습니다.

이 규칙을 확장자가 .css 인 텍스트 파일에 저장하십시오. 이것은 필수는 아니지만 들어가기 좋은 습관이므로 디렉토리 목록에서 스타일 시트를 즉시 인식 할 수 있습니다.

스타일 시트 문서가 있으면 웹 페이지 에 링크해야 합니다 . 이 작업은 두 가지 방법으로 수행 할 수 있습니다.

1. 연결 중
   1. 스타일 시트를 연결하려면 HTML 태그를 사용합니다. 이 속성에는 rel , type 및 href 속성이 있습니다. rel 속성은 연결하려는 것을 알려주고 (이 경우 스타일 시트), 유형은 브라우저의 MIME 유형을 정의하고, href는 .css 파일의 경로입니다.
2. 가져 오는 중
   1. 문서 수준 스타일 시트 내에서 가져온 스타일 시트를 사용하면 외부 스타일 시트의 특성을 가져 와서 문서 특정 스타일 시트를 손실 할 수 있습니다. 연결된 스타일 시트를 호출하는 것과 비슷한 방식으로 호출합니다. 문서 수준 스타일 선언 내에서 호출해야합니다. 웹 사이트를 유지 관리하는 데 필요한 수의 외부 스타일 시트를 가져올 수 있습니다.

Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 : 8/8/17