● [선택자 Selector]
- 스타일을 적용하기 위한 대상을 뜻하며,
HTML 요소를 사용할 수도 있고 ID나 class 형태로 정의할 수도 있다.
- 선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~}
- 하나의 속성을 주석 --
● [선택자의 유형]
1) 태그: HTML요소명을 선택자로 사용가능. div, h1, input, body등등
2) #선택자 이름: 본문에 적용할 때 id="선택자이름", 본문에 선택자이름을 한번만 적용할 수 있다
3) .선택자이름 : 본문에 적용할 때 class="선택자이름", 본문에 선택자이름을 여러번 적용할 수 있다
<!DOCTYPE html>
<html lang="ko">
<head>
<title> internal css </title>
<style>
h1{background-color: aqua;color: deepskyblue;}
h2{background-color: brown;color: aliceblue; font-family: sans-serif; font-weight: lighter;
}
input {border: 1px solid magenta;/*선굵기 직선 선색상*/
}
#myId0{background-color: blanchedalmond;color: burlywood;
}
#myId1{background-color: dimgray;font-size: large;font-style: italic;
}
.intro{background-color: darkkhaki;}
</style>
</head>
<body>
<!-- <style> </style> 태그-->
<!-- 참조 https://www.w3schools.com/css/css_selectors.asp -->
<h1>internal css</h1>
<h2>종로구</h2>
<h2>강남구</h2>
<h1>경기</h1>
<h2>수원시</h2>
<h2>성남시</h2>
<hr>
<input type="text">
<input type="password">
<hr>
<!-- id속성값은 식별자이기 때문에 중복해서 사용하는 것은 비추천!! -->
<!-- id속성값이 중복되면 배열의 인덱스(순서)로 접근해야 한다 -->
<div id="myId0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="myId1">Curabitur arcu sapien, egestas nec metus id, rutrum condimentum tellus.</div>
<hr>
<p class="intro">대한민국</p>
<p>오필승 코리아</p>
<span>제주도</span>
<div class="intro">강남구 역삼동</div>
</body>
</html>