알아두면 좋을 CSS 규칙

Yerim Son·2024년 2월 22일

1. 형제 선택자(Adjacent Sibling Selector)

특정 클래스를 가진 요소들 중에서 서로 인접한 형제 요소들을 선택한다.

ex)

.TodoItem + .TodoItem {
	padding: 1rem;
}

.TodoItem + .TodoItem은 .TodoItem 클래스를 가진 요소 뒤에 바로 또다른 .TodoItem 클래스를 가진 요소가 나타날 때 적용된다.
특정 클래스를 가진 연속된 요소들에 스타일을 적용할 때 쓰인다.
map으로 이용해서 뿌리는 경우에 유용하게 쓸 수 있다.

2. 후손 선택자 (Descendant Selector)

.parentElement .childElement {
    /* 스타일 */
}

특정 부모 요소 아래에 있는 모든 자식 요소를 선택하는 규칙이다.

3. 자식 선택자 (Child Selector)

.parentElement > .childElement {
    /* 스타일 */
}

특정 부모 요소의 직계 자식 요소만 선택하는 규칙.

4. 의사(가상) 클래스 (Pseudo(슈도)-classes)

.element:hover {
    /* 마우스를 올렸을 때의 스타일 */
}
.element:first-child {
    /* 첫 번째 자식 요소의 스타일 */
}

사용자 상호작용이나 요소의 상태에 따라 스타일을 적용.
:hover, :first-child 등이 대표적인 가상 클래스다.

5. 가상 요소 (Pseudo-elements)

.element::before {
    content: "내용";
    /* 요소의 내용 앞에 내용을 추가 */
}
.element::after {
    content: "내용";
    /* 요소의 내용 뒤에 내용을 추가 */
}

가상 요소는 문서의 특정 부분에 스타일을 추가하는 데 사용된다.
주로 요소의 내용 앞이나 뒤에 내용을 추가하는데 사용된다.

6. 빈 엘리먼트 삭제 (Empty Element Removal)

.element:empty {
    display: none;
}

내용이 비어 있는 요소를 선택하여 화면에 표시하지 않도록 한다.

7. 기타

1) 요소 자체에 직접 스타일 적용

1. 태그 이름을 사용한 스타일 적용

img {
    /* 이미지에 스타일 적용 */
}

2. 태그 속성을 사용한 스타일 적용

input[type="text"] {
    /* 텍스트 입력 필드에 스타일 적용 */
}

3. 의사 클래스 및 가상 요소를 사용한 스타일 적용

a:hover {
    /* 링크에 마우스를 올렸을 때의 스타일 */
}

li::before {
    /* 리스트 아이템 앞에 내용을 추가하는 가상 요소에 스타일 적용 */
}

4. 태그의 부모 요소에 따른 스타일 적용

.parentElement img {
    /* 특정 부모 요소 안에 있는 이미지에 스타일 적용 */
}

2) 클래스명 공백 관련

HTML 요소의 class 속성에 공백으로 구분된 여러 개의 클래스명을 지정할 수 있다.

따라서 className="content checked borderline confirmed"와 같이 클래스명이 공백으로 구분되어 있는 경우, 해당 요소는 .content, .checked, .borderline, .confirmed 네 가지 클래스를 모두 가지게 된다.

CSS에서는 공백으로 구분된 클래스명을 선택할 때는 각 클래스를 독립적인 클래스로 해석한다. 따라서 .content.checked와 .borderline.confirmed와 같이 동시에 적용된 클래스를 가진 요소를 선택할 수 있다.