CSS - CSS 파일의 존재 이유

Kim Jay·2023년 2월 2일

생활코딩을 듣고 공부한 내용을 기록한 글입니다.

만일 각각의 HTML 파일에 각각 스타일 코드가 포함되어야 한다면, 동시에 여러 웹페이지에 동일한 서식이 적용될 경우 불필요한 코드가 중복되는 일이 발생합니다. 또한 일괄적으로 적용되는 수정사항이 있을 경우 모든 HTML 파일을 일일이 수정해야하는 비효율이 생깁니다.

이를 해결하기 위해 존재하는 것이 CSS 파일입니다. 중복되는 style 서식을 한 파일에 모아두고, 필요할 경우 HTML에 이를 그대로 불러오고, 수정이 필요한 경우 해당 CSS 파일만 수정해주면 이를 갖다 쓰는 모든 HTML 파일에 일괄적으로 적용됩니다.

이는 다음과 같은 장점들을 지닙니다.

중복의 제거: 수정사항이 있을 경우, 공통적으로 적용되는 CSS파일만 수정해주면 끝!
리뷰 편리성: 웹페이지마다 적용된 style들이 같은지 아닌지 한눈에 알아보기 쉬워집니다. 만일 각각의 웹페이지에 코드의 형태로 펼쳐져 있다면, 다르게 적용된 서식이 있는지 혹은 오타가 있는지를 하나하나 눈으로 비교해야 합니다.
코드 효율성: 절대적인 코드의 양이 줄면서 네트워크 트래픽을 덜 잡아먹게 됩니다. 비즈니스 측면에서 이점입니다.

이를 활용하는 방식은 간단합니다. 애초에 CSS 파일이라면 해당 내용이 CSS 언어라는 걸 굳이 또 알려줄 필요가 없으므로 <style>태그는 필요하지 않습니다. 그 안에 있는 선택자 + 선언 블록들만 포함해서 css 파일을 구성해줍니다.

(예시)
a {
    color:black;
    text-decoration: none; 
}
#grid{
    display: grid;
    grid-template-columns: 150px 1fr;
}

예를 들어, 이러한 내용을 여러번 재사용하고 싶다면 그대로 styles.css 라는 css 파일로 저장합니다.
다음으로 해당 서식을 적용하고 싶은 HTML 파일에 다음 코드를 추가하면 styles.css 안의 내용이 해당 페이지에 불러와집니다.

<link rel="stylesheet" href="styles.css">

유지보수에도 용이하고, 작업도 훨씬 편리해집니다.

넓이에 깊이 더하기