작성일/수정일
2021-06-29 22:45:54 / 2021-06-29 22:45:54
02 선택자
01 태그선택자
02 전체선택자
<style>
* { color:red; }
div * { color:red; }
</style>
03 class 선택자
04 id 선택자
05 자손선택자 (하위선택자)
<style>
div h2 { color:red; }
</style>
<div>
<h2>선택자</h2>
<div>
<h2>선택자</h2>
</div>
</div>
06 자식선택자
<style>
div > h2 { color:red; }
</style>
<div>
<h1>선택자1</h1>
<h2>선택자2</h2><!-- 선택 -->
<nav>
<h2>선택자2</h2>
</nav>
</div>
07 인접형제선택자
<style>
div h1 + h2 { color:red; }
</style>
<div>
<h1>선택자1</h1>
<h2>선택자2</h2><!-- 선택 -->
<h2>선택자2</h2>
<nav>
<h2>선택자2</h2>
</nav>
</div>
<style>
div nav ~ h2 { color:red; }
</style>
<div>
<h1>선택자1</h1>
<h2>선택자2</h2>
<h2>선택자2</h2>
<nav>
<h2>선택자3</h2>
</nav>
<h2>선택자4</h2> <!-- 선택 -->
<h2>선택자5</h2> <!-- 선택 -->
</div>
08 그룹화(, )
<style>
#title, nav ~ h2 { color:red; }
</style>
09 속성선택자
<style>
[target] { text-decoration:none; }
[target="_blank"] { background-color:bule; color: white;}
</style>
<h1 id="tit">속성선택자</h1>
<h2>속성 선택자</h2>
<ul>
<li><a href="#" target="_blank">링크1</li>
<li><a href="#" target="_blank">링크2</li>
<li><a href="#" target="_self">링크3</li>
</ul>
<a href="mailto:relation_co_kr@naver.com">relation_co_kr@naver.com</a>
<style>
[target] { text-decoration:none; }
a[target] { text-decoration:none; } /* 자신중에~*/
a [target] { text-decoration:none; } /* 자식중에~*/
[target="_blank"] { background-color:bule; color: white;}
[target="_self"] { backgriund-color:red; color:white; }
[class^="link"] { list-style:none; } /* link1, link2 */
</style>
<h1 id="tit">속성선택자</h1>
<h2>속성 선택자</h2>
<ul>
<li class="st1"><a href="#" target="_blank">링크1</li>
<li class="link1"><a href="#" target="_blank">링크2</li>
<li class="link2"><a href="#" target="_self">링크3</li>
</ul>
<a href="mailto:relation_co_kr@naver.com">relation_co_kr@naver.com</a>
10 가상선택자
link, active, visited a 태그와 같이 사용.
hover 다른 태그와 같이 사용가능
focus input과 같이 사용가능.
<style>
a:link { text-decoration:none; }
a:hover { color:red; text-decation:underline; }
a:active { background-color:red; color:white; }
a:visited { color:silver; }
a:focus { background-color:blue; color:white; } /* outline:none; */
input:focus { background-color:red; color:white; }
</style>
<h1 id="tit">가상 선택자</h1>
<h2>가상 선택자</h2>
<ul>
<li class="st1"><a href="#" target="_blank">링크1</li>
<li class="link1"><a href="#" target="_blank">링크2</li>
<li class="link2"><a href="#" target="_self">링크3</li>
</ul>
<a href="mailto:relation_co_kr@naver.com">relation_co_kr@naver.com</a>
<input type="text" placeholder="이름입력">
11 의사요소 선택자
<style>
h1:before { content:'before '; color:red; }
h1:after { content:' after'; color:blue; }
h1:before { content:''; display :inline-block; width:15px; height:15px; background-color:red; margin-right:20px; }
</style>
</style>
<h1 id="title"> css 기본문법</h1>
<h2>의사요소선택자</h2>
12 구조선택자
<style>
li:first-child { text-decoration:underline; }
li:last-child { text-decoration:underline; }
li:nth-child(3) { text-decoration:underline; }
li:nth-child(2n) {background-color:silver; } /* 짝수만*/
li:nth-child(2n+1) {background-color:silver; } /* 홀수만 (n+4) 4번째부터 */
</style>
<h1>css 기본문법</h1>
<h2>구조선택자</h2>
<ul>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
</ul>
h1이외 모든 색상 변경
<style>
h1 { color:#000; }
:not(h1) { color: red; }
</style>
<h1>css 기본문법</h1>
<h2>구조선택자</h2>
<ul>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
<ll>리스트 아이템</li>
</ul>