최근 CSS 및 JavaScript 파일 작성 관련 검색하고 정리해서 공유 드립니다.
시간 되실때 읽어보시면 될 것 같습니다.
웹 페이지를 만들 때, 각 페이지마다 별도의 HTML 및 CSS 파일을 생성하는 것은 효율적이지 않습니다.
대신, 웹 페이지를 효과적으로 관리하기 위해 다음과 같은 방법을 사용하는 것이 일반적입니다
-
HTML 템플릿 사용: 웹 페이지의 레이아웃과 구조를 정의하는 기본 HTML 템플릿을 만듭니다. 이 템플릿에는 사이트 네비게이션, 헤더, 푸터 및 기본 페이지 구조가 포함됩니다.
-
CSS 스타일 시트 중앙 관리: 모든 페이지에서 공통적으로 사용되는 스타일은 하나의 CSS 스타일 시트에서 관리합니다.
이를 통해 일관된 디자인을 유지하고 스타일을 업데이트할 때 모든 페이지에 일일이 수정하지 않아도 됩니다. -
필요한 경우 개별 페이지 CSS: 특정 페이지에만 적용되는 특별한 스타일이 필요한 경우, 이러한 스타일은 해당 페이지의 HTML 파일 내에 포함시키거나 개별 CSS 파일을 작성 합니다. 단, 다른 페이지에 영향을 주지 않으면서 특정 페이지에만 스타일을 적용할 수 있게 클래스 명을 구분합니다.
-
CSS 클래스 및 선택자 활용: 페이지에 따라 스타일이 다소 다를 경우, CSS 클래스와 선택자를 사용하여 스타일을 조정합니다.
이를 통해 중복을 피하고 코드를 더 효율적으로 관리할 수 있습니다. -
CSS 전처리기 사용: SASS, LESS, 또는 Stylus와 같은 CSS 전처리기를 사용하면 변수, 믹스인 및 네스팅과 같은 기능을 활용하여 CSS 코드를 더 구조화하고 유지 보수를 쉽게 만들 수 있습니다.
좋은 웹 개발 관행은 코드를 재사용하고 유지 보수를 용이하게 만드는 것입니다.
이러한 방법을 사용하면 많은 페이지를 효과적으로 관리하고 일관된 디자인을 유지할 수 있습니다.
페이지가 늘어날 때마다 새로운 HTML 및 CSS 파일을 만들지 않고도 효율적으로 작업할 수 있습니다.
여러개의 HTML 파일을 각각 관리하더라도, CSS는 모든 페이지에 공통으로 적용되는 부분을 하나의 파일로 관리하고, 특수한 경우에만 개별 CSS 파일을 추가하는 방식이 좋습니다. 템플릿 엔진이나 CSS 모듈화를 활용하여 중복 코드를 줄이고, 스타일과 HTML 구조를 효율적으로 관리하는 것이 장기적으로 더 나은 방법입니다.
이유 중 하나는 SEO 때문인데, SEO에서는 될 수 있으면 로딩하는 웹페이지에서 불러오는 파일의 수(Javascript, CSS)를 적게하기를 권장합니다.
다른 이유로는 반응형으로 CSS를 만들기 위해 각 페이지들이 정해진 CSS를 공통으로 사용하기 때문에 정해진 한 CSS 파일를 여러 페이지들이 공유해서 쓰는 경우가 대부분이라고 할 수 있겠네요.
