CSS는 웹 페이지에서 뼈대 역할을 하는 HTML을 디자인하는 언어입니다. 전체적인 CSS에 대한 개념은 아래 페이지를 참고해주세요.
이 페이지에서는 CSS로 작성된 스타일링 구문이 HTML에 적용될 수 있도록 스타일시트를 HTML에 연결하는 방법에 대해 공유드리려고합니다.
🔗 CSS 문법 및 규칙 — 메타보드 (meta-board.com)
CSS 스타일을 적용하는 방법에는 인라인 스타일, 내부 스타일시트, 외부 스타일시트가 있는데요. 각각의 방법에 대한 설명과 사용 예시를 살펴보면서 익혀볼까요?
인라인 스타일 (Inline Style):
인라인 스타일은 HTML 요소의 "style" 속성을 사용하여 직접 스타일을 지정하는 방식입니다. 이 스타일은 해당 요소에만 적용됩니다.
사용 예시
<h1 >Hello World</h1>
위의 예시에서 <h1> 태그에 인라인 스타일을 적용하여 글자색을 파란색으로, 글꼴 크기를 24px로 지정합니다.
내부 스타일시트 (Internal Stylesheet):
내부 스타일시트는 HTML 문서의 <style> 태그 내부에 CSS 코드를 작성하여 스타일을 지정하는 방식입니다. 이 스타일은 해당 HTML 문서 내의 모든 요소에 적용됩니다.
사용 예시
<html>
<head>
<style>
h1 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
위의 예시에서 <style> 태그 내에 작성된 CSS 코드를 사용하여 <h1> 태그의 글자색을 빨간색으로, 글꼴 크기를 20px로 지정합니다.
외부 스타일시트 (External Stylesheet):
외부 스타일시트는 별도의 CSS 파일로 작성되며, HTML 문서에서 링크를 통해 연결하여 스타일을 지정하는 방식입니다. 이 스타일은 여러 HTML 문서에서 공유하여 사용할 수 있습니다.
style.css 파일
h1 {
color: green;
font-size: 24px;
}
index.html 파일
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>위의 예시에서 style.css 파일에 작성된 CSS 코드를 외부 스타일시트로 사용하여 <h1> 태그의 글자색을 초록색으로, 글꼴 크기를 24px로 지정합니다. index.html 파일에서 <link> 태그를 사용하여 style.css 파일을 연결합니다.
위 이미지를 보면 이해가 쉽습니다. 스타일링이 작성된 style.css 파일을 HTML 파일에서 <link> 태그를 사용하여 파일은 연결한 모습니다.
가장 보편적으로 사용되는 CSS 스타일시트 적용법은?
가장 많이 사용되는 적용 방법은 외부 스타일시트 적용 방법입니다. 스타일시트를 HTML 코드와 따로 작성하여 파일을 연결하는 방법에는 다양한 장점이 있는데요. 몇 가지 중요한 장점에 대해 알려드릴게요!
- 재사용성: 외부 스타일시트는 여러 HTML 문서에서 공유하여 사용할 수 있습니다. 따라서 스타일을 한 번 작성하고 외부 스타일시트로 연결하면 여러 페이지에서 동일한 스타일을 쉽게 재사용할 수 있습니다. 이로써 코드의 중복을 줄이고 유지보수를 간편하게 할 수 있습니다.
- 일관성: 외부 스타일시트를 사용하면 모든 페이지에서 일관된 스타일을 적용할 수 있습니다. 웹 사이트 전체에서 동일한 디자인, 레이아웃, 색상 등을 유지하기 쉽습니다. 일관된 스타일은 사용자에게 통일감을 제공하고 전체적인 사용자 경험을 향상시킵니다.
- 유지보수 용이성: 외부 스타일시트를 사용하면 스타일을 변경할 때 각각의 HTML 문서를 수정할 필요가 없습니다. 대신 외부 스타일시트 파일을 수정하면 모든 연결된 HTML 문서에 자동으로 변경 사항이 반영됩니다. 이는 유지보수를 용이하게 하고 일관된 스타일을 유지하는 데 도움이 됩니다.
- 로딩 속도 개선: 외부 스타일시트는 브라우저에 의해 캐시될 수 있으며, 캐시된 스타일시트는 페이지 간 이동 시 다시 다운로드할 필요가 없습니다. 따라서 웹 페이지의 로딩 속도가 향상되고 대역폭을 절약할 수 있습니다.
- 구조화: 외부 스타일시트를 사용하면 HTML 문서 자체에는 콘텐츠에 집중할 수 있습니다. 스타일 및 레이아웃과 관련된 부분은 외부 스타일시트로 분리되어 코드를 구조화하고 가독성을 향상시킵니다.
이러한 장점들은 대규모 웹 사이트의 개발이나 다수의 페이지를 가지는 프로젝트에서 특히 유용합니다. 외부 스타일시트를 사용하면 일관성, 유지보수성 및 효율성을 향상시킬 수 있답니다.
