선택자 Selector
- 스타일을 적용하기 위한 대상을 뜻하며, HTML요소를 사용할 수 있고 ID나 class형태로 정의할 수 있다.
- 선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~}
- 하나의 속성을 주석 --
선택자의 유형
1) 태그
HTML요소명을 선택자로 사용가능. (div, h1, input, body 등등)
h1 {background-color: aqua; color: darkblue;}
h2 {background-color: darkkhaki; color: indigo;}
input {border: 2px solid coral;}-> {border: 2px solid coral} / 선굵기 직선 선색상
2) #선택자 이름
본문에 적용할 때 id="선택자이름", 본문에 선택자이름을 한 번만 적용할 수 있다.
#Doctors0 {background-color: hotpink}
#Doctors1 {background-color: tomato;}
3) .선택자 이름
본문에 적용할 때 class="선택자이름", 본문에 선택자이름을 여러 번 적용할 수 있다.
.intro {background-color: darkseagreen;}<style> </style> 태그는 HTML문서에 여러 번 올 수 있다.
<head>
<style>
h1{background-color: aqua; color: darkblue;}
h2{background-color: darkkhaki; color: indigo;}
input {border: 2px solid coral;}
</style>
</head>
<body>
<h1>서울특별시</h1>
<h2>종로구</h2>
<h2>광진구</h2>
<h1>경기도</h1>
<h2>수원시</h2>
<h2>화성시</h2>
<hr>
<input type="text">
<input type="password">
<hr>
</body>
- id속성값은 식별자이기 때문에 중복해서 사용하는 것은 비추천
- id속성값은 중복되면 배열의 인덱스(순서)로 접근해야 한다.
- id단축키는 #
<style>
#Doctors0 {background-color: hotpink}
#Doctors1 {background-color: tomato;}
</style>
<body>
<div id="Doctors0">슬기로운 의사생활</div>
<div id="Doctors1">신서유기</div>
</body>
<style>
.intro {background-color: darkseagreen;}
</style>
<body>
<p class="intro">대한민국</p>
<p>사우디아라비아</p>
<span>콩고민주공화국</span>
<div class="intro">오스트레일리아</div>
</body>
'CSS' 카테고리의 다른 글
| [CSS] reset (1) | 2024.05.31 |
|---|---|
| [CSS] 다양한 selector (0) | 2024.05.31 |
| [CSS] External CSS (0) | 2024.05.31 |
| [CSS] Inline CSS (0) | 2024.05.31 |
| [CSS] 기본문법 (0) | 2024.05.31 |
