고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
1. 내부 스타일(embedded)
2. 인라인 스타일(inline)
3. 외부 스타일(external)
1. 내부 스타일(embedded)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
</style>
<title>CSS</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
2. 인라인 스타일(inline)
<body>
<h1 style="color:red">Welcome!</h1>
</body>
3. 외부 스타일(external)
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="style/main.css" />
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
캐스캐이딩 원칙
1. 스타일 우선순위
2. 스타일 상속
스타일 우선순위
동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
브라우저에 의해 정의된 스타일< 개발자가 선언한 스타일< 사용자가 구성한 스타일
적용 범위가 적을 수록 우선시 된다.
tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
소스코드의 순서가 뒤에 있으면 덮어쓴다.
Tag의 이름이 정의
WEB3.0
사용자 경험
스타일 상속
부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
자식 요소에서 재 정의 할 경우, 부모의 스타일을 덮어쓴다.
상속이 되지 않는 속성도 있다. (예: 배경 이미지, 배경 색 등)
728x90
반응형
'IT > CSS' 카테고리의 다른 글
| CSS 요소를 없애는 방법 Display liline-block, display none, visibility hidden (0) | 2023.09.11 |
|---|---|
| CSS 소개 (1) | 2023.09.09 |
