안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 html, css 3편입니다.
속성 선택자
[ABC]
속성 ABC를 포함한 요소를 선택합니다.
예시를 볼까요?
<input type="text" value="DH">
<input type="password" value="123">
<input type="text" value="가나다라" disabled>여기에 적용시켜봐요.
[disabled] {
color: red;
}css를 해석봐요.
disabled라는 속성을 가진 요소를 선택해 빨갛게 만들면 되네요.
물론 다른 속성을 넣을 수도 있어요.
[type] {
color: red;
}
속성의 이름이 type 속성이 죄다 빨갛게 변했네요.
특이한 속성을 지정해 변환시키기 좋을것 같아요.
[ABC="XYZ"]
속성 ABC를 포함하고 있고, 값이 "XYZ"인 요소를 선택합니다.
<input type="text" value="DH">
<input type="password" value="123">
<input type="text" value="가나다라" disabled>[type="password"] {
color: blue;
}
type 속성에서, 값이 "password"인 요소만 파랗게 변했어요.
다른 예시도 볼까요?
<input type="text" />
<input type="password" />
<span data-fruits-name="banana">바나나</span>3번째 줄에 있는게 뭐죠?
우선 span요소네요.
그리고 속성으로 data가 할당되었어요.
우리는 data라는 전역속성을 통해서 우리가 원하는 이름(fruits-name)을 명시하고, 거기에 "banana"라는 데이터를 담아뒀습니다.
이렇게 담은 "banana"라는 데이터는 javascript에서 사용할 수 있습니다!
처음 듣는 얘기같아요.
아무튼, data-fruits-name도 속성이기 때문에, 우리가 방금 배운 속성선택자를 사용할 수 있겠네요.
[type="text"] {
background-color: orange;
}
[type="password"] {
background-color: violet;
}
[data-fruits-name] {
color: red;
}
스타일 상속
부모요소의 css속성이 자식요소에게 상속되는 현상을 말합니다.
예시를 볼게요.
<div class="ecosystem">생태계
<div class="animal">동물
<div class="ele">코끼리</div>
<div class="tig">호랑이</div>
<div class="chi">침팬지</div>
</div>
<div class="plant">식물</div>
</div>.animal {
color: red;
}분명히 우리는 animal class에만 붉은 글씨를 추가했습니다.
하지만, 결과는 코끼리와 호랑이, 침팬지까지 붉게 변해요.
이처럼 자식 요소까지 물들이는 현상을 스타일 상속이라고 합니다.
모든 css가 상속되지는 않아요.
상속되는 css속성들은 모두 문자나 글자계열 속성입니다.
하지만 모든 css문자나 글자 속성이 상속되는 것은 아니니 주의!
그리고 상속되지 않는 속성을 강제로 상속시키는 강제상속도 존재합니다.
<div class=a>Apple
<div class=b>Banana</div>
</div>.a {
width: 100px;
height: 200px;
background-color: red;
}
.b {
width: 50px;
height: 100px;
background-color: yellow;
}이 예시를 실행하면
이렇게 나오는데요.
b의 가로를 부모 요소의 크기로 자동으로 맞춰주고 싶네요.
그럴 때 등장하는 속성이 inherit입니다.
부모요소의 해당 속성을 그대로 베껴와요.
.a {
width: 100px;
height: 200px;
background-color: red;
}
.b {
width: inherit;
height: 100px;
background-color: yellow;
}가로값을 a의 가로값에서 받아오겠습니다.
우선순위
같은 요소가 여러 선언의 대상이 된 경우, 어떤 css 속성을 우선 적용할 지 경정하는 것을 의미합니다.
점수가 높을수록 우선 적용하며, 같은 점수일 경우 더 마지막에 선언한 내용을 우선합니다.
예시를 보겠습니다.
<div
id="color_yellow"
class="color_green"
style="color= orange";>
Hi :)
</div> div {
color= red !important;
}
#color_yellow {
color= yellow;
}
.color_grren {
color= green;
}
div {
color= blue;
}
* {
color= darkblue;
}
body {
color= orange;
}html에서 Hi에 입혀야 하는 색깔이 총 6개나 등장합니다.
이럴 때 점수로 우선 순위는 결정한다 했는데요.
점수가 높은 순으로 살펴보겠습니다.
!important : 점수가 무한대입니다. 즉, 어떤 선언을 들이대도 이길수가 없어요.
인라인 선언 : 1000점(예시에서는 div태그에 직접 style로 작성되었어요.)
아이디선택자 : 100점(예시에서는 #color_yellow가 되죠.)
클래스선택자 : 10점(.color_green)
태그선택자 : 1점(css에서 div)
전체선택자 : 0점(*)
그럼 이제 예시를 볼까요?
.list li.item { color: red; }
.list li:hover { color: red; }
.box::before { content: "good"; color: red; }
#submit span { color: red; }
header .menu li:nth-child(3) { color: red; }
h1 { color: red; }
:not(.box) { color: red; }보기 편하게 전체를 한 줄로 작성했습니다.
하나하나 점수를 줘볼까요?
(1) .list li.item { color: red; }
.list 클래스선택자(10) + li 태그선택자(1) + .item 클래스선택자(10)=21점
(2) .list li:hover { color: red; }
.list 클래스선택자(10) + li 태그선택자(1) + :hover 가상클래스선택자(10)=21점
(가상클래스선택자도 클래스선택자이므로, 10점입니다.)
(3) .box::before
.box 클래스선택자(10)+::before 가상요소선택자(1)=11점
::는 가상요소선택자입니다.
하지만 요소와 태그는 비슷하므로, 우선순위를 정할땐 태그로 생각하면 됩니다.
(4) #submit span
#submit 아이디선택자(100) + span 태그선택자(1)=101점
(5) header .menu li:nth-child(3)
header 태그선택자(1)
+.menu 클래스선택자(10)
+li 태그선택자(1)
+:nth-child(1) 가상클래스선택자(10)
=22점
(6) h1
태그선택자(1)
(7) :not(.box)
:not 가상클래스선택자(10) + (.box) 클래스선택자(10)=20점
땡!!!
부정선택자같은 경우, :not의 경우 어떤 선택자를 부정한다고 여겨지므로 점수계산을 하지 않습니다.
즉,
:not 가상클래스선택자(10) + (.box) 클래스선택자(10)=10점
입니다.
