패스트캠퍼스 챌린지 6일차 - Part 1. CSS 개요(2)

5. 선택자 _가상 클래스(1)

동작을 나타내는 가상 클래스 선택자

• ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택.

.box{
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 1s;
}
.box:hover{
  width: 300px;
  background-color: royalblue;
}

default

hover

input{

}
input:focus{
background-color: orange;
}

• ABC:active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택.
• ABC:focus : 선택자 ABC 요소가 포커스되면 선택. (포커스가 가능한 요소만 가능)

포커스가 가능한 요소만 가능.

포커스가 가능하지 않은 요소도 태그에 tabindex=”-1” 작성하면 포커스 가능해짐.

6. 선택자 _가상 클래스(2)

특정한 요소를 가리키는 가상 클래스 선택자

• ABC:first-child : 선택자 ABC가 형제 요소 중 첫째라면 선택.

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

.fruits span:first-child{
  color: red;
}

딸기 빨강색 됨. (first-child 이면서 .fruits의 후손인 span이기 때문)

• ABC:first-child : 선택자 ABC가 형제 요소 중 막내라면 선택.
• ABC:nth-child(n) : 선택자 ABC가 형제 요소 중 n째라면 선택.

.fruits *:nth-child(2){
  color: red;
}

.fruits *:nth-child(2n){
  color: red;
}
/* n은 0부터 시작 */
/* 2n은 0, 2, 4, 6 ... 선택됨 */

.fruits *:nth-child(n+2){
  color: red;
}
/* 2번째 요소부터 쭉 선택 */

• ABC:not(XYZ) : 선택자 XYZ가 아닌 ABC 요소 선택.

.fruits *:not(span){
  color: red;
}

span태그가 아닌 .fruits의 모든 자식 요소

7. 선택자 _가상 요소

• ABC::before : 선택자 ABC 요소의 내부 앞에 내용을 삽입. (가상의 인라인 요소를 만들어서 앞에 삽입)
• ABC::after : 선택자 ABC 요소의 내부 뒤에 내용을 삽입.

<div class="box">
    Content!
  </div>

• before, after는 content와 세트

.box::after{
  content: "";
  display: block; /* 인라인 요소를 블록 요소로 전환 */
  width: 30px;
  height: 30px;
  background-color: royalblue;
}

html을 복잡하게 하지 않고도 요소 만들어낼 수 있음.

8. 선택자 _속성

• [ABC] : 속성 ABC를 포함한 요소 선택.

[disabled]{
	color: red;
}

• [ABC=”XYZ”] : 속성 ABC를 포함하고 값이 XYZ인 요소 선택.

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

9. 스타일 상속

조상→자손 요소에 스타일 상속

상속되는 CSS 속성들은 모두 글자/문자 관련 속성들! (모든 것은 아님)

강제 상속

.parent{
  width: 300px;
  height: 200px;
  background-color: orange;
}

.child{
  width: 100px;
  height: inherit; 
  /* 이렇게 쓰면 강제 상속으로 부모 요소의 스타일을 따르게 할 수 있음 */
  background-color: red;
}

10. 선택자 우선순위

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

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

<div id="color_yellow" class="color_green" style="color: orange">
<!-- 인라인 선언 1000점 -->
	Hello world
</div>

div{
  color : red !important; /* !important : 무한대 */
}
#color_yellow{ /* ID 선택자 : 100점 */
  color: yellow; 
}
.color_green{ /* Class 선택자 : 10점 */
  color: green;
}
div{ /* 태그 선택자 : 1점 */
  color: blue;
}
* { /* 전체 선택자 : 0점 */
  color: darkblue;
}
body{ /* 상속 : X */
  color: violet;
}

가상 클래스 선택자 (::) 10점 / 가상 요소 선택자 (:) 1점

not은 점수 X 괄호 안은 계산

스타일 상속이 점수에 따른다는 것은 처음 알았다.
쉬운 부분이라 빠르게 보고 있지만 기초를 다시 다지기에 좋은 것 같다.

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.