CSS란?
CSS3(Cascading Style Sheets ver.3)은 HTML 문서에 스타일(모양)을 지정하는데 사용하는 언어이다.
문법(구문)은 다음과 같다.
Selector {
Property: Value;
Property: Value;
...
}
Selector(선택자, 선택기) : HTML 요소를 선택하는 지시자.
Property : 요소에 적용할 스타일 속성. (글자 색 번경 - color)
Value : 적용할 스타일 속성의 값. (색상 - red)
ex) <p> 태그의 글자를 빨간색으로 표현해라. -> p { color: red; }
CSS 작성 위치
1. 인라인 스타일(In-line Style) : 태그의 style 속성에 작성. 해당 요소에만 스타일이 적용됨.
2. 내부 스타일(Internal Style) : <head> 태그 안에 <style> 태그 영역을 만들어 작성.
3. 외부 스타일(External Style) : xxx.css라는 독립된 파일을 따로 작성하는 방식.
- <link> 태크를 활용 => <link type="text/css" rel="stylesheet" href="외부스타일.css">
- <style> 영역 내에 '@import url("외부스타일.css");' 문장을 작성.
<head>
<meta charset="UTF-8">
<title>CSS 기초</title>
<style type="text/css">
/* @import url("ex_style.css"); */
p {
color: red;
}
p2 {
color: green;
}
team {
color: yellow;
}
team {
color: aqua!important;
background-color: hotpink;
}
department {
border: 1px solid red;
}
</style>
<link type="text/css" rel="stylesheet" href="ex_style.css">
</head>CSS 특징
1. CSS 우선 적용 순위
- 인라인 스타일이 최우선으로 적용된다.
- 그 다음 작성 위치에 따라 요소와 가까운 스타일 순으로 적용된다.
2. 스타일 적용
하나의 요소에 다수의 스타일을 적용할 수 있다.
- p { color: blue; } -> 글자 색상만 담당
- p { background-color: yellow; } -> 배경색만 담당
- p { border: 1px solid black; } -> 테두리만 담당
=> 다수의 스타일 시트에서 중첩되는 속성을 작성하지 않으면 모든 스타일 시트가 요소에 적용된다.
중첩 되는 속성은 마지막에 작성한 것 또는 !important가 붙은 것만 적용된다.
Selector(지정자)
디자인(스타일)을 적용할 요소를 선택하는 지정자(지시자)
기본 선택자)
- * : 전체 선택자. 모든 요소를 다 선택(html, head, body 포함)
- type 선택자 : 태그 이름 선택자. 지정한 태그 이름으로 요소를 선택. 같은 이름의 모든 태그를 선택.
- . : 클래스(class) 선택자. 요소의 class 속성값으로 선택.
- # : 아이디 선택자. 요소의 id 속성값으로 선택.
- [attr] : 속성 선택자. 요소의 속성명으로 선택. class, id 속성 제외. => [attr="value"] - 속성값을 포함하여 요소를 선택.
<head>
<meta charset="UTF-8">
<title>class 및 id 선택자</title>
<style>
/* class 선택자 */
.c1 {
color: blue;
background-color: skyblue;
}
.c2 {
color: purple;
}
/* type 선택자와 class 선택자의 조합 */
h1.c1 {
background-color: deepskyblue;
}
p.c1 {
color: white;
}
/* id 선택자 */
#i1 {
color: deeppink;
background-color: pink;
}
#i2 {
background-color: gold;
}
/* type 선택자와 id 선택자의 조합 */
h1#i2 {
color: orangered;
background-color: orange;
}
.c3 {
border-bottom: 2px dashed red;
}
.c4 {
background-color: green;
}
</style>
</head>'CSS' 카테고리의 다른 글
| 6. display의 flex (0) | 2022.08.24 |
|---|---|
| 5. 다양한 요소(element) (0) | 2022.08.24 |
| 4. 요소의 처리와 선택자 (0) | 2022.08.12 |
| 3. 배경 및 텍스트 (0) | 2022.08.12 |
| 2. 색상/테두리/요소의 크기/여백 (0) | 2022.08.12 |
