🌷 CSS(0) 요소 선택하기

보기 좋은 떡이 먹기도 좋다.

아름다움에 대한 선망은 인간이 본능적으로 지니고 있는 속성이고 그것은 웹 문서에도 마찬가지이다.

아무리 정보를 담는 문서라고 하지만 지저분하고 난잡하게 쓰여져 있다면 참 보기 싫을 것 같다.

웹 문서도 내가 만든 작품이나 다름 없는데, 그것을 추한 모습으로 남기기는 싫다. 페이지를 장식해주는 CSS에 대해 알아보자.

선택자

HTML은 다양한 요소가 관계를 맺는 형태로 구성된다. 그렇다면 요소를 꾸며주고 싶은데 해당 요소를 어떻게 브라우저에 알려줘야 할까? 이때 사용되는 게 선택자다.

요소에 class나 id 등 속성을 부여하거나 요소의 관계, 또는 요소 그 자체를 선택해 브라우저에게 알려주는 선택자는 CSS에서 빼놓을 수 없는 중요한 도구이다.

*, tag, class, id

*는 전체 선택자다. 모든 요소를 선택하는 만큼 범용적인 속성을 줄 때 유용하다. tag(tagname), class(.)는 같은 tag, class를 가진 요소들을 모두 선택하고, id(#)는 단 하나의 요소를 선택한다.(id는 중복 부여가 불가능하기 때문)

* {
	margin: 0;
}

div {
	color: gray;
}

.container {
	background-color: black;
}

#box {
	color: blue;
}

복합 선택자

div.container {
	background-color: yellow;
}

다음 구문은 복합 선택자다. div 태그 중 container class를 가지는 요소를 선택한다.

.containerdiv {
	background-color: gray;
}

다음과 같은 구문은 CSS 파서에서 containerdiv 클래스로 인식한다. 태그 선택자는 시작 기호가 없기 때문에 앞쪽에 붙이는 게 올바르다.

자식, 하위

div > span {
	color: blue;
}

div span {
	color: red;
}

>는 자식 선택자다. 한 계층 아래에 있는 자식들을 선택한다. 두 선택자 사이에 공백을 넣으면 뒤에 있는 선택자가 하위 선택자로 작용하며, 자식과 다르게 계층 관계없이 하위 모든 요소들을 선택한다.

형제

div + p {
	color: red;
}

div ~ p {
	color: blue;
}

형제 선택자는 인접한 요소간의 관계를 통해 선택해준다. +는 바로 인접한 형제(동생)를 선택하고, ~는 같은 계층에 있는 형제들을 모두 선택한다.

가상 클래스 선택자

가상 '클래스' 선택자다. 임의로 명시해놓은 것이 아니고 특정 상태에 따라 선택되고, 추상 클래스 선택자라고도 한다.

input:hover {
	font-size: 1.5rem;
}

div.active {
	background-color: yellow;
}

다음과 같이 쓰이며 형제 중 몇 번째 형제인지 등도 선택 가능하다. 모든 속성을 외우기란 비효율적이니 그때그때 필요한 선택자를 찾아서 쓰자.

가상 요소 선택자

div::before {
	content: "hello "
}

div::after {
	content: "World!!"
}

before와 after는 content 속성과 함께 쓰인다. 각각 앞, 뒤로 content를 추가해주며 inline 속성을 가지고 있다. 항목 사이에 구분선을 넣는데 유용하다.

::first-line, ::first-letter 등도 있음.

속성 선택자

input[disabled] {
	color: gray;
}

input[type="text] {
	font-size: 1.5rem;
}

div[data-type="goods"] {
	color: white;
}

특정 요소의 속성에 따라 스타일을 줄 수 있다. 이 역시 다양한 속성이 있는 만큼 적재적소에 속성들을 살피며 써야 한다.

선택자 우선순위

각각의 선택자들은 우선순위를 가지고 있고, 만약 우선순위 같은 선택자라면 나중에 선언한 스타일이 적용된다.

div {
	background-color: red !important;
}

!important 규칙은 가장 높은 우선순위를 갖는다. 모든 스타일 선언 중 예외적으로 높은 명시도를 설정한다.

하지만 !important의 사용은 자제하는 편이 좋은데, 거대한 CSS 파일에서는 다른 값을 덮어씌우는 원하지 않는 결과를 불러올 수 있기 때문이다.

important -> inline -> id -> class -> tag -> * 순으로 우선순위가 낮아진다.