[Front-End] css 기본적인 문법 정리

자주 사용되는 속성

1. width: 요소의 너비를 지정합니다.
2. height: 요소의 높이를 지정합니다.
3. background-color: 요소의 배경 색상을 지정합니다.
4. transition: 전환 효과를 적용할 때 사용합니다. (예: transition: 1s;)
5. display: 요소의 디스플레이 유형을 지정합니다. (예: display: block;은 inline 요소를 block 요소로 전환)
6. position: 요소의 위치를 지정합니다. (예: position: fixed;는 화면의 viewport를 기준으로 배치)

---

가상 클래스 선택자

선택자 뒤에 :을 사용하여 가상 클래스 선택자를 지정합니다.

1. hover: 선택자 요소에 마우스 커서가 올라가 있는 동안 선택.
2. active: 선택자 요소를 클릭하고 있는 동안 선택.
3. focus: 선택자 요소에 포커스되면 선택. 일반적으로 input 태그에 사용됩니다.
4. first-child: 선택자가 형제 요소 중 첫째라면 선택.
5. last-child: 선택자가 형제 요소 중 마지막이라면 선택.
6. nth-child(n): 선택자가 형제 요소 중 (n)번째라면 선택.
   • 예: nth-child(2n)은 2의 배수 번째 요소를 선택. n은 0부터 시작하는 Zero-Based Numbering입니다.
7. not: 괄호 안의 선택자는 제외하고 나머지 요소를 선택.
   • 예: .fruits *:not(span)은 .fruits 클래스 하위의 모든 요소 중 span을 제외하고 선택.

---

가상 요소

선택자 뒤에 ::를 사용하여 가상 요소를 지정합니다.

1. before: 선택자 요소의 내부 앞에 내용(content)을 삽입.
2. after: 선택자 요소의 내부 뒤에 내용(content)을 삽입.

Note: before와 after 가상 요소 선택자를 사용할 때는 content 속성을 반드시 지정해야 합니다. 예를 들어, content 속성을 빈 문자열로 두더라도 속성을 반드시 설정해야 합니다.

.box::after {
    content: "뒤!";
}

---

속성 선택자

대괄호를 사용하여 속성을 선택합니다.

• 자주 사용되는 속성은 disabled입니다.
• type 속성에 대한 선택은 자제하는 편이 좋습니다.

예시:

[type="password"]
[disabled]
[data-fruits-name]

data-fruits-name="apple"처럼 data-로 시작하는 속성은 HTML에서 데이터 속성(data attributes)이라고 합니다. 이 속성은 HTML 요소에 사용자 정의 데이터를 저장할 때 사용됩니다. HTML5에서 도입되었으며, JavaScript에서 getAttribute 메서드나 dataset 객체를 통해 접근하고 조작할 수 있습니다.

---

스타일 상속

상속되는 CSS 속성들은 대부분 글자/문자 관련 속성입니다 (모든 글자/문자 속성이 상속되는 것은 아님).

1. font-style: 글자 기울기.
2. font-weight: 글자 두께.
3. font-size: 글자 크기.
4. line-height: 줄 높이.
5. font-family: 폰트(서체).
6. color: 글자 색상.
7. text-align: 정렬.

강제 상속

.parent {
    width: 300px;
    height: 200px;
    background-color: orange;
}
.child {
    width: 100px;
    height: inherit; /* 강제 상속되어 200px로 지정됨 */
    background-color: red;
}

---

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법입니다.

1. 점수가 높은 선언이 우선 적용됩니다.
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선합니다.

우선순위 점수 원리

선택자 예시	우선순위 점수
div {color: red !important;}	99999999점
#color_yellow {color: yellow;}	100점
.color_green {color: green;}	10점
div {color: blue;}	1점
* {color: darkblue;}	0점
body {color: violet;}	상속 없음
인라인 스타일 style="color: orange"	1000점

예시

• .list li.item { color: red; } ➜ 21점
• .list li:hover { color: red; } ➜ 21점 (가상 클래스도 클래스 취급)
• .box::before {content: "Good"; color: red;} ➜ 11점
• #submit span { color: red; } ➜ 101점
• header .menu li:nth-child(2) {color: red;} ➜ 22점
• h1 {color: red;} ➜ 1점
• :not(.box) {color: red;} ➜ 10점 (부정 선택자는 클래스로 취급되지 않음)
  ```