1. CSS의 구성과 선언 방법 등 기본 사용법
selector { property : value; }inline : html 태그 안에 적용(최우선 적용) html 안에 css가 들어있으면 유지보수가 어렵다.
internal: 별도의 css 파일을 관리하지 않아도 된다.(별도의 브라우저에 요청을 보내지 않음)
external: 외부파일(.css)로 지정하기
<link rel="style" >
in->inter->exter 순으로 스타일이 적용됨
.html
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
font-size:20px;
border:1px solid slategray;
}
</style>
<link rel="stylesheet" href="css_basic.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<p style="color:bule;">Lorem ipsum dolor sitamet, consectetur adipisicing elit.</p>
</div>
</body>
</html>.css
dev>p{
border:1px solid slategray;
}
2. CSS에서 상속 : 상위에서 설정된 스타일을 하위에서도 사용한다.
div>ul>li*2
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
internal
<style>
div ul{
color:red;
}
</style>>>
<!DOCTYPE html>
<html>
<head>
<style>
div ul li div p {
color:red;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span>my text is upper!</span>
<ul>
<li>
<span>my text is dummy</span>
<div>
<P>
Lorem
</P>
</div>
</li>
<li></li>
</ul>
</div>
</body>
</html>* padding, border 과 같은 배치와 관련된 속성은 상속받지 않는다.
3. 캐스케이딩: 한 요소에 대한 여러가지 선언이 이뤄지는 경우 충돌을 피할 수 있게끔 computed style이 결정되는 방식
(1) 나중에 선언된 게 적용
(2) 더 구체적으로 표현된 것이 적용
(3) #a .b ID가 우선된다.
css specificity 를 검색하면 적용되는 점수가 나옴
4. CSS selector 를 활용한 DOM 탐색: 특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 한다.
tag, id class html 태그 속성을 이용해 찾는다.
그룹 선택 (,)
하위요소 선택 ( )
자식 선택 (>)
n번째 자식 요소 선택 (nth-child)
