상세 컨텐츠

본문 제목

[CSS 기초] 주요 선택자

IT/HTML 및 CSS

by SINAFLA 2021. 4. 13. 12:32

본문

반응형

전체 선택자 - 모든 요소에 스타일 적용하기

  • 전체 선택자(uniserveal selector)는 말 그대로 스타일을 모든 요소에 적용할 때 사용한다.
  • 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다.
* {속성: 속성 값; 속성: 속성 값; ... }

 

태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기

  • 많은 요소에 스타일을 적용하는 태그 선택자(tag selector)는 특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
p {
	font-size: 12px;
	font-family: 돋움;
}
<html>
<head>
	<meta charset="utf-8">
	<style>
		h2 {
		 color: blue;
		}
		p {
			font-size: 12px;
			margin-left: 20px;
		}
	</style>
</head>
<body>
	<h2>블루베리에 관한 연구</h2>
	<p>블루베리는 몸에 좋은 연구효과가 있다.</p>
</body>
</html>

 

클래스 선택자 - 특정 부분에 스타일 적용하기

  • 같은 태그라도 특정 부분에서만 스타일을 적용할 때 사용하는 것이 클래스 선택자(class selector)다.
  • 클래스 선택자는 태그 대신 클래스 이름을 사용하는데 클래스 이름은 나중에 기억하기 쉬운 이름을 임의로 지정하면 된다.
.bluetext {
	color: blue;
}
<html>
<head>
	<meta charset="utf-8">
	<style>
		.bluetext { 
			color: blue;
		}
	</style>
</head>
<body>
	<h2 class="bluetext">애국가</h2>
	<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
</body>
</html>
  • 한 꺼번에 둘 이상의 클래스 스타일을 적용할 수 있다. 이 경우에는 공백으로 구분해서 두 개의 스타일을 나란히 적을 수 있다.

 

id 선택자 - 특정 부분에 스타일 적용하기

  • 클래스와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용한다.
  • 마침표 (.) 대신 # 기호를 사용한다.
  • 클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자는 문서 안에서 여러 번 적용할 수 있지만 id 선택자는 스타일을 한 번만 적용할 수 있다.
<html>
<head>
	<meta charset="utf-8">
	<style>
		#container {
			width: 600px;
			padding: 15px;
			border: 1px dotted gray;
		}
	</style>
</head>
<body>
	<div id="container">
		<h2>애국가</h2>
		<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
	</div>
</body>
</html>

 

그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기

  • 선택자를 이용해 스타일을 적의하다 보면 여러 선택자에 같은 스타일이 사용되는 경우가 있 다.
  • 이럴 때는 쉼표(,)를 구분해 여러 선택자를 나열한 후 스타일은 한번만 정의하면 소스가 간단해진다.
h1 {
	text-align: center;
}
h2 {
	text-align: center;
}

h1, h2 {
	text-align: center;
}

 

 

 

반응형

관련글 더보기

댓글 영역