외부 스타일 시트 또는 인라인 스타일을 포함하여 CSS 스타일을 웹 페이지에 적용 할 수있는 여러 가지 방법이 있습니다. HTML 문서의 모양과 느낌을 지정하는 데 권장되는 외부 스타일 시트를 사용하는 경우 한 가지 방법은 @import를 사용하는 것입니다.
@import 규칙은 문서의 중요한 외부 스타일 시트 (HTML 페이지 또는 다른 CSS 문서 포함)를 허용합니다. 크기가 작은 여러 개의 파일 (레이아웃 용, 타이포그래피 용 , 이미지 용 등)을 많이 사용하면 파일 및 해당 파일에 포함 된 다양한 스타일을보다 쉽게 관리 할 수 있습니다. 이러한 이점을 누리고 싶다면 다양한 파일을 가져 오기 만하면 웹 페이지의 디스플레이에서 모두 작동하도록 할 수 있습니다.
HTML로 가져 오기
HTML에서 @import 규칙을 사용하려면 문서의
에 다음을 추가합니다.:
<스타일>
@import url ( "/ styles / default.css");
이제이 코드는이 HTML 페이지에서 사용하기 위해이 스타일 시트를 가져오고 해당 파일에서 모든 스타일을 관리 할 수 있습니다. 이런 식으로 중요한 스타일 시트의 단점은이 방법이 병렬 다운로드를 허용하지 않는다는 것입니다. 이 메소드를 사용하여 가져 오는 다른 CSS 파일을 포함하여 나머지 스타일 페이지로 이동하기 전에 전체 스타일 시트를 다운로드해야합니다. 그러면 페이지 속도와 다운로드 성능에 부정적인 영향을 미칩니다. 페이지 성능이 오늘날의 웹 사이트 성공에 얼마나 중요한지를 고려할 때이 단점만으로도 @import를 사용하지 않으려 고하는 이유가 될 수 있습니다.
대체 접근법
HTML에서 @import를 사용하는 대신 CSS 파일에 다음과 같이 연결할 수 있습니다.
이 기능은 @import와 매우 유사하게 작동합니다. 하나의 중앙 위치 / 파일에서 모든 CSS를 관리 할 수 있지만이 방법은 다운로드 관점에서 바람직합니다. 다른 종류의 스타일을 별도의 파일로 분할하려는 경우 계속해서 마스터 CSS 파일에서 @import 기능을 사용할 수 있습니다. 즉, 외부 CSS 파일은 개별적으로 관리 할 수 있지만 모두 하나의 마스터 CSS로 가져 오기 때문에 성능이 향상됩니다.
CSS로 가져 오기
위의 코드 예제를 사용하면 HTML 페이지에서 사용할 "default.css"파일을 가져옵니다. CSS 파일 안에는 다양한 페이지 스타일이 있습니다. 이 모든 스타일을 한 페이지에 자세하게 표시하거나 @ import를 사용하여 더 쉽게 관리 할 수 있습니다. 다시 한번 말하지만 레이아웃 용, 타이포그래피 용 및 이미지 용의 4 가지 CSS 파일을 사용한다고 가정 해 봅시다. 네 번째 파일은 우리 페이지가 링크하는 "마스터"파일입니다 (이 예에서는 "default.css"입니다). 마스터 CSS 파일의 맨 위에 다음과 같은 규칙을 추가 할 수 있습니다.
@import url ( '/ styles / layout.css');
@import url ( '/ styles / type.css');
@import url ( '/ styles / images.css');
이 규칙 은 CSS 파일의 다른 모든 내용보다 먼저 작동 해야 규칙에 유의 해야합니다 . 이 가져 오기 규칙 전에는 다른 CSS 스타일을 사용할 수 없습니다!
이러한 가져 오기 규칙 아래에서 기본 시트에 포함시키려는 다른 CSS 스타일을 추가 할 수 있습니다. 메인 CSS 파일이로드되면 먼저이 개별 파일을 가져와 스타일을 스타일 시트 맨 위에 추가합니다. 그런 다음 가져온 것 아래에 다른 모든 스타일을 갖게되어 웹 브라우저가 사이트를 표시하는 데 사용할 전체 CSS 파일을 만듭니다. HTML에 링크 된 단일 스타일 시트를 유지하면서 더 작고 집중된 파일을 관리하는 이점을 얻을 수 있습니다.
미디어 쿼리에 & import; 사용
한 가지 방법은 반응 형 웹 사이트 스타일 에 대한 웹 사이트의 미디어 쿼리 를 별도의 파일로 분리하는 것입니다. 이러한 반응 스타일은 사이트의 다른 스타일 규칙과 함께 볼 때 혼란 스러울 수 있기 때문에 다른 파일에서 직접 작성하는 것이 매력적일 수 있습니다. 이 접근법에 대한 한 가지 우려 사항은 @import 규칙이 먼저 있어야하기 때문에 나머지 사이트 스타일보다 먼저 미디어 쿼리가로드된다는 것입니다. 실적을 고려한 모바일 우선 반응 형 사이트를 만들 때 이는 문제가 될 수 있습니다. 이러한 이유로 사이트의 반응 형 스타일을 개별적으로 구분하지 말고 @import를 사용하여 사이트로 가져 오는 것이 좋습니다. 그렇습니다. 그렇게하는 것의 이점이있는 것처럼 보일 수 있지만 단점은 그러한 이점보다 중요합니다.
가져 오기 & 사용이 필요합니까?
아니, 그렇지 않아. 많은 사이트는 하나의 파일 안에 모든 주요 스타일을 표시하기 만하며, 그 파일이 커질 수 있기 때문에 그렇게 관리됩니다 (이것은 내가 내 작업에서하는 방식입니다). @import가 도움이된다면 워크 플로우의 일부가 될 수 있습니다. 그렇지 않으면 모든 CSS 규칙의 단일 스타일 시트를 웹 페이지를 안전하게 만들 수 있습니다.
브라우저 지원
매우 오래된 브라우저는 이러한 @import 규칙 중 일부에 문제가 있지만 요즘에는 이러한 브라우저가 문제가되지 않을 것입니다. 이전 버전의 Internet Explorer의 수명 만료가 지났기 때문에 특히 그러합니다. 궁극적으로 HTML이나 CSS에서 @import 규칙을 사용하기로 결정했다면 IE의 구 버전을 지원해야하는 이상한 점이없는 한 웹 브라우저의 레거시 버전에 문제가 발생하지 않아야합니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집.