인라인, 임베디드 및 외부 스타일 시트 : 알아야 할 사항은 다음과 같습니다.
프런트 엔드 웹 사이트 개발은 종종 3 다리 의자로 표현됩니다. 이 다리는 다음과 같습니다.
이 의자의 두 번째 다리, CSS 또는 캐스 캐이 딩 스타일 시트 (Cascading Style Sheets)는 오늘날 우리가 여기서보고있는 것입니다. 특히 우리는 문서에 추가 할 수있는 3 가지 스타일 스타일을 제시하고자합니다.
- 인라인 스타일
- 삽입 된 스타일
- 외부 스타일
이러한 종류의 CSS 스타일에는 각각 장점과 단점이 있으므로 각 스타일을 개별적으로 자세히 살펴 보겠습니다.
인라인 스타일
인라인 스타일은 HTML 문서의 태그에 직접 작성된 스타일입니다. 인라인 스타일은 적용된 특정 태그에만 영향을줍니다. 다음은 표준 링크 또는 앵커 태그에 적용된 인라인 스타일의 예입니다.
이 CSS 규칙은이 한 링크에서 표준 밑줄 텍스트 장식을 끕니다. 그러나 페이지의 다른 링크는 변경되지 않습니다. 이것은 인라인 스타일의 한계 중 하나입니다. 특정 항목에 대해서만 변경되므로 실제 페이지 디자인을 달성하려면 이러한 스타일로 HTML을 낭비해야합니다. 그건 모범 사례가 아닙니다. 사실, 그것은 "글꼴"태그와 웹 페이지의 구조와 스타일이 혼합 된 시대에서 제거 된 한 단계입니다.
인라인 스타일에도 매우 높은 특이성이 있습니다.
따라서 다른 비 인라인 스타일로 덮어 쓰 기가 매우 어려워집니다. 예를 들어 사이트를 반응 적으로 만들고 미디어 쿼리 를 사용하여 요소가 특정 중단 점을 보는 방식을 변경하려는 경우 요소의 인라인 스타일을 사용하면 매우 어렵습니다.
궁극적으로, 인라인 스타일은 실제로 사용하지 않을 경우에만 적절합니다.
사실, 나는 내 웹 페이지에서 인라인 스타일을 거의 사용하지 않는다.
임베디드 스타일
포함 스타일은 문서의 머리 부분에 포함 된 스타일입니다. 삽입 된 스타일은 삽입 된 페이지의 태그에만 영향을줍니다.이 접근 방식은 CSS의 강점 중 하나를 부정합니다. 모든 페이지에는
링크의 색상을 빨간색에서 녹색으로 변경하는 등 사이트 전체를 변경하려는 경우 모든 페이지에 포함 된 스타일 시트가 사용되므로 모든 페이지에서이 변경을 수행해야합니다. 이것은 인라인 스타일보다 낫지 만, 많은 경우 여전히 문제가 있습니다.
스타일 시트는
또한 문서의 마크 업 코드는 해당 페이지에 상당한 양의 마크 업 코드를 추가하기 때문에 향후 페이지 관리가 어려워 질 수 있습니다.
내장 된 스타일 시트의 이점은 다른 외부 파일로드가 필요하지 않고 페이지 자체로 즉시로드된다는 것입니다. 이는 다운로드 속도와 성능 측면 에서 이점이 될 수 있습니다.
외부 스타일 시트
오늘날 대부분의 웹 사이트는 외부 스타일 시트를 사용합니다. 외부 스타일은 별도의 문서로 작성된 후 다양한 웹 문서에 첨부 된 스타일입니다. 외부 스타일 시트 는 첨부 된 모든 문서에 영향을 미칠 수 있습니다. 즉, 각 페이지가 동일한 스타일 시트를 사용하는 20 페이지 웹 사이트 (일반적으로 어떻게 수행되는지)가있는 경우 모든 스타일 시트를 시각적으로 변경할 수 있습니다 단순히 해당 스타일 시트를 편집하여 해당 페이지를
따라서 장기간 사이트 관리가 훨씬 쉬워집니다.
외부 스타일 시트의 단점은 이러한 외부 파일을 불러오고로드하는 페이지가 필요하다는 것입니다. 모든 페이지가 CSS 시트의 모든 스타일을 사용하는 것은 아니므로 많은 페이지가 실제로 필요한 것보다 훨씬 큰 CSS 페이지를로드합니다.
외부 CSS 파일에 대해 성능이 저하되는 것은 사실이지만 분명히 최소화 될 수 있습니다. 현실적으로 CSS 파일은 텍스트 파일 일 뿐이므로 일반적으로 시작하기에 그리 크지 않습니다. 전체 사이트에서 CSS 파일 1 개를 사용하는 경우 처음로드 된 후 캐시되는 해당 문서의 이점도 얻게됩니다.
즉, 일부 방문에서 약간의 성능 저하가있을 수 있지만 이후 페이지에서는 캐시 된 CSS 파일을 사용하므로 어떤 조회도 무효화됩니다. 외부 CSS 파일은 모든 웹 페이지를 만드는 방법입니다.