TIL08.CSS 활용

css에서 스타일링할 요소를 결정하는 '선택자'에 대해 알아보자.

선택자 정리

자식(children)

/* 'div1'클래스를 갖고 잇는 요소의 자식 중 모든 `i`태그*/
.div1 i {
    color: blue;
}

직속 자식(direct children)

/* 'div1'클래스를 갖고있는 요소의 직속 자식 중 모든 `i`태그*/
.div1 > i {
	color: blue;
}

복수선택

/*'one'이나 'two'클래스를 가지고 있는 태그 모두 선택*/
.one, two {
	color: blue;
}

여러조건

/*'one'클래스와 'two'클래스 동시에 가지고 있는 태그 선택*/
.one.two {
	color: blue;
}

가상 클래스(pseudo-class): 콜론(:)을 사용하여 '가상 클래스'선택

/*.div1의 자식은 <p>태그 중 2번째*/
.div1 p:nth-child(2) {
	color: blue;
}
/*.div1의 자식 중 마지막 자식은 적용시키지 않는 <p>태그*/
.div1 p:not(:last-child) {
	color: blue;
}

마우스 오버(hover)

/*마우스가 h1태그에 올라갔을 때 색*/
h1:hover {
	color: green;
}

---

CSS상속

부모 요소의 속성들을 자식들한테 넘겨주는 것을 말한다. 많은 속성들이 적용되지만,
<a>태그같은 경우에는 color속성이 상속되지 않는다. 억지로 상속을 받아오기 위해서는 해당 속성에 inherit값을 쓰면 가능하다.

div1 {
	color: orange;
}
.div1 a {
	color: inherit;
}

css의 단위들

px: 절대적인 값. 다른 요소의 값에 영향을 받지 않는다.
rem: 상대적인 값. 오직 html태그의 font-size에만 영향을 받는다. 2rem은 font-size의 2배 크기가 된다.
em: 상대적인 값. 자기 자신의 font-size를 기준으로 정해진다. 2em은 자기자신의 font-size의 2배 크기이다. 따로 정해주지 않으면, 상위 요소에서 상속받은 값을 기준으로 한다.
percent(%): 상대적인 값. 어느 항목에서 쓰이냐에 따라 다른 기준이 적용된다.
font-size에서 %가 쓰일 경우, 상위요소의 size에 곱해주는 방식으로 계산되고, margin이나 padding의 단위로 사용될 경우, 상위 요소의 width기준으로 계산된다.
특이한 점은 세로속성(margin-top,padding-bottom)을 조절할 때에도 상위요소의 height가 아닌 width를 기준으로 계산된다.