CSS파일 간의 중복 내용이 많아질 경우, 두 HTML파일에서 모두 사용하는 CSS에 대한 공유 CSS파일을 사용하면 전체적으로 사용되는 코드를 줄일 수 있다. 그 후 다른 페이지에는 필요하지 않은 스타일을 추가할 특정 파일을 만들면 된다.
Visual studio code에서 새로 share.css라는 css파일을 만든 후 중복되는 내용의 CSS코드를 이쪽으로 옮기려고 한다.
full-week.css에서 중복되는 내용을 share.css에 잘라내기-붙여넣기 한 후 저장했다.
<head>
<link rel="share.css" rel="stylesheet" />
<link href="full-week.css" rel="stylesheet" />
<meta charset="UTF-8" />
<title>My Upcoming Challenges</title>
</head>이후 html파일에서 share.css에 대한 새로운 link요소를 추가한다. 이 때 순서가 중요하다. 위에서 아래로 스타일을 가져오므로 먼저 공유 CSS파일의 스타일을 가져온 뒤, 필요할 경우 두 번째 파일이 먼저 가져온 파일의 스타일의 일부를 재정의할 수 있도록 코드를 구성해야 한다.
중요한 점은 두 CSS파일의 내용이 상충할 경우, 예를 들어
- full-week.css
body {
margin: 50px;
}- share.css
body {
text-align: center;
background-color: rgb(233, 215, 207);
}일 때 full-week.css파일 내용이 share.css의 내용을 덮어쓰기 한다고 한다. 이 경우에는 share.css파일에 margin: 50px;이 들어가므로 병합이라고 할 수 있겠다.
공유 CSS파일을 사용하면 여러 페이지에 공통적으로 스타일을 적용할 수 있기 때문에 잘 사용하자.
공부 정리용 블로그