HTML/CSS/JS

Front-end Course Day 02
CH 1. HTML/CSS/JS

🫥 이미 잘 알고있는 내용이니, 중요한 것 + 새로 알게 된 내용 위주 정리.

CSS

tabindex 속성

원래는 focus가 되지 않는 속성에 focus가 되도록 만들 수 있음.
tab키를 이용해 focus 할 수 있는 순서를 지정하는 속성.

<div tabindex="-1"></div>

참조 문서

nth-child

span:nth-child(2n) { // 짝수번째
	color: red;
}

span:nth-child(2n+1) { // 홀수번째
	color: blue;
}

-> 여기서 n 은 0부터 시작한다.

+) odd와 even 도 가능하다.

not

가상클래스 중 하나.

.fruits *:not(span) {
	display: none;
}

속성 선택자

[type="password"] {
   color: red;
}

html의 data 필드 또한 선택자로 사용 가능.

<span data-fruit-name="apple">사과</span>

[data-fruit-name] {
   color: red;
}

스타일 상속

글자 관련 속성들은 자동으로 상속되지만, 그 외 속성들도
상속되게 하기 위해서는 inherit 키워드로 사용.

.parent {
	width: 200px;
    height: 200px;
}

.child {
	width: inherit;
    height: inherit;
}

선택자 우선순위

<div class='hi' id="hello" style="color: yellow">Hello</div>

div {
  color: red !important;
}

.hi {
  color: orange;
}

#hello {
  color: green;
}

* {
  color: blue;
}

body {
  color: violet;
}

1. !important 가 가장 우선시된다.
2. 인라인 스타일 (html style 속성)
3. ID 선택자
4. class 선택자
5. 태그 선택자
6. 전체 선택자 (*)