CSS_2강_1_선택자(태그, ★★★id, class★★★)

열라뽕따히·2024년 3월 7일

CSS

목록 보기
8/20

선택자의 종류

태그 선택자

: 특정 태그를 사용한 요소에 스타일 적용

id 선택자

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

class 선택자

  • 특정 요소에 스타일 적용
  • 같은 클래스의 이름을 여러 요소에서 중복해서 사용할 수 있음
  • 가장 많이 사용되는 선택지
    ex) class="main_text" ==> .main_text





id, class 선택자 예시

=============================코드=============================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
		
		#title{   /* id가 타이틀인 것을 찾아라! */
			color: blue;
		}
		
		.main_text {
			font-weight: bold;
			font-size: 20px;
			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>

=============================실행=============================

0개의 댓글