CSS란?
: CSS(Cascading Style Sheets)는 HTML을 꾸미는 스타일 시트입니다.
활용 용도
: 텍스트 스타일 (색상, 크기, 글꼴)
: 배경 설정 (색상, 이미지)
: 레이아웃 조정 (위치, 크기, 정렬)
CSS 적용 우선순위 (높은 순서대로)
1. !important (가장 강력함, 모든 규칙을 무시하고 적용됨)
2. 인라인 스타일 (style="")
3. ID 선택자 (#id)
4. 클래스 선택자 (.class), 속성 선택자 ([type="text"]), 가상 클래스 (:hover 등)
5. 태그(요소) 선택자 (p, h1, div 등)
6. 기본 브라우저 스타일 (CSS가 없을 때 적용되는 기본값)
**적용 우선순위 알아두는 게 좋음!!**
CSS 적용 방법 (3가지)
| 적용 방식 | 특징 | 사용 예시 |
| 인라인 | 특정 요소만 적용 | <p style="color:red;"> |
| 내부 스타일 | 한 문서에서만 사용 가능 | <style> p { color: blue; } </style> |
| 외부 스타일 | 여러 HTML에서 사용 가능 | link rel="stylesheet" |
1. 인라인 스타일 (In-line)
: 태그 내부에 직접 스타일을 작성하는 방식
<p style="color: red;">이 글자는 빨간색입니다.</p>: 개별 요소에만 적용 됨
: 코드가 길어지면 유지보수 어려움
2. 내부 스타일 (Internal)
: HTML 문서의 <head> 태그 안에서 스타일을 정의
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>이 글자는 파란색입니다.</p>
</body>: 한 문서 내 여러 요소에 적용 가능
: 다른 HTML 파일에서는 사용 불가
3. 외부 스타일 (External) (주로 사용하는 방법)
: CSS 파일을 따로 만들어 연결하는 방식
<head>
<link rel="stylesheet" href="styles.css">
</head>: 여러 HTML 파일에서 같은 스타일 적용 가능
: 유지보수 및 확장성 높음
: 내부와 외부 스타일을 함께 사용하는 경우가 많다.
CSS 기본 문법
: CSS는 속성(attribute)과 값(value)을 이용해서 스타일을 지정
태그명 or #id명 or .class명 {
property명: value;
}태그명 : 말그대로 p, div, table, body, h1 등 사용하는 방법
#id명 : HTML에서 <h1 id="title"> 지정 시 CSS에서 #title 사용
.class명 : HTML에서 <p class="text"> 지정 시 CSS에서 .text 사용
id vs class 차이
id: 특정 하나의 요소에 적용 (고유해야 함)
class: 여러 요소에 적용 가능
#title {
font-size: 20px;
}
.text {
color: green;
}<h1 id="title">이것은 제목입니다.</h1>
<p class="text">이것은 단락입니다.</p>CSS 우선순위 적용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 우선순위 테스트</title>
<style>
/* (5) 태그 선택자 */
p {
color: blue;
}
/* (4) 클래스 선택자 */
.text {
color: green;
}
/* (3) ID 선택자 */
#title {
color: red;
}
/* (1) !important (모든 규칙보다 우선) */
.force {
color: orange !important;
}
</style>
</head>
<body>
<!-- (6) 브라우저 기본 스타일 (기본 검정색) -->
<p>기본 스타일입니다.</p>
<!-- (5) 태그 선택자 적용 (파란색) -->
<p>태그 선택자 (p { color: blue; })에 의해 파란색이 됩니다.</p>
<!-- (4) 클래스 선택자 적용 (초록색) -->
<p class="text">클래스 선택자 (.text { color: green; })에 의해 초록색이 됩니다.</p>
<!-- (3) ID 선택자 적용 (빨간색) -->
<p id="title" class="text">ID 선택자 (#title { color: red; })에 의해 빨간색이 됩니다.</p>
<!-- (2) 인라인 스타일 적용 (보라색) -->
<p id="title" class="text" style="color: purple;">
인라인 스타일 (style="color: purple;")에 의해 보라색이 됩니다.
</p>
<!-- (1) !important 적용 (오렌지색) -->
<p id="title" class="text force" style="color: purple;">
!important (.force { color: orange !important; })에 의해 오렌지색이 됩니다.
</p>
</body>
</html>우선순위 코드로 명확하게 보기 !
!important 사용법 체크 !
'Front > CSS' 카테고리의 다른 글
| CSS) 많이 쓰이는 주요 스타일 속성 정리 (0) | 2025.02.19 |
|---|---|
| CSS) 그룹 선택자 / 가상 클래스 선택자 / 수열 선택자 정리 (0) | 2025.02.18 |
| CSS) 후손 선택자 / 자손 선택자 / 인접, 일반 형제 선택자 정리 (0) | 2025.02.18 |
| CSS) Box Model 이해하기 : content, padding, border, margin 정리 (0) | 2025.02.16 |
| CSS) 폰트 크기 단위 총정리: 절대 단위 / 가변 단위 예시 및 특징 (0) | 2025.02.15 |