[포스코 x 코딩온] 웹개발 과정 1주차 회고 - 3 | css

3일차에는 css의 다양한 선택자에 대해서 배웠다.

css선택자는 크게 5가지로 구성된다.

기본

복합

가상 클래스

가상 요소

속성

첫번째 기본 선택자는 별도의 테크닉 없이 순수하게 무언가를 호출 할때 사용되는 선택자 입니다.

<div class="abc" id="abc"></div>

* : 전체선택자
div,li...등 : 태그선택자
.abc : 클래스선택자
#abc : id선택자

두번째 복합 선택자는 특수한 요소를 선택하고 싶을때 ! 기본적인 선택자로는 선택이 불가능한 경우에 사용합니다.

<div class="abc" id="abc">
	<span class="test1"></span>
    <span></span>
    <span></span>
</div>
<div class="def" id="def">
	<a></a>
</div>

div.abc : 일치선택자(div와 .abc를 동시에만족하는 요소 선택)
.def>a : 자식선택자(.def의 자식요소인 a를 선택>
.abc span : 후손선택자(.abc의 하위요소인 span선택 '띄어쓰기'가 선택자 기호)
.test1 + span : 다음 형제요소인 span 선택
.test1 ~ span : 다음 형제요소인 span 모두 선택

세번째 가상 클래스 선택자는 사용자의 행동에 따라 변화하는 가상 상황에서 요소 선택시 사용되며 각 요소의 상황과 사용자가 원하는 요소를 선택할때 사용된다. 또한 특정 요소를 부정할 때 사용한다.

<a href="#">hi</a>
<input type="text"/>

a:hover : a태그에 마우스를 올렸을때.
a:active : a태그를 클릭'중' 일때.(마우스버튼이 내려간)
input:focus : input태그가 포커스 되면 선택

가상 클래스 선택자는 'nth-child()'라는 속성도 가질수 있다.

<div class="fruits">
	<span>딸기<span>
    <span>오렌지<span>
    <div>수박</div>
    <p>망고</p>
    <h3>사과</h3>
</div>

.fruits span:first-child : .fruits의 span중 첫번째 자식
.fruits span:last-child : .fruits의 span중 마지막 자식
.fruits *:nth-child(n) : .fruits의 전체 자식중 n번째(n으로 수학적 계산 가능)
.fruits *:not(span) : .fruits에서 span이 아닌 태그 선택

네번째 가상요소 선택자는 선택된 요소의 앞,뒤에 별도의 content를 삽입하는 선택자다. 반드시 content 라는 요소를 사용해야 하며 content에는 ""의 빈값이라도 넣어주어야 한다.

div:after : 요소 뒤에 삽입
div:before : 요소 앞에 삽입

다섯번째 속성 선택자는 선택된 태그에 특정 속성을 선택자로 활용 할 수 있다.

<input type="text" placeholder="input" disabled />

[disabled] : disabled를 가진 태그 선택
[placeholder] : placeholder를 가진 태그 선택

css선택자를 사용할때 대부분 class나 id 혹은 nth-child를 많이 사용해왔는데 이로인해 class를 굳이 사용 할 필요가 없는 부분에 억지로 끼워 넣어서 사용한 경험이 많았고 이번에 배운 다양한 선택자들로 조금 더 가독성이 높은(?) css선택자를 활용 할 수 있을 것 같다.