Day 5. Using a Shared CSS File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
rel="stylesheet"
/>
<link href="shared.css" rel="stylesheet" />
<link href="daily-challenge.css" rel="stylesheet" />
<title>My Daily Challenge</title>
</head>
<body>
<img src="challenges-trophy.jpg" alt="A trophy" />
<h1>Hoon' Challenge for Tuesday, May 20th</h1>
<p id="todays-challenge">
Learn about the basics of web development - specifically dive into HTML & CSS.
</p>
<p>Explore the <a href="full-week.html">full week</a>.</p>
</body>
</html>
body {
margin: 50px;
}
img {
width: 200px;
height: 200px;
border-radius: 100px;
}
#todays-challenge {
color: rgb(170, 96, 83);
font-weight: bold;
font-size: 52px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Upcoming Challenges</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
rel="stylesheet"
/>
<link href="shared.css" rel="stylesheet" />
<link href="full-week.css" rel="stylesheet" />
</head>
<body>
<h1>My Upcoming Challenges</h1>
<a href="index.html">View Today's Challenge</a>
<p>Repeat what I learned about HTML & CSS</p>
<p>Do the exercises on HTML & CSS</p>
<p>Dive deeper into HTML & CSS and build more complex websites</p>
</body>
</html>
body {
background-color: rgb(233, 215, 207);
text-align: center;
color: rgb(83, 75, 75);
}
h1 {
font-family: 'Oswald', sans-serif;
}
p {
font-family: 'Fira Sans', sans-serif;
}
a {
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
color: rgb(167, 1, 78);
}
a:hover {
text-decoration: underline;
}
웹사이트를 개발하다 보면 점점 규모가 커지고 페이지가 늘어나는 상황이 발생한다. 이럴 때 CSS 코드를 어떻게 관리하느냐에 따라 개발 효율성이 크게 달라진다. 특히 여러 페이지에 걸쳐 일관된 스타일을 유지하는 것은 전문적인 웹사이트의 핵심이다. 공유 CSS 파일을 활용하면서 깨달은 몇 가지 인사이트를 나누고 싶다.
1. 코드 중복은 가장 큰 적이다. 웹 개발에서 반복되는 코드는 시간 낭비일 뿐만 아니라 유지보수를 어렵게 만든다. 같은 스타일을 여러 페이지에 개별적으로 작성하는 대신, 공유 CSS 파일에 한 번만 정의하면 모든 페이지에서 활용할 수 있다. 이는 마치 한 번의 지시로 여러 팀원이 동시에 같은 일을 수행하게 하는 효과가 있다.
2. 분리와 통합의 균형이 중요하다. 웹사이트의 모든 스타일을 하나의 파일에 넣는 것도, 페이지마다 완전히 분리하는 것도 좋지 않다. 공통 요소(예: 본문 여백, 기본 텍스트 스타일, 링크 색상)는 공유 파일에 두고, 페이지별 특수 요소(예: 특정 이미지 스타일, 고유 ID 선택자)는 개별 CSS 파일에 남겨두는 균형이 필요하다.
3. 스타일 상속의 원리를 활용하라. margin과 같은 속성은 공유 CSS 파일에서 정의한 기본 스타일에 추가된다. 이런 CSS의 상속 특성을 이해하면, 더 적은 코드로 더 많은 스타일링이 가능해진다. 예를 들어, 기본 여백을 공유 파일에서 설정하고, 특별한 페이지에서만 추가 여백을 적용할 수 있다.
4. 페이지별 특성을 존중하라. 공통 스타일을 공유하더라도, 각 페이지의 고유한 특성은 유지해야 한다. 예를 들어, 메인 페이지에만 특정 이미지나 ID 선택자가 필요하다면, 그것은 페이지별 CSS 파일에 남겨둔다. 이처럼 공통점과 차이점을 명확히 구분하는 것이 깔끔한 코드 구조의 비결이다.
5. 실무에서의 적용. 실제 프로젝트에서는 거의 모든 웹사이트가 여러 페이지 간에 공유되는 스타일을 가지고 있다. 회사 로고, 네비게이션 바, 푸터 등은 모든 페이지에서 일관된 모습을 유지해야 한다. 공유 CSS 파일은 이런 일관성을 효율적으로 유지하는 핵심 도구다.
공유 CSS 파일을 활용하는 방식은 단순한 기술적 팁을 넘어서 웹 개발의 기본 철학을 보여준다. 효율성과 일관성, 그리고 유지보수성을 모두 고려한 접근법이다. 코드의 양이 줄어들 뿐만 아니라, 한 곳에서의 변경이 모든 페이지에 자동으로 반영되기 때문에 디자인 업데이트도 훨씬 수월해진다.
웹 개발자로서 성장하면서 깨닫게 되는 중요한 진리 중 하나는 '덜 작성하는 것이 더 많은 것을 이룬다'는 점이다. 공유 CSS 파일은 이 진리를 완벽하게 구현한 예시라고 할 수 있다. 더 적은 코드로, 더 일관된 결과를, 더 효율적으로 만들어내는 방법이다.