20210525 CSS02 : 가상 요소 선택자, 속성 선택자, 스타일 상속, 선택자 우선순위, CSS 속성

CSS02

가상 요소 선택자

가상요소 선택자의 경우 내용을 삽입하기 때문에 무조건 가상요소를 사용할 때는 CSS content 속성을 최소한 '' 빈값으로 해야할 정도로 무조건 사용해야 한다.

이름	기호	설명
Before	abc::before	선택자 abc요소의 내부 앞에 내용(content)을 삽입 (추가 되는 요소는 인라인 요소임)
After	abc::after	선택자 abc요소의 내부 뒤에 내용(content)을 삽입 (추가 되는 요소는 인라인 요소임)

<div class="box">Tom&Jerry</div>

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box::after,
.box::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: royalblue;
}
/* 기본적으로 가상요소는 인라인 이므로 위아래 여백이 불가함 그래서 block으로 바꿈 */

See the Pen poePBNa by RaccoonCode96 (@raccooncode96) on CodePen.

속성 선택자

이름	기호	설명
Attr	[abc]	속성 abc를 포함한 요소 선택 (값을 가지는 속성을 선택자로 쓰면 너무 광범위 해지기 때문에 값을 가지지 않는 속성을 선택할 때 좋다.)
Attr=Value	[abc="xyz"]	속성 abc를 포함하고 값이 xyz인 요소 선택 (값을 가지는 속성을 디테일 하게 선택할때 사용)

<input type="text" />
<input type="password" />
<span data-fruit-name="apple">사과</span>
<span data-fruit-name="orange">오렌지</span>

[type="text"] {
  width: 70px;
  background-color: orange;
}

[type="password"] {
  width: 70px;
  background-color: blue;
}

[data-fruit-name="apple"] {
  font-size: 40px;
  color: red;
}

[data-fruit-name="orange"] {
  font-size: 40px;
  color: orange;
}

See the Pen GRWmjKo by RaccoonCode96 (@raccooncode96) on CodePen.

스타일 상속

부모 요소로 부터 자식,후손요소로 스타일이 상속되어 자식, 후손요소에 반영되는 것

상속되는 CSS 속성들

• 글자/문자 관련 속성들(모든 글자/문자 속성은 아님)
  • font-style, font-weight, font-size, font-family, line-height, color, text-align, ...

강제 상속

• 상속이 안되는 속성을 강제로 상속 시킴
• 자식 또는 후손 요소의 속성값을 inherit을 주면 강제 상속 받음

<div class="parent">
  parent
  <div class="child">child</div>
</div>

.parent {
  text-align: center;
  width: 100px;
  /*   height, background-color : inherit을 통해서 강제 상속 함 */
  height: 400px;
  background-color: orange;
}
.child {
  width: 50px;
  height: inherit;
  background-color: inherit;
  position: fixed;
  top: 100px;
  left: 150px;
}

See the Pen YzZVMry by RaccoonCode96 (@raccooncode96) on CodePen.

선택자 우선순위

• 우선 순위 : 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법 (즉, 여러가지 선택자들로 인해 같은 속성이 다른 값들로 지정해달라고 하는 경우 어떤 선택자의 값을 적용할지)
  • 점수가 높은 선언이 우선함
  • 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!

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

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

• 명시도 : 점수 계산 하는 것
• 중요도 : !important 키워드
• 선언순서 : 코드가 해석된 순서에 따라 우선한다
• !important 와 인라인 style선언은 되도록 사용하지 말것! (너무 우선순위 점수가 커져서 수정하기 어려움)
• * - Tag - .Class - #Id (0,1,10,100)

선택방식	점수
!important 값	9999999999점
인라인 선언(style)	1000점
ID선택자	100점
Class선택자(가상클래스 포함)	10점
태그 선택자(가상요소 포함)	1점
전체 선택자 *	0점
body 선택자	상속은 점수계산 X

계산 예제

.list li.item {
  color: red;
}
/* 10 + 1 + 10 = 21점 */

.list li:hover {
  color: red;
}
/* 10 + 1 + 10 = 21점 */

.box::before {
  content: "";
  color: red;
}
/* 10 + 1 = 11점 */

#submit span {
  color: red;
}
/* 100 + 1 = 101점 */

header .menu li:nth-child(2) {
  color: red;
}
/* 1 + 10 + 1 + 10 = 22점*/

h1 {
  color: red;
}
/* 1점 */

:not(.box) {
  color: red;
}
/* 10점 */

---

CSS 속성(Properties)

• HTML 속성 : Attributes
• CSS 속성 : Properties
• JS 속성 : Properties