CSS 스타일 입히기
Cascading : 계단식, 덧칠하기식, HTML태그의 원래 스타일을 Cascading
CSS 속성 : 스타일을 입힐 수있는 가지수 ? 속성수 ?
배경/경계선/폰트/색상/마진-left,top/패딩/박싱/박스라운드-img,color,repeat
대상선별 : 선택자(selector)사용
선택자 기본요소 : id, class , element
- a : <a></a> 태그
- .a : <*class ="a">
- *#a 또는 #a : <*id="a">
- aside.a : <aside class="a">
선택자
- #a{color: green;} : a라는 id를 가지는 엘리먼트에 색상을 적용
- .a{color: green;} : a라는 class에 포함된 엘리먼트에 색상을 적용
- a{color: green;} : a라는 태그를 대상으로 색상을 적용
연산자
- A B : 공백자체가 연산을 의미. A안에 포함된 모든B.
- A>B : A안에 B자식들만 모두선택
- A+B : B의 형제 바로 밑동생
- A~B : A의 동생들 중에 B만 적용
#aa+nav+section : nav의section만 고른것
셀럭터를 이용한 엘리먼트 선택
.h1{ color:red; }
class 명이 h1인 태그들을 레드로 적용
aside.h1{ color:red; }
class 명이 h1이면서 aside태그를 가지고있는것 레드로 적용
h1{ color : red; }
h1의 모든태그에 빨간색 적용
*h1{ color ; red; }와 같다.
section h1{ color : red; }
section안에 포함된 h1 모두를 찾는다.
section > h1 {color: red; }
section태그의 h1자식만 적용
a.first + span : 바로 밑동생으로서의 span 없음
h1 : 범위가 넓으므로 우선권이없음
.h1 , #h2 범위가 좁혀져 우선권생김
우선순위가 같다면 나중에 적용한게 결과로나온다
h1.h1보다 복합연산자가 더높다
태그명이 속성을 가질땐 우선순위높다
h1{ } :기본 태그이므로 가장 우선순위낮음
.h1{ } : h1클래스로 좁혀짐
h1[lang="ko"] {} : <*lang="ko"> 특정랭귀지속성을 가진 h1태그 , h1에 랭귀지속성 한정사가 한번더 들어가서 우선선위높음
HTML
a[href^="#"]
-
dir
ltr : left to right 왼쪽부터 쓰기
rtl : right to left 오른쪽부터 쓰기
a[dir='rtl']
이 속성에다가도 스타일을 입힐수있다
/* Links with "example" anywhere in the URL */
a[href*="example"] { background-color: silver; }
example이 포함된것들만 비교가능
/* Links with "insensitive" anywhere in the URL,
regardless of capitalization */
a[href*="insensitive" i] { color: cyan;}
i : 대소문자구별하지않겠다
/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] { color: pink;}
s : 대소문자를 가린다.
/* Links that end in ".org" */
a[href$=".org"] { color: red;}
.org로 끝나는것
/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] { color: green;}
"https" &".org"
두가지속성만족시
연습
- A B : 공백자체가 연산을 의미. A안에 포함된 B의 하위요소. A의 자손만 (B의 자식)
Descendant selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aa div{
color : red;
}
</style>
</head>
<body>
<div class="aa">
<p>자식1</p>
<div>
<p>aa의 자손</p>
</div>
<p>자식2</p>
<div>
<p>자손2</p>
<ul>
<li>자손3</li>
<li>자손3</li>
<li>자손3</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section>p{
color : red;
}
</style>
</head>
<body>
<div class="aa">
<p>Child 1</p>
<div>
<p>Descendant1</p>
<section>
<p>Descendant2</p>
<ul>
<li>Descendant3</li>
<li>Descendant3</li>
<li>Descendant3</li>
</ul>
</section>
</div>
<p>Child 2</p>
<section>
<p>Descendant2</p>
<ul>
<li>Descendant3</li>
<li>Descendant3</li>
<li>Descendant3</li>
</ul>
</section>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div+p{
color : red;
}
</style>
</head>
<body>
<div class="aa">
<p>Child 1</p>
<div>
<p>Descendant1</p>
<section>
<p>Descendant2</p>
<ul>
<li>Descendant3</li>
<li>Descendant3</li>
<li>Descendant3</li>
</ul>
</section>
</div>
<p>Child 2</p>
<p>Child 3</p>
<section>
<p>Descendant2</p>
<ul>
<li>Descendant3</li>
<li>Descendant3</li>
<li>Descendant3</li>
</ul>
</section>
</div>
</body>
</html>
