1. 전체 선택자
- 스타일을 모든 요소에 적용
- '*' 기호를 사용해서 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음
{ 속성명1: 속성값; 속성명2: 속성값 ...}
✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선!
예제 코드
<html lang="en">
<head>
<title>전체 선택자</title>
<style>
h2 { color: deepskyblue; font-size: 50px;}
* {color: gray;}
</style>
</head>
<body>
<h2>전체 선택자</h2>
<ol>
<li>스타일을 모든 요소에 적용</li>
<li>'*' 기호를 사용해서 표현</li>
<li>너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음</li>
</ol>
</body>
</html>2. 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
예제 코드
<html lang="en">
<head>
<title>요소 선택자</title>
<style>
h2 {font-size: 50px;}
p {color:dodgerblue;}
</style>
</head>
<body>
<h2>요소 선택자</h2>
<p>특정 요소가 쓰인 모든 요소에 스타일을 적용함</p>
<p><span>span 요소</span></p>
<p><strong>strong 요소</strong></p>
<p><ins>ins 요소</ins></p>
<p><mark>mark 요소</mark></p>
</body>
</html>3. 상속 선택자
- 부모 요소의 속성값이 자식 요소에게 전달되는 것
- https://www.w3.org/TR/CSS22/propidx.html
예제 코드
<html lang="en">
<head>
<title>상속</title>
<style>
div {
color: dodgerblue; /* 상속 됨*/
border: 3px dotted rosybrown; /* 상속 안 됨*/
padding: 30px; /* 상속 안 됨*/
}
</style>
</head>
<body>
<h2>상속</h2>
<div>
div 영역
<h3>상속이란</h3>
<p>부모 요소의 속성값이 자식 요소에게 전달되는 속성</p>
</div>
</body>
</html>4. id 선택자
- 웹 문서만의 특정 부분 스타일을 적용
- '#' 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
CSS
h2 {font-size: 30px;} // 안녕하세요, 반갑습니다 모두 적용
h2#hello {font-size: 20px;} // 안녕하세요 20px로 변경
#hello {color: pink;} // 안녕하세요 pink 색상으로 적용
HTML
<h2 id="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
예제 코드
<html lang="en">
<head>
<title>id 선택자</title>
<style>
#container {
background-color: darkkhaki;
padding: 20px;
width: 400px;
height: 200px;
text-align: center;
margin: 20px auto;
/*margin: (상하) (좌우);*/
}
#header {
/*
배경색: deepskyblue
가로: 200px
세로: 200px
글자 -> 가운데 정렬
박스 -> 가운데 정렬
*/
background-color: deepskyblue;
width: 200px;
height: 200px;
text-align: center;
margin: 20px auto;
line-height: 200px; /* 전체 높이만큼 설정하면 가운데로 옴 */
}
</style>
</head>
<body>
<h2>id 선택자</h2>
<div id="container">div 첫번째 영역</div>
<div id="header">div 두번째 영역</div>
</body>
</html>4. class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용
- '.' 기호를 사용해서 같은 class 이름을가진 요소에 스타일을 적용
CSS
h2 {font-size: 20px;} //안녕하세요, 반갑습니다 적용
h2.hello {color: deeppink;} // 안녕하세요 적용
.hello {color: deepskyblue;} // 안녕하세요, 하이 적용
p {font-weight: bold;} // 하이, 또 만났군요 적용HTML
<h2 class="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
<p class="hello">하이</p>
<p>또 만났군요</p>
예제 코드
<html lang="en">
<head>
<title>class 선택자</title>
<style>
.redStyle { color: red;}
.blueStyle { color: blue;}
#bigText { font-size: 40px;}
.boldStyle { font-weight: bold;}
</style>
</head>
<body>
<h2 id="bigText">class 선택자</h2>
<p><span class="redStyle boldStyle">클래스 선택자</span>는 특정 집단의 요소를 한번에 스타일을 적용합니다.</p>
<p><span class="redStyle">'.' 기호</span>를 사용해서 <span class="blueStyle">같은 class 이름</span>을 가진 요소에 스타일을 적용합니다</p>
</body>
</html>5. 그룹 선택자
- 여러 개의 요소를 나열하고 ','로 구분하여 스타일을 적용
h2, p {text-align: center;}
예제 코드
<html lang="en">
<head>
<title>그룹 선택자</title>
<style>
h1, p, h3, ul {
text-align: center;
}
h2 {
color: magenta;
font-size: 50px;
}
li {
display: inline-block;
margin-right: 40px;
font-weight: bold;
color: dodgerblue;
}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러 개의 요소를 나열하고 ','로 구분해 스타일을 적용</p>
<h3>선택자의 종류</h3>
<ul>
<li>전체 선택자</li>
<li>요소 선택자</li>
<li>아이디 선택자</li>
<li>클래스 선택자</li>
<li>그룹 선택자</li>
</ul>
</body>
</html>HTML 구조 확인하기
<html>
<head>
<title>테스트</title>
</head>
<body>
<h2>HTML의 구조</h2>
<p>HTML의 <b>구조</b>입니다</p>
</body>
</html> <html>
<head> <body>
<title> <h2> <p>
테스트 HTML의 구조 HTML의 <b> 입니다728x90
반응형
'KDT > HTML | CSS' 카테고리의 다른 글
| CSS의 색상(Color) (0) | 2023.03.28 |
|---|---|
| 선택자의 종류 2 (0) | 2023.03.28 |
| CSS란? (0) | 2023.03.28 |
| HTML의 디스플레이 (0) | 2023.03.27 |
| 폼 태그 (0) | 2023.03.24 |
