1)class selector
.클래스명으로 선택 (.)을 앞에 붙여야 아이디인지를 구분할수 있다.
<title>스터디 코딩</title>
<style>
/* [data-value*="jeff"] {
color: green;
} */
.jeff {
color: red;
}
</style>
</head>
<body>
<!-- <script src="js/main.js"></script> -->
<h1 class="jeff">스터디 코딩</h1>
<h2>스터디 코딩</h2>
<h3>스터디 코딩</h3>
<h4 data-value="jaffjeff">스터디 코딩</h4>
<p data-value="jaffjeffjaff">스터디 코딩.</p>
</body>2)attribute ( 속성) selector
(속성): attr 속성을 가지는 모든 태그
a[target] { color: red; }a 태그에 target 이라는 속성을 가진 요소를 선택한다.
= <a href="#" target="_blank">link</a> 선택함
= <a href="#">link</a> 선택하지 않음[attribute="value"]
a[target="_blank"] { color: red; }a태그에 target = "_blank"라는 속성을 선택하게된다.
** target 이 반드시 _blank요소만 잡게 되니 주의!
ex)
= <a href="#" target="_blank">link</a> 선택함
= <a href="#" target="_self">link</a> 선택하지 않음
= <a href="#" target="_blankk">link</a> 선택하지 않음[attribute~="value"] ~ 확인 !
div[class~="apple"] { background-color: red; }apple 이라는 class 요소를 가진 요소를 선택하게 된다.
** 여러개의 class가 함께 지정이 되어 있어도, apple 를 가졌으면 선택하게 된다.
= <div class="apple">layer</div> 선택함
= <div class="pine apple">layer</div> 선택함
= <div class="pine-apple">layer</div> 선택하지 않음[attribute|="value"] | 확인 !
div[class|="layer"] { background-color: red; }layer라는 class로 시작하는 요소만 선택하되, 하이픈으로 구분해 더 많은, 더 다양한 요소를 선택할 수 있다.
= <div class="layer">layer</div> 선택함
= <div class="layer-red">layer</div> 선택함
= <div class="layer-blue">layer</div> 선택함
= <div class="layer yellow">layer</div> 선택하지 않음
= <div class="green layer">layer</div> 선택하지 않음[attribute^=value] ^ 확인!
div[class^="donghyun"] { background-color: red; }donghyun 이라는 class로 시작되는 요소를 전부 선택
= <div class="donghyun">layer</div> 선택함
= <div class="donghyun-yellow">layer</div> 선택함
= <div class="donghyun">layer</div> 선택함
= <div class="donghyun minimini">layer</div> 선택함
= <div class="yellow donghyun">layer</div> 선택하지 않음
= <div class="donghyun">layer</div> 선택하지 않음[attribute$=value] $ 확인
end라는 class로 끝나는 요소를 선택한다.
.pdf등을 값(value)으로 지정해 특정 파일만 선택하는 것도 가능하다.
= <div class="end">layer</div> 선택함
= <div class="start end">layer</div> 선택함
= <div class="ok_end">layer</div> 선택함
= <div class="end bye">layer</div> 선택하지 않음[attribute*=value] * 확인
wow라는 class를 가진 모든 요소를 선택한다.
class가 어떻게 조합이 되어도 wow만 완성되면 무조건 선택한다.
= <div class="wow">layer</div> 선택함
= <div class="wow ohoh">layer</div> 선택함
= <div class="wow-haha">layer</div> 선택함
= <div class="wwwwwow">layer</div> 선택함3) CSS selector 조합
- 태그 , 아이디 ,클래스 selector 를 조합해서 복합적으로 사용가능
- HTML 문서 특정 태그에 여러 클래스가 지정될 경우 ,다음과 같이 스페이스를 이용해서 여러 클래스를 설정할 수 있음
ex)
<!DOCTYPE html>
<html>
<head>
<style>h1.donghyun.studycoding#Lim{color :red}
</style>
</head>
<body>
<h1 class='donghyun studycoding' id='Lim'>Hello world </h1>
</body>
</html>여태 모르고 있던 css 셀렉터 공부를 할수있게 되어 의미 있는 시간을 갖게 되었다. 이렇게 정리를 하다보니 내가 이런것도 놓치고서 다른 기능이며 css 스타일을 주고있다는게 속상하다... 현재 공부한 토대로 배포는 했지만 스타일 속성이 전부 마음에 안들며 반응형 또한 적용을 제대로 하지 못했다.
얼른 공부를 좀더 해서 전부 싹 뜯어 고쳐볼 생각이다.
