- CSS3
CCS(Cascading Style Sheets) 란 HTML5에서 지원할 수 없는 다양한 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 웹문서에 적용하는 데 사용 되는 스타일 시트의 표준안이다.
- CSS3의 구성
h1 { color: red; font-size: 12px;}
선택자 : 스타일 시트를 적용할 대상을 지정 하는 것
[ 위의 "h1"이 이에 해당한다. ]
속성 : 어떤 속성을 적용할지 선택 하는 것
[ 위의 "color", "font-size"가 이에 해당한다. ]
속성 값 : 속성에 어떤 값을 반영할지 선택 하는 것
[ 위의 "red", "12"가 이에 해당한다. 속성 값, 단위 뒤에는 반드시 ";"세미콜론을 넣어야한다. ]
- CSS의 정의 문법
선택자 속성 콜론 단위 선언 블록 끝
div { border : 2 px ; }
^ ^ ^
선언 블록 시작 속성값 세미콜론
위와 같이 한줄로 작성하는 방법과
div {
color: aqua;
background-color: olive;
}
여러 줄로 작성하는 방법이 있는데 가독성을 위해 여러줄로 작성하는 것을 선호한다.
스타일 시트
인라인 스타일 시트 :
<body>
<p style="color: red; background-color: orange;">
인라인 스타일입니다.
</p>
</body>
HTML요소의 style 속성을 사용하여 스타일을 지정하는 방법입니다.
우선순위가 높아 덮어 씌우기 편하지만 스타일을 수정하기 불편하다는 단점이 있습니다.
내부 스타일 시트 :
<head>
<style>
h1{
color: red;
background-color: blue;
}
</style>
</head>
HTML문서 내부에 <style> 태그를 사용하여 스타일을 지정하는 방법입니다.
인라인 스타일 시트보다 우선순위가 밀리고 외부 스타일 시트보다 우선 순위가 빠릅니다.
스타일은 선택자 {속성="값"} 형태로 지정합니다.
외부 스타일 시트
/* test.css */
p {
color: yellow;
background-color: orange;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<link type="text/css" rel="stylesheet" href="/test/css/test.css">
</link>
</head>
<body>
<p>외부 스타일 시트입니다.</p>
</body>
</html>
별도의 스타일 시트 파일을 통해서 스타일을 적용하는 방식입니다.
스타일을 적용할 HTML 파일의 "head" 태그에 "link" 태그를 사용해서 적용할 수 있습니다.
외부 스타일 시트의 확장자는 ".css" 입니다.
CSS 적용 우선순위
<head>
<style>
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
</head>
<body>
<p>CSS 적용 우선순위.</p>
</body>
위와 같이 하나의 태그에 스타일 시트가 중복 정의되면 제일 마지막에 설정된 값이 적용된다.
우선순위와 상관없이 속성을 강제로 적용할 때는 "!important" 를 넣어주면 된다.
<style>
p{ color: red; }
p{ color: blue !important; }
p{ color: green; }
</style>
'Front_end > CSS' 카테고리의 다른 글
| CSS - 반응형 웹 (0) | 2024.09.03 |
|---|---|
| CCS의 선택자 - 2 (0) | 2024.07.29 |
| CSS의 선택자 - 1 (0) | 2024.07.26 |
