pseudo-class / pseudo-element

pseudo-class

• 상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터
  <button> <input> <a> 등 클릭할 때 스타일을 다르게 줄 수 있는 셀렉터

.btn:hover {
  background : chocolate; /*마우스를 올려놓을 때*/
}
.btn:focus {
  background : red; /*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
  background : brown; /*클릭 중일 때*/
}

hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 동작한다!!

1. hover

2. focus

3. active

이거 말고도 수많은 pseudo-class가 있기 때문에 필요하면 찾아서 쓰기

:any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/
:playing /*동영상, 음성이 재생중일 때*/
:paused /*동영상, 음성이 정지시*/
:autofill /*input의 자동채우기 스타일*/
:disabled /*disabled된 요소 스타일*/
:checked /*체크박스나 라디오버튼 체크되었을 때*/
:blank /*input이 비었을 때*/
:valid /*이메일 input 등에 이메일 형식이 맞을 경우*/
:invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
:required /*필수로 입력해야할 input의 스타일*/
:nth-child(n) /*n번째 자식 선택*/
:first-child /*첫째 자식 선택*/
:last-child /*마지막 자식 선택*/

(애플코딩 강의 참고)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

• <input>등에 자주 사용

input:focus {
  border : 2px solid red;
}

인풋에 커서가 찍혀있을 때 인풋에 스타일을 주고 싶으면 :focus를 붙이면 된다.

• <a>태그에도 자주 사용

a:link { 
  color : red; /*방문 전 링크*/ 
} 
a:visited { 
  color : black; /*방문 후 링크*/ 
} 

:link를 붙이면 방문 전 링크
:visited를 붙이면 방문 후 링크에 스타일을 넣을 수 있다.

모든 링크의 밑줄제거는 그냥 a태그에 text-decoration : none 붙이면 된다.

pseudo-element

특정 HTML 요소의 안쪽 일부만 스타일을 주고 싶을 때 Pseudo-element 셀렉터를 이용해서 스타일을 줄 수 있다.

• Pseudo-element로 HTML 특정부분에 스타일링하기/글씨넣기

.text::first-letter {
  color : red;
}

.text::first-line {
  color : red;
}

.text::after {
  content : '뻥이지롱';
  color : red;
}

.text::before {
  content : '뻥이지롱';
  color : red;
}

1. pseudo-element를 선택하려면 콜론 2개 :: 를 사용
2. ::first-letter라고 붙이면 안에 있는 글자 중 첫 글자만 스타일을 줄 수 있다.
3. ::first-line이라고 붙이면 안에 있는 글자 중 첫 줄만 스타일을 줄 수 있다.
4. ::after라고 붙이면 내부의 맨 마지막 부분에 특정 글자같은걸 추가해줄 수 있다.
5. ::before라고 붙이면 내부의 맨 앞 부분에 특정 글자같은걸 추가해줄 수 있다.

<의문점>
"first-letter 대신 그냥 첫 글자를 span태그로 감싸면 되지않나요?"

그래도 되겠지만 서버와 데이터베이스로 인해 글자가 항상 다이나믹하게 변하는 경우 항상 span태그를 넣기 불가능하다. (자바스크립트를 쓰면 되는데 귀찮을 수 있음)

그럴 때 사용하시면 되는데 실은 크게 쓸모는 없다고 함.

pseudo-class : 다른 상태일 때 스타일 주는 것
pseudo-element : 내부의 일부분만 스타일 주는 것

Pseudo-element로 clear : both 박스 편하게 만들기

.box::after {
  content : '';
  display : block;
  clear : both;
}

갑자기 어떤 요소 뒤에 clear : both 속성을 가진 div박스가 필요하다면
일부러 div를 하나 만들 필요 없이 이렇게 div를 흉내내서 사용할 수 있다.
content 안에 아무것도 안적은 후 display : block을 주면 div 비슷한게 하나 생성된다.

Pseudo-element의 활용

Pseudo-element를 활용하면

• CSS 만으로 버튼에 마우스 올리면 배경 어둡게하기 https://codepen.io/css-tricks/pen/dxyfA
• CSS만으로 3D 느낌 리본모양만들기 https://codepen.io/team/css-tricks/pen/mVZGKa
• ol 태그의 숫자 스타일링하기 https://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
• table 반응형으로 만드는 여러가지 방법 https://css-tricks.com/responsive-data-tables/
• CSS만으로 영문 폰트 만들기 https://yusugomori.com/projects/css-sans/fonts

등이 가능하지만 대부분 약간 쓸데없다고 한다ㅋㅋㅋ(코딩애플)
다만 shadow DOM을 위해 꼭 알아야 하니 내부에 있는 pseudo-element를 스타일줄 땐 :: 를 이용한다는 사실을 까먹지 말기!!

<예시>

html

<input type="file" class="input-file" />

css

.input-file::file-selector-button {
  background: skyblue;
  border: none;
  padding: 20px;
}

.input-file::file-selector-button:hover {
  background: blue;
  color: white;
}

이렇게 쓸 수도 있음.
숨겨져 있는 요소에 스타일 줄때도 :: 사용함.