우선순위
작은 범위 잡는 것이 우선순위 제일 높음
id 선택자 > 클래스 선택자 > 타입 선택자 > 전체 선택자
선택자
s1 s2 : s1 요소에 포함된 s2 요소 성택
s1 > s2 : s1 요소의 자식 요소인 s2 선택
a:hover : 의사선택자
h1[title] : 속성 선택자, 특정한 속성 가지고 있는 요소 선택 (ex.체크박스에 체크된 애들 찾기)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css 기초문법</title>
<!-- 내부 스타일 시트 -->
<style>
/* 이 영역안에서는 CSS 문법 체계를 따름 */
/* 기본 문법 - 선택자{속성:값} */
/* 1. 타입(요소) 선택자 */
h2{color: blueviolet;}
p{color: violet; font-family: serif;}
/* 2. 전체 선택자 */
*{font-style: italic; color: olive;}
/* 3. 아이디 선택자 */
#p1{color: blue;}
/* 4. 클래스 선택자 */
.aa{color: tomato;}
/* 5. 선택자 그룹 */
li, a{color: thistle;}
/* 6. 자식, 자손 선택자
자손은 내 자식도 포함
*/
#ss > p{color: skyblue;}
#ss p {color: lightslategrey;}
/* 아래 둘은 완전 다른 표현임 */
p.aa{} /*p요소 안에 클래스 속성 aa*/
p .aa{} /*p요소 자손들 중에서 클래스 속성 aa*/
#kk ul.gg > li {color: palevioletred;}
#kk ul li {background-color: aqua;}
/* 7. 속성 선택자 */
p[class]{font-size: 30px;}
div[id="ss"]{font-weight: bold;}
/* 8. 의사(수도) 선택자 */
a:link{color: red;}
a:visited{color: brown;}
a:hover{color: darkseagreen;}
a:active{color: aqua;}
#kk ul li:first-child{color: beige;}
#kk ul li:nth-child(2){color: deeppink;}
#kk ul li:last-child{color: limegreen;}
/* 수식을 이용한 n번째 자식 요소 선택 */
table tr:nth-child(n){background-color: lavender;} /*자동 증가*/
table tr:nth-child(2n){background-color: lemonchiffon;} /*짝수*/
table tr:nth-child(2n+1){background-color: coral;} /*홀수*/
</style>
</head>
<body>
<h2 class="aa">CSS Selector Test</h2>
<p id="p1">Hello World</p>
<p class="aa">Nice to meet you</p>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<a href="">Naver</a>
<div id="ss">
<h4>Region</h4>
<p>재밌구나</p>
<div>
<p>사과</p>
<p>오렌지</p>
<p>바나나</p>
</div>
</div>
<div id="kk">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul class="gg">
<li>ppp</li>
<li>ooo</li>
<li>iii</li>
</ul>
</div>
<a href="https://www.naver.com/">네이버</a>
<br><br><br>
<table border="1">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
</table>
</body>
</html>
삽입 위치
외부 스타일 시트 : 외부에 만들고 링크 거는 것
내부 스타일 시트 : html 내부에 쓰는 것
인라인 스타일 : 요소 안에 쓰는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성 위치</title>
<!-- 스타일을 적용하는 3가지 방법 -->
<!-- 1. 외부 스타일 시트 -->
<!-- 2. 내부 스타일 시트 -->
<!-- 3. 인라인 스타일 시트 : 순서상관없이 최종적용되는 스타일 -->
<!-- 외부스타일시트 연결 -->
<link rel="stylesheet" href="./02_ex.css">
<!-- 내부스타일 시트는 가급적 <head>안에서 작성 -->
<style>
p{color: red;}
</style>
</head>
<body>
<!-- 인라인 스타일 : 요소안에 style속성으로 스타일링 -->
<p style="color: green;">Hello world</p>
<!-- 내부 스타일시트는 문서 어디서든 작성 가능함 -->
<style>
p{color: brown;}
</style>
</body>
</html>p{color: blueviolet;}
보조기억장치