코린이

1. HTML에서 외부 CSS파일 연동

rel = relationship 관계

href = hyper reference 하이퍼 참조

<link rel="stylesheet" href="style.css">

2. CSS 규칙

h3 {
  color: red;
}

선택자 {
  속성: 속성값; (속성과 속성값을 합쳐 CSS선언)
}

3. 선택자

id를 선택자로 쓸때는 #선택자

id는 중복이 안된다.

<div id="sample"></div>

#sample {
  background-color: red;
}

class를 선택자로 쓸때는 #선택자

class는 중복 선언이 가능하다.

<div class="sample2"></div>
<a class="sample2"></a>

.sample2 {
  color: red;
}

선택자 목록

.sample1,
.sample2 {
	color: red;
}

여러 선택자를 동시에 갖고 있는 요소를 선택하는 경우

<p id="sample-id" class="sample-class"></p>

<a class="sample-class1 sample-class2"></a>

p#sample-id.sample-class {
	background-color: red;
}

.sample-class1.sample-class2 {
	background-color: red;
}

부모태그 안의 자식태그 선택 (자식 결합자)

<div class="parents">
    <div clss="children">
    </div>
</div>

.parents > .children {
	background-color: red;
}

자손결합자

.ancestor .decendant {
	background-color: red;
}