css 스타일 적용의 우선순위
1. 인라인 스타일
2. 내부 / 외부 스타일 시트
3. 웹 브라우저 기본 스타일
인라인 스타일(Inline style)
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
예제
<p style="color:green; text-decoration:underline">
내부 스타일 시트(Internal style sheet)
내부 스타일 시트를 이용한 방법은 HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정합니다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
예제
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style>
외부 스타일 시트(External style sheet)
외부 스타일 시트를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
스타일을 적용할 모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함하면 됩니다.
예제
<link rel="stylesheet" href="/examples/media/expand_style.css">
HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.
예제
p { color: red; font-size: 14px; }
아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.
예제
<style>
#para { color: teal; text-decoration: line-through; }
</style>
...
<p id="para">이 부분에 스타일을 적용합니다.</p>
클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.
이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 줍니다.
예제
<style>
.paras { color: lime; text-decoration: overline; }
</style>
...
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>
'HTML,CSS' 카테고리의 다른 글
| HTML5 span 과 div의 차이 (0) | 2021.02.05 |
|---|---|
| CSS 반드시 기억해야 하는 선택자 30개 (0) | 2021.01.17 |
| CSS div 왼쪽, 오른쪽으로 붙이기 (0) | 2020.12.09 |
| button (0) | 2020.11.13 |
| HTML공부 (0) | 2020.10.26 |