반응형
HTML에 스타일을 적용하는 세가지 방법
1. 인라인 스타일 (Inline CSS)
- HTML 요소에 직접 스타일을 지정하는 방법, 각 요소의
style속성에 CSS 코드 작성 - 장점 : 특정 요소에 빠르게 스타일을 적용할 수 있음
- 단점 : 코드가 복잡해지고, 유지보수가 어려움
<h1 style="color : red; font-size : 20px;">안녕하세요 권여진입니다</h1>
2. 내부 스타일 시트 (Internal CSS)
- HTML 문서의
<head>태그 안에<style>태그를 사용하여 CSS를 작성하는 방법, HTML파일과 스타일이 한곳에 있어 특정 페이지만 스타일을 적용할 때 유용 - 장점 : 한 문서 내에서 여러 요소에 적용가능
- 단점 : 여러 페이지에 적용하려면 각각 추가해야 함
<head>
<style>
h1 {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<h1>안녕하세요 권여진입니다</h1>
</body>
3. 외부 스타일 시트 (External CSS)
- CSS 파일을 별도로 작성한 후 HTML 문서에서 링크로 불러오는 방법, 웹사이트의 여러 페이지에서 같은 스타일을 적용할 수 있어 유지보수 용이
- 장점 : 여러 페이지에 동일한 스타일을 쉽게 적용할 수 있고, 코드가 깔끔해짐
- 단점 : 파일을 별도로 로드하므로 페이지 로딩 속도에 영향을 미칠 수 있음
<!-- HTML 파일에서 외부 CSS 파일 링크 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>안녕하세요 권여진입니다</h1>
</body>/* styles.css 파일 내용 */
h1 {
color: green;
font-size: 25px;
}
스타일이 적용되는 우선순위(특이성, Specificity)
- 인라인 스타일 (Inline Style)
style = "color : red;"
- 우선순위 : 가장 높음
- HTML 요소의 style 속성에 직접 지정한 스타일
- 특이성 값 : 1000
( 내부 스타일 시트와 외부 스타일 시트의 우선순위는 없음! )
- ID 선택자 (ID Selector)
#header {color : blue;}
- 우선순위 : 두 번째로 높음
- 요소에 적용된 id속성에 기반하여 스타일 지정
- 특이성 값 : 100
- 클래스 선택자, 속성 선택자, 가상 클래스 선택자 (Class, Attribute, Pseudo-class Selectors)
.menu {color : green;}
input[type="text"] {color : black;}
a:hover {color : orange;}
- 우선순위 : 세 번째
- 클래스 속성, 속성 선택자(
[type = "text"]), 그리고 가상 클래스(:hover,:focus등)에 기반하여 스타일 적용 - 특이성 값 : 10
- 요소 선택자 및 가상 요소 선택자 (Element and Pseudo-element Selectors)
h1 {color : purple;}
p::before {content : "Note: ";}
- 우선 순위 : 네 번째
- HTML 요소 자체(
div,p,h1)나 가상 요소(::before,::after)를 선택할 때 사용 - 특이성 값 :1
- 와일드카드 (*) 및 상속
*{ margin : 0; }
- 우선순위 : 가장 낮음
- 모든 요소를 선택할 때 사용
- 특이성 값 : 0
- ! important 규칙
.menu {color : red !important;}
- 우선순위 : 특이성에 관계없이 가장 높은 우선순위
- 스타일 규칙 뒤에 !important를 붙이면 해당 스타일이 가장 우선적으로 적용
특이성 계산 방법
- !important 특이성 무시하고 최우선 적용
- 인라인 스타일 : 1000
- ID 선택자 : 100
- 클래스, 속성, 가상 클래스 선택자 : 10
- 요소, 가상 요소 선택자 : 1
이 값들을 합산하여 가장 높은 특이성을 가진 스타일이 적용됨
#nav .item > a는 특이성이 111(100 + 10 + 1)이므로 단순한 클래스 선택자 .item보다 높은 우선순위를 가짐
반응형
'FE > HTML & CSS' 카테고리의 다른 글
| HTML | 자주 쓰이는 HTML 요소들 (0) | 2024.10.13 |
|---|---|
| HTML | 시맨틱 마크업 (Semantic Markup) (0) | 2024.10.09 |
| HTML | HTML에 대하여 (2) | 2024.10.09 |