css 적용
1) 내부 스타일 시트
<head>태그 안에 <style>태그를 사용
2) 외부 스타일 시트
style.css 생성 후 <head>안에 <link>태그를 사용하여 불러와서 사용
<link href="css/style.css" rel="stylesheet">
3) 인라인
html요소 내부에 style속성을 사용하여 css를 적용
ex) <div style="속성:속성값;"></div>
선택자란?
1) tag선택자 - 태그명으로 선택
ex) div{ color: red; }
2) id선택자 - id명으로 선택
ex) #box2 { color: red; }
3) class선택자 - class명으로 선택
ex) .box{ color: red; }
<div>div1</div>
<div id="box2" class="box">div2</div>
<div class="box">div3</div>
4) 하위 선택자 A B
5) 자식 선택자 A > B
6) 형제 선택자 A + B
7) 연속 선택자 A, B
8) 모든 태그 선택자 *
9) ※가상 선택자 (띄어쓰기 주의)
a:link 방문하지 않은 링크
a:visited 방문했던 링크
※ a:hover 마우스가 올려진 링크
a:active 클릭하는 순간 링크
10) 가상요소 선택자 (별로 안쓰임)
:nth-child()
:first-child
:last-child
:only-child
:nth-of-type()
:first-of-type
:last-of-type
:only-of-type
:not(:last-child)
11) 속성선택자
[속성명]
a[title] { color: red; } ->②③
href 속성이 http로 시작하는 a요소를 선택:
a[href^='http'] ->②③
href 속성이 html로 끝나는 a요소를 선택:
a[href$='html'] ->④
href 속성에 naver가 들어있는 a요소를 선택:
a[href*='naver'] ->②
a[href='http://google.com'] ->③
input[type='text'] { } ->없음
①<div title="div">div</div>
②<a href="http://naver.com" title="바로가기1">바로가기1</a>
③<a href="http://google.com" title="바로가기2">바로가기2</a>
④<a href="sub.html">바로가기3</a>
'개발이 좋아서 > CSS가 좋아서' 카테고리의 다른 글
| css - background (0) | 2022.04.08 |
|---|---|
| css - boxmodel/boxsize, padding, margin, table (0) | 2022.04.06 |
| css - 색상값 (0) | 2022.04.06 |
| css - 텍스트 관련 스타일 속성 (0) | 2022.04.06 |
| css 기초정리 (0) | 2022.03.18 |