728x90
스타일 우선순위란 ?
CSS 규칙이 서로 충돌할 때 어떤 규칙이 우선적으로 적용되는지를 결정하는 규칙
외부 > 내부 > 인라인 순으로 우선순위가 결정됨 (깊어질수록 우선위가 높아짐)
1. 인라인 스타일 (Inline style)
html 요소에 직접 스타일 속성을 포함하여 스타일을 지정하는 방법
CSS 스타일을 별도의 스타일 시트에 작성하는 대신 특정 html 요소에 스타일을 적용하고자 할 때 사용
기본적인 형식
<요소명 style="속성: 값; 속성: 값;">
인라인 스타일 특징
우선순위: 인라인 스타일은 다른 스타일 규칙보다 높은 우선순위를 가짐
따라서 동일한 속성에 대해 인라인 스타일이 적용되면 다른 스타일은 무시됨
특정한 요소에 대한 스타일 적용: 인라인 스타일은 특정한 HTML 요소에 대한 스타일을 적용하는 데 유용함
다른 요소에는 영향을 주지 않고 특정 요소에 스타일을 지정할 수 있음
유지보수 어려움: 인라인 스타일을 남용하면 유지보수가 어려워질 수 있음
스타일이 여러 요소에 적용되고 있는 경우, 각 요소마다 스타일을 수정해야 함
작은 규모의 프로젝트나 빠른 프로토타이핑에 유용: 간단한 웹 페이지나 프로토타입을 빠르게 만들 때 인라인 스타일은 편리하게 사용할 수 있음
2. 내부 스타일 시트 (Internal style sheet)
html 문서 안에 포함된 CSS 스타일 규칙들로 구성된 스타일 시트
<style> 태그를 사용하여 html 문서 내에 사용되며, 해당 문서에만 적용됨
기본적인 형태
/* p 태그에 스타일을 정의한다고 가정 */
<style>
p {
color: blue;
font-size: 16px;
}
</style>
내부 스타일 시트 특징
- 내부 스타일 시트를 사용하면 하나의 html 문서 내에서 스타일을 관리할 수 있으므로 스타일 규칙과 해당 문서가 함께 유시보수되어 일관성을 유지할 수 있음
- 외부 스타일 시트에 비해 범위가 제한되지만, 작은 웹 페이지나 프로토타입을 개발할 때 편리하게 사용됨
대규모 프로젝트에서는 외부 스타일 시트를 사용하여 스타일을 중앙 관리하고 여러 페이지에서 재사용하여 사용함
3. 외부 스타일 시트(External Style sheet)
웹 페이지의 스타일을 별도의 CSS 파일로 정의하고, html 문서에서 이 파일을 참조하여 스타일을 적용하는 방식
여러 html 문서에서 동일한 스타일 규칙을 사용하고, 스타일을 중앙에서 관리하고 수정할 수 있음
<link> 요소 : html 문서에서 외부 스타일 시트를 사용하기 위해 <link> 요소를 사용 [ <head> 섹션에 위치함 ]
<link rel="stylesheet" type="text/css" href="styles.css">
외부 스타일 시트의 특징
일관성 : 외부 스타일 시트를 사용하면 여러 웹 페이지에서 동일한 스타일을 사용할 수 있으므로 일관성이 유지됨
유지보수 용이성 : 스타일 규칙이 하나의 파일에 모아져 있으므로 스타일 변경이 필요한 경우 해당 파일만 수정됨
재사용성 : 동일한 스타일 시트를 여러 웹 페이지에서 재사용할 수 있으므로 개발 시간과 노력이 절약됨
728x90
'Web > CSS' 카테고리의 다른 글
| [CSS] 애니메이션 (0) | 2023.06.23 |
|---|---|
| [CSS] 선택자 (0) | 2023.06.22 |
