CSS 선언방식 - by. UXKM

2024-07-30

요약 설명
CSS 선언 방식에는 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일, 그리고 @import를 사용한 스타일 시트가 있습니다.
각 방식은 HTML 요소에 스타일을 적용하는 다양한 방법을 제공하며, 상황에 따라 적절한 방법을 선택할 수 있습니다.

내부 스타일 시트(Internal Style Sheet)

내부 스타일 방식은 HTML 문서 내의 <head> 요소에 <style> 요소를 사용하여 CSS 코드를 직접 작성하는 방식입니다.
<head> 요소에 넣는 것이 정석이지만, HTML5.2 권고안(2017년 12월 14일 발표)에 따르면 <body> 안에 <style> 사용이 가능하다고 명시됩니다.
이 방법은 한 HTML 문서 내에서만 해당하는 스타일을 정의할 때 사용됩니다.

							<head>
								<style type="text/css">
									h1 {font-size:20px}
									p {font-size:16px}
								</style>
							</head>

외부 스타일 시트(External Style Sheet) [권장방식]

별도의 CSS 파일을 만들고, HTML 문서 내의 <head> 요소에 <link> 요소를 이용하여 CSS 파일을 연결하는 방식입니다.
외부 스타일 시트는 웹 사이트 전체의 스타일을 하나의 파일에서 관리할 수 있게 해주며, 여러 HTML 문서에서 동일한 스타일을 쉽게 적용할 수 있도록 도와줍니다.
현재 권장하는 방식이며, 유지 보수를 용이하게 하고 안정성을 확보하는 가장 좋은 방법입니다.

							<head>
								<link rel="stylesheet" type="text/css" href="reset.css">
							</head>

인라인 스타일(Inline style)

HTML 요소에 직접 style 속성을 사용하여 스타일을 지정하는 방식입니다.
이 방식은 한 번 설정된 스타일을 변경하기가 어려울 수 있으며, 이로 인해 스타일 시트를 사용하는 많은 이점을 잃게 될 수 있기 때문에 꼭 필요한 경우에만 사용해야 합니다.
동일한 HTML 요소에 다른 방식의 style을 적용해도 인라인 스타일 방식이 우선 적용됩니다.
이 방법은 특정 요소에만 스타일을 적용하고자 할 때 사용됩니다.

							<body>
								<h1 style="font-size:20px;">uxkm.github.io</h1>
							</body>

@import 규칙을 이용한 스타일 시트(Imported Style Sheet)

내부(Internal) 또는 외부(External) 스타일 시트 내에 다른 CSS 파일을 가져와서 사용하는 방식입니다. 요약하면, CSS 파일 내부에서 다른 CSS 파일을 가져와서 사용하는 방식입니다.
이 방식은 CSS를 적용하기 전에 CSS 문서의 최상위에 선언하여 불러와야 합니다.
이 방법은 여러 개의 CSS 파일을 사용하지만 하나의 파일로 합쳐져 전달될 때 유용합니다.

							<!-- 내부 스타일 시트(Internal Style Sheet)에 사용하는 방법 -->
							<head>
								<style type="text/css">
									@import url('reset.css');
									h1 {font-size:20px}
									p {font-size:16px}
								</style>
							</head>

							/* 외부 스타일 시트(External Style Sheet)에 사용하는 방법 */
							@import url('reset.css');
							h1 {font-size:20px}
							p {font-size:16px}