[CSS3] 선택자의 종류(태그, class, id)

<선택자의 종류>

* 태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용.

* class 선택자 : 특정 부분에 스타일 적용.
- 같은 클래스의 이름을 여러 요소에 중복해서 적용할 수 있음.
예) class="main_text" ==> .main_text

* id 선택자 : 특정 부분에 스타일 적용.
    - 웹 문서에서 고유한 식별자를 정의할 때 사용.
    - 대체적으로 큰 골격의 이름에 사용하는 것이 좋음.
    - 같은 id 이름을 중복해서 사용하지 못함. 하나의 요소에 여러개의 id를 동시에 사용하지 못함.
    - 대체적으로 상단 헤더, 왼쪽 메뉴, 가운데 컨텐츠 영역, 하단 footer 영역에 사용.
    예) id="title" ==> #title

<class, id 선택자>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#title {
		color: blue;
	}
	
	.main_text {
		font-weight: bold;
		color: red;
	}
</style>
</head>
<body>
 <h1 id="title">제목1</h1>
 <h1>제목2</h1>
 <hr>
 
 <p class="main_text">본문1</p>
 <p>본문2</p>
 <p class="main_text">본문3</p>
 <p>본문4</p>
 <p class="main_text">본문5</p>
</body>
</html>

<둘 이상의 요소에 같은 스타일을 적용하는 방법>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/*둘 이상의 요소에 같은 스타일을 적용하는 방법. 콤마(,) 사용*/
	h1, h2 {
		font-style: italic;
		font-weight: bold;
		text-decoration: underline; /* 텍스트에 밑줄을 적용 */
		
	}
</style>
</head>
<body>
	<h1>나보다 동료의 생각이 더 옳을 수 있다는 믿음을 가집니다.</h1>
	<h2>Trust to Trust</h2>
</body>
</html>

저작자표시

'Front > CSS' 카테고리의 다른 글

[CSS3] margin과 padding (여백) (0)	2021.04.22
[CSS3] display 속성 (0)	2021.04.22
[CSS3] em 단위 (0)	2021.04.22
[CSS3] 블록 레벨, 인라인 레벨 (0)	2021.04.20
[CSS3] CSS 기본 개념 (0)	2021.04.20