728x90
CSS
STYLE
- margin 여백
선택자(selector)
class 선택자
- <head></head>태그 안에 <style></style>태그 추가 후 그 안에 .(class 이름){변경 사항} 하면 다 바꿀 수 있음
<head>
<style>
.js{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<span class="js">JavaScript</span>는 자바스크립트이다. <span class="js">JavaScript</span>는 자바스크립트이다.
<span class="js">JavaScript</span>는 자바스크립트이다. <span class="js">JavaScript</span>는 자바스크립트이다.
<span class="js">JavaScript</span>는 자바스크립트이다. <span class="js">JavaScript</span>는 자바스크립트이다.
</body>
id 선택자
- <head></head>태그 안에 <style></style>태그 추가 후 그 안에 #(id 이름){변경 사항} 하면 다 바꿀 수 있음
<head>
<style>
.js{
font-weight: bold;
color: red;
}
#first{
color: green;
}
</style>
</head>
<body>
<span id="first" class="js">JavaScript</span>는 자바스크립트이다. <span class="js">JavaScript</span>는 자바스크립트이다.
<span class="js">JavaScript</span>는 자바스크립트이다. <span class="js">JavaScript</span>는 자바스크립트이다.
<span class="js">JavaScript</span>는 자바스크립트이다. <span class="js">JavaScript</span>는 자바스크립트이다.
</body>
</html>
태그 선택자
- <head></head>태그 안에 <style></style>태그 추가 후 그 안에 (span등 태그이름){변경 사항} 하면 다 바꿀 수 있음
<head>
<style>
.js{
font-weight: bold;
color: red;
}
#first{
color: green;
}
span{
color: blue;
}
</style>
</head>
<body>
<span id="first" class="js">JavaScript</span>는 <span>자바스크립트</span>이다. <span class="js">JavaScript</span>는 <span>자바스크립트</span>이다.
<span class="js">JavaScript</span>는 <span>자바스크립트</span>이다. <span class="js">JavaScript</span>는 <span>자바스크립트</span>이다.
<span class="js">JavaScript</span>는 <span>자바스크립트</span>이다. <span class="js">JavaScript</span>는 <span>자바스크립트</span>이다.
</body>
class와 id, 태그 선택자의 차이
class → 뭔가를 Grouping한다는 뜻
id → 어떤 한가지 대상을 식별한다는 뜻
따라서, id는 절대로 중복되지 않아야 함
- class 선택자가 더 포괄적임. 여러가지 선택 가능
- id 선택자는 무언가를 더 정확하게 타겟팅할 수 있음. 예외 처리 가능
- class 위에 id를 얹어서 만드는 것이 효과적임
💡 우선 순위 : id > class > 태그
728x90