🌱 기초 프론트엔드
CSS 외부 스타일시트란?
쉽게 이해하기
학교 교복을 생각해보세요. 모든 학생이 각자 옷을 만드는 대신, 교복 디자인 도면 하나를 만들어 모두가 같은 스타일의 옷을 입죠. CSS 외부 파일도 마찬가지예요. 스타일 규칙 하나를 만들어두면, 여러 HTML 페이지에서 같은 디자인을 사용할 수 있어요.
핵심 정리
CSS 코드를 별도 파일로 분리해서 여러 HTML에서 공유하는 방법이에요.
자세히 알아보기
외부 스타일시트는 CSS 코드를 `.css` 확장자를 가진 별도 파일로 저장하고, HTML에서 `<link>` 태그로 연결하는 방법이에요. 예를 들어 `styles.css` 파일을 만들고, HTML에서 `<link rel="stylesheet" href="styles.css">`처럼 연결하면 돼요.
실무에서는 거의 모든 프로젝트가 외부 스타일시트를 사용해요. 가장 큰 장점은 재사용성이에요. 웹사이트의 모든 페이지에서 같은 CSS 파일을 사용하면, 디자인을 한 곳에서만 수정해도 모든 페이지에 반영돼요. 예를 들어 메인 컬러를 빨간색에서 파란색으로 바꾸고 싶다면, CSS 파일 한 줄만 수정하면 전체 사이트가 바뀌죠.
또한 브라우저가 CSS 파일을 캐시에 저장해서, 같은 파일을 여러 페이지에서 사용해도 한 번만 다운로드하면 돼요. 이렇게 하면 웹사이트 로딩 속도도 빨라지고, HTML 파일도 깔끔하게 유지할 수 있어요. 그래서 모던 웹 개발에서는 HTML은 구조만, CSS는 스타일만 담당하도록 분리하는 것이 기본 원칙이에요.