1. 인라인 스타일(Inline style)
-
인라인 스타일이란 HTML 요소 내부에
style속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다. -
다만, 이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 되므로 이 방식은 될 수 있으면 필요한 경우에만 사용해야 한다.
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>
</body>2. 내부 스타일 시트(Internal style sheet)
- 내부 스타일 시트를 이용하는 방법은 HTML 문서 내의
<head>태그에<style>태그를 사용하여 CSS 스타일을 적용한다. 이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.
<head>
<style>
body {
background-color: lightyellow;
}
h2 {
color: red;
text-decoration: underline;
}
</style>
</head>3. 외부 스타일 시트(External style sheet)
-
외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해주며, 외부에 작성된 이러한 스타일 시트 파일은
.css확장자를 사용하여 저장된다. -
스타일을 적용할 웹 페이지의
<head>태그에<link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용된다. -
CSS 파일을 HTML 파일에 연결할 때는,
<link>태그 안에서href속성을 통해 연결한다. -
<link>요소의rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>4. 스타일 적용 우선순위
-
3가지의 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일의 우선순위는 아래와 아래와 같다.
- 인라인 스타일 (HTML 요소 내부에 위치함)
- 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
- 웹 브라우저 기본 스타일
-
예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다. 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.
FE Developer