안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 html, css 2편입니다.
css 가상선택자
가상선택자는 콜론(:)이 1개가 붙습니다.
콜론(:)이 2개 붙으면 걔는 가상요소 선택자 !!
1. 움직임을 제어하는 가상선택자 클래스
원래 움직임을 제어하는 영역은 javascript의 영역입니다.
짬때리네
하지만, css에서 특별히 제어할 수 있는 가상선택자가 있어요.
1) ABC:hover
선택자 ABC요소에 마우스가 올라가있는동안 선택되요.
예시를 볼게요.
<a href="https://www.naver.com>NAVER</a>a:hover {
color: red;
}위 html에 NAVER텍스트에 마우스를 올리면 글씨가 빨갛게 변합니다.
2) ABC:active
선택자 ABC요소에 마우스를 클릭하고있는동안 선택되요.
<a href="https://www.naver.com>NAVER</a>a:active {
color: red;
}3) ABC:focus
선택자 ABC요소가 포커스되면 선택됩니다.
input, a, button, label, select 등
HTML대화형 컨텐츠에 적용 가능합니다.
예외적으로 tabindex속성을 사용한 요소도 포커스 가능해요.
<div class="box"></div>
<input type="text" />.box {
width: 100px;
height: 100px;
background-color: orange;
transition: 1s;
}
.box:active {
width: 300px;
background-color: royalblue;
}
input {
}
input:focus {
background-color: orange;
}애초에 box는 focus 속성을 적용시킬 수 없는 요소입니다.
하지만, 위에서 언급한 tabindex를 통해 사용해줄 수 있습니다.
tabindex는 tab키를 이용해 포커스할 순위를 지정해줍니다.
-1 이외에는 흐름을 방해하기 때문에 사용하지 않는 것이 좋습니다.
<div class="box" tabindex="-1"></div>
<input type="text" />.box {
width: 100px;
height: 100px;
background-color: orange;
transition: 1s;
}
.box:focus {
width: 300px;
background-color: royalblue;
}
input {
}
input:focus {
background-color: orange;
}예시에서 상자를 클릭하면 변하고, 다른 곳을 클릭하면 원래대로 돌아옵니다.
focus는 한 브라우저 안에서 동시에 사용이 불가능합니다!
2. 특정 요소를 선택하는 가상선택자 클래스
우리가 일반적으로 배우고 사용하던 특정 요소를 선택하는 가상선택자 클래스입니다.
1) ABC:first-child
선택자 ABC가 형제들 중 첫번째라면 선택당합니다.
예시를 볼게요.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>html을 보면 딸기부터 사과까지, 모두 fruits라는 class를 가진 div를 부모로 둔 형제관계입니다.
.fruits span:first-child {
color: red;
}이 css코드를 해석해볼게요.
첫번째 자식요소(first-child)를 찾을건데, 그 선택자는 span이어야 합니다.
아, 그리고 first-child와 span이 붙어있으니 일치선택자이고, 이는 두 가지 요소가 모두 만족해야 한다는 뜻입니다.
span태그 앞에 띄어쓰기가 있으니 span의 상위요소를 찾아야 하고, 그 상위요소는 fruits라는 class(.)를 가져야 합니다.
아직도 익숙하지 않아서 예전에 작성한 내용을 보고있네요...
익숙해질때까지 css코드는 항상 역해석하는 습관을 길러보려고 합니다.
어쨋던, 모든 조건에 부합하는 아이는 딸기에요.
그럼 딸기가 빨갛게 익었겠죠?
다른 예시를 볼게요.
.fruits div:first-child {
color: red;
}첫 번째 자식요소가 div요소여야 하는데...?
예시의 첫 번째 자식요소는 span이에요.
즉, html 내부에서 fruits 자손 중 첫 번째 자식요소 div는 없으므로, 간택당할 수 없는 조건입니다.
아무도 선택받지 못했네요.
2) ABC:last-child
first-child와 반대로, ABC가 막둥이라면 선택해줍니다.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits h3:last-child {
color: red:
}css를 해석해볼까요?
형제들 중 h3선택자가 막내여야 한다.
그리고 상위요소는 fruits라는 class를 가져야 한다.
그런데 이 예시에서는 자식선택자를 사용해도 같은 값이 나올 것 같지 않나요?
.fruits > h3:last-child {
color: red:
}
두 가지 모두 같은 값이 나왔습니다.
자손과 후손 선택자는
우선적으로 후손 선택자를 사용하되,
구조적으로 선택이 어려운 경우 필요한 부분에 자식 선택자를 사용하면 된다.
가 결론이에요.
ABC:nth-child(n)
이번엔 선택자 ABC가 n번째라면 선택해주는 가상 클래스 선택자입니다.
예시를 볼게요.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits *:nth-child(2) {
color: red:
}*(애스터리스크)가 등장했어요.
저는 순간 당황했지만, 당황하지 맙시다.
*(애스터리크스)는 "전체 선택자"니까요.
저 css는
fruits 클래스를 가진 하위요소들 전체에서
두 번째 형제요소를 선택해라
라는 의미가 되겠습니다.
그리고 nth-child는 숫자 외에 n을 포함할 수 있어요.
읭?
.fruits *:nth-child(2n) {
color: red:
}이렇게요.
앞서 javacript는 숫자를 0부터 세기 시작했죠?
저 n이 그 역할을 합니다.
즉, 하위요소의 카운팅을 0부터 시작한 후, n앞에 숫자를 곱해 나온 순번의 nth-child 값을 선택합니다.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>여기에선 딸기가 0, 수박이 1, 오렌지가 2, 망고가 3, 사과가 4가 되는거죠.
그럼 2n이 되었으니
0x2=0, 1x2=3, 2x2=4, 3x2=6, 4x2=8에 해당하는 nth-child를 찾는 겁니다.
수박과 망고가 빨갛게 변할거에요.
그럼 2n+1을 적용해볼게요.
0X2+1=1, 1X2+1=3, 2X2+1=5, 3X2+1=7, 4x2+1=9가 되네요.
.fruits *:nth-child(2n+1) {
color: red:
}
다른 예시도 있네요?
.fruits *:nth-child(n+2) {
color: red:
}0+2=2, 1+2=3, 2+2=4, 3+2=5, 4+2=6.
즉, 두 번째 자식요소들부터 선택됩니다!
3을 넣으면 세 번째 자식요소들부터 선택되겠죠.
정리!!
:nth-child(2n) : 짝수번째 형제요소들을 선택
:nth-child(2n+1) : 홀수번째 형제요소들을 선택
:nth-child(n+@) : @번째 형제요소부터 선택
3) ABC:not(XYZ)
부정선택자입니다.
선택자 XYZ가 아닌!!
ABC를 선택하라는 의미에요.
예시 gogo
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits *:not(div)
color: blue;
}css를 해석해볼까요?
전체선택자 *(애스터리스크)와 부정선택자 not이 붙어있으니, 일치선택자네요.
즉, div는 홀로 버려질 예정입니다.
전체에서요.
결국 fruits라는 class를 상위요소로 가진 형제들 전체 중에서 div 선택자는 혼자 파랗지 못하다는 의미입니다.
결과를 볼게요.
css 가상요소선택자
가상요소선택자는 콜론(:)이 2개가 붙습니다.
콜론(:)이 1개 붙으면 걔는 가상선택자 !!
1) ABC::before (inline, 글자요소)
선택자 ABC 요소의 내부 앞에 가상의 내용(content)을 만들어 삽입합니다.
매우매우 자주 사용되므로, 꼭 기억해야합니다!
예시로 가요.
<div class="box">
뒤!
</div>.box::before {
content: "앞!";
}뒤!
라는 내용 앞쪽에 inline요소인
앞!이 삽입되겠네요.
2) ABC::after (inline, 글자요소)
선택자 ABC 요소의 내부 뒤에 가상의 내용(content)을 만들어 삽입합니다.
<div class="box">
앞이다!
</div>.box::after {
content: "back!";
}
before와 content
after와 content
각기 하나의 세트입니다.
이 세트를 사용할 때 공통적으로 유의해야 할 점이 있어요.
우선 이 가상요소선택자들은 text로 된 내용을 직접 입력해야 합니다.
content를 사용하지 않으면, 아무것도 적용되지 않아요.
그리고 뒤에 ""를 꼭!꼭!!꼭!!! 붙여줘야 합니다.
"이 사이를 비워두는 한이 있더라두요."
그리고 이 before와 after는 css에서 다른 값도 지정해줄 수 있습니다.
예시를 보죠.
<div class="box">Bbb</div>.box {
width: 100px;
height: 100px;
background-color: orange;
}
.box::before {
content: "";
width: 30px;
height: 30px;
background-color: royalblue;
}before속성을 통해 가로, 세로, 색상을 지정해줬어요.
아 이게 뭔가요.
이유는!
before와 after 속성은 inline요소이기 떄문입니다.
inline요소는 가로값과 세로값을 가질 수 없죠?
그래서, 우리는 before 속성을 강제로 block요소로 변환시킬겁니다.
바로 display 속성으로요.
.box {
width: 100px;
height: 100px;
background-color: orange;
}
.box::before {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: royalblue;
}결과를 볼게요.
이렇게 Bbb라는 텍스트 아래에 작고 소중한 파란 상자가 등장합니다.
