디자인에서 콘텐츠를 분리하면 사이트 관리가 쉬워집니다.
CSS (Cascading Style Sheets)는 사실 웹 사이트의 스타일을 지정하고 레이아웃을 지정하는 실질적인 방법이되었습니다. 디자이너는 스타일 시트 를 사용하여 색상, 간격, 글꼴 및 기타 등의 요소를 포함하여 웹 사이트를 모양과 느낌으로 표시하는 방법을 브라우저에 알립니다.
CSS 스타일은 두 가지 방법으로 배포 할 수 있습니다.
- 인라인 - 웹 페이지 자체의 코딩 내에서, 개인별, 요소 별
- 웹 사이트가 링크 된 독립형 CSS 문서
CSS 모범 사례
"우수 사례"는 가장 효과적임이 입증 된 웹 사이트를 설계하고 구축하는 방법으로 관련 업무에 대해 가장 많은 수익을 제공합니다. 웹 디자인 에서 CSS를 사용 하면 웹 사이트의 모양과 기능을 최대한 활용할 수 있습니다. 그들은 다른 웹 언어 및 기술과 함께 수년 동안 발전해 왔으며 독립형 CSS 스타일 시트가 선호되는 사용 방법이되었습니다.
CSS에 대한 우수 사례를 따르면 다음과 같은 방법으로 사이트를 개선 할 수 있습니다.
- 콘텐츠를 디자인과 분리합니다. CSS의 주요 목표 중 하나는 HTML에서 디자인 요소를 제거하고 디자이너가 유지 관리 할 수 있도록 다른 위치에 배치하는 것입니다. 또한 개발자와 디자이너를 분리하여 각각의 전문 분야에 집중할 수 있습니다. 설계자는 웹 사이트의 모양을 유지 관리 할 개발자가 아니어도됩니다.
- 유지 보수가 쉬워집니다. 웹 디자인에서 가장 간과 된 요소 중 하나는 유지 보수입니다. 인쇄물과는 달리 웹 사이트는 절대로 "원만하고 완료되었습니다." 내용, 디자인 및 기능은 시간이 지남에 따라 변할 수 있습니다. 웹 사이트 전체에 뿌리기보다는 CSS를 중앙 장소에두면 훨씬 쉽게 관리 할 수 있습니다.
- 사이트에 계속 액세스 할 수 있도록합니다. CSS 스타일을 사용하면 검색 엔진 및 장애인이 사이트와 상호 작용할 수 있습니다.
- 사이트를 최신 상태로 유지합니다. CSS와 함께 모범 사례를 사용하면 웹 디자인 환경의 변화를 수용 할만큼 안정적이지만 유연한 것으로 입증 된 표준을 준수하게됩니다.
인라인 스타일은 모범 사례가 아닙니다.
인라인 스타일은 용도가 있지만 일반적으로 웹 사이트를 유지 관리하는 가장 좋은 방법은 아닙니다. 그들은 모든 모범 사례에 반대합니다.
- 인라인 스타일은 콘텐츠를 디자인과 분리하지 않습니다. 인라인 스타일은 현대의 개발자가 반대하는 임베디드 글꼴 및 기타 복잡한 디자인 태그와 완전히 동일합니다. 스타일은 적용되는 특정 개별 요소에만 영향을줍니다. 그로 인해보다 세분화 된 제어가 가능할뿐만 아니라 일관성과 같은 다른 설계 및 개발 측면을 더욱 어렵게 만듭니다.
- 인라인 스타일은 유지 보수에 어려움을 겪습니다. 스타일 시트로 작업 할 때 스타일을 설정하는 위치를 파악하는 것이 어려울 수 있습니다. 인라인, 임베디드 및 외부 스타일 이 혼합되어있는 경우 확인할 위치가 많습니다. 웹 디자인 팀에서 일하거나 다른 사람이 만든 사이트를 재 설계하거나 유지해야하는 경우 더 많은 문제가 발생할 것입니다. 일단 스타일을 찾고 변경하면, 배치 된 모든 페이지의 모든 요소에서 스타일을 변경해야합니다. 그것은 시간과 작업 예산을 천문학적으로 증가시킵니다.
- 인라인 스타일에 액세스 할 수 없습니다. 현대식 스크린 리더 또는 기타 보조 장치가 인라인 특성 및 태그를 효과적으로 처리 할 수 있지만 일부 구형 장치는 그렇지 못하여 일부 이상하게 표시되는 웹 페이지가 될 수 있습니다. 추가 문자와 텍스트는 검색 엔진 로봇이 귀하의 페이지를 보는 방식에도 영향을 줄 수 있으므로 검색 엔진 최적화 (SEO) 측면에서 페이지가 잘 작동하지 않습니다.
- 인라인 스타일은 페이지를 더 크게 만듭니다. 사이트의 모든 단락을 특정 방식으로 표시하려면 외부 스타일 시트에 6 줄 정도의 코드로 한 번만 할 수 있습니다. 그러나 인라인 스타일을 사용하는 경우 사이트의 모든 단락에 이러한 스타일을 추가해야합니다. 5 줄의 CSS가있는 경우 사이트의 모든 단락에 5 줄을 곱합니다. 그 대역폭과로드 시간은 서둘러 합산 될 수 있습니다.
인라인 스타일의 대안 : 외부 스타일 시트
인라인 스타일을 사용하는 대신 외부 스타일 시트를 사용하십시오. CSS 권장 사항의 모든 이점을 제공하며 사용하기 쉽습니다. 이 방법으로 고용되면 사이트에서 사용되는 모든 스타일이 별도의 문서로 제공되며이 문서는 한 줄의 코드로 웹 문서에 연결됩니다. 외부 스타일 시트 는 첨부 된 모든 문서에 영향을 미칩니다. 즉, 각 페이지가 동일한 스타일 시트를 사용하는 20 페이지 웹 사이트 (일반적으로 완료된 방법)를 사용하는 경우 한 번에 한 번씩 해당 스타일을 편집하여 해당 페이지 모두를 변경할 수 있습니다. 한 지점에서 스타일을 변경하면 웹 사이트의 모든 페이지에서 해당 코딩을 검색하는 것보다 훨씬 편리합니다. 따라서 장기간 사이트 관리가 훨씬 쉬워집니다.