CSS는 속성을 적용할 대상인 선택자와, 선택자에 적용할 선언부로 구성된 문법 형태를 가짐.
내부 스타일 시트 - <style>css코드</style>
(주로 사용) 외부 스타일 시트 - 외부에 css코드를 작성하여 html문서와 연결 <link rel="sytlesheet" href="css 파일 경로">
인라인 스타일 - 태그에 직접 css코드 작성
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<선택자>
1.전체 선택자 : * {}
2.태그 선택자 : 태그명{}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: green;
}
section{
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id="title">예약 안내 & 방법</h1>
<section id="guide" style="border: 1px solid black; ">
<p>빨리빨리 신청하자</p>
<p>아직 신청 안했으면</p>
</section>
<br>
<section>
<p>방 1개당 100000원</p>
</section>
<br>
<section>
<p>조식 없음</p>
</section>
</body>
</html>
|
cs |
3.아이디 선택자 : #id값{} (id값은 중복되서는 안된다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: green;
}
section{
border: 1px solid black;
}
#guide > p{ // 자식 태그
color: red;
}
</style>
</head>
<body>
<h1 id="title">예약 안내 & 방법</h1>
<section id="guide" style="border: 1px solid black; ">
<p>빨리빨리 신청하자</p>
<p>아직 신청 안했으면</p>
</section>
<br>
<section>
<p>방 1개당 100000원</p>
</section>
<br>
<section>
<p>조식 없음</p>
</section>
</body>
</html>
|
|
|
|
cs |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4.클래스 선택자: .class속성값{} (class 값은 중복 가능하다.)
<기본 속성 선택자>(html요소를 속성값으로 선택)
[class]{} 이런식으로 클래스가 있다는 속성을 가진, 태그들을 지정해서 css코드 적용가능
[class=""]{} 이렇게 정확히 클래스값으로 구분도 가능. (클래스 선택자(.class속성값)은 class의 " "의 값만 가져오기에 서로 다른 것이다.)
조합 선택자
그룹 선택자
h1, #title, .red{} 이런식으로 ,를 적용해주면 그룹화 시킬 수 있음.
자식 선택자
부모 선택자 > 자식 선택자 {}
.box > p{}
ㅡ> box클래스 속성값을 가진 태그의 하위 p태그에만 css코드를 적용하라.
하위 선택자
div p{}
div아래의 p 태그만 css 코드 적용
인접 형제 선택자
h1 + h2{}
h1 이후에 나오는 인접한 h2 단 한개(같은 h2가 바로 뒤에 있더라도 적용x)에만 css코드를 적용하라
일반 형제 선택자
h1 ~ h2{}
h1 이후에 나오는 모든 h2에 css코드 적용
<가상 요소 선택자>
기준 선택자 :: 가상 요소 선택자{}
::before
::after
<예시>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<style>
p::before{
content:'<before>';
color: blue;
}
p::after{
content:'<after>';
color: green;
}
</style>
</head>
<body>
<dt>CSS</dt>
<p style="color: red;">CSS는 ㅎㅎㅎ</p>
</body>
|
cs |
<링크, 동적 가상 클래스 선택자>
: link 링크 방문전 적용 css (색 변경)
:visited 링크 방문 후 적용 css (색 변경)
:hover 요소에 마우스를 올리면 해당 태그가 선택자로 지정됨
:active 요소에 마우스로 클릭하면 해당 태그가 선택자로 지정
<입력요소 가상 클래스 선택자>
:focus : 입력 요소 커서 (input 등)에 적히는 텍스트의 색깔 변경
|
1
2
3
|
input:focus{
color: blue;
}
|
cs |
:checked : 체크박스가 표시되면 그 뒤에 형제 요소에 스타일 적용
|
1
2
3
|
input:checked + label{
color: rebeccapurple;
}
|
cs |
:enabled 와 :disabled 가상 클래스 선택자
해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고,
사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 이용한다.
특정 위치의 자식 요소 선택하기
:only-child
부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
A:only-type-of
부모 안에 A 요소가 하나뿐일 때 선택한다.
:first-child
부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
:last-child
부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
A:first-of-type
부모 안에 있는 A 요소 중에서 첫번째 요소를 선택한다.
A:last-of-type
부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
:nth-child(n)
부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택한다.
:nth-last-child(n)
부모 안에 있는 모든 요소 중에서 끝번째 자식 요소를 선택한다.
A:nth-of-type(n)
부모 안에 있는 A 요소 중에서 n 번째 요소를 선택한다.
A:nth-last-of-type(n)
보모 안에 있는 A 요소 중에서 끝에서 n 번째 요소를 선택한다.
부모의 아래있는 모든 요소의 순서 contents :nth-child(n)
부모의 아래에 있는 요소 중, p들 만의 순서 contents p:nth-of-type(n)
':' 기호 앞의 태그 안에서 효과를 발휘.
CSS로 A부터 B까지 선택하기
p:nth-child(n+8):nth-child(-n+15)이렇게 p태그를 8번부터 ~ 15번 까지를 선택할 수 있습니다.
이것도 보통 자바스크립트에서 처리했을건데 CSS로 처리시 속도가 매우 향상됩니다.
'📚HTML, CSS > 이론 정리' 카테고리의 다른 글
| CSS 배경 속성, 전환 효과, 미디어 쿼리 (0) | 2023.01.25 |
|---|---|
| CSS 특성들(font와 box 제어) (0) | 2023.01.24 |
| html (멀티미디어 태그, 시멘틱 태그, 글로벌 속성) (0) | 2023.01.19 |
| html [표 태그들] (0) | 2023.01.18 |
| HTML 기본(form 관련 태그) (1) | 2023.01.17 |