웹프로그래밍 css (3) 가상 선택자

📋오늘의 목표📋

가상 선택자에 대해서 알아보자. 가상 클래스는 특정요소의 상태를 미리 추정해서 
가상의 클래스로 스타일을 적용할 수 있는 선택자라고 한다.

📕 가상 선택자

• 지금 문서내에 존재하지 않는 요소에 스타일을 부여하고 특정 요소를 추정해서 스타일을 부여하는 선택자.
• 가상 클래스
• 가상 요소

📖 가상 클래스

조건 발생 시 규칙이 적용될 수 있도록 만든 특수한 클래스
ex> 커서가 위에 올라갔을 때
👏 가상클래스들은 미리 선언되어 있음!!
가상클래스 확인하기

- : 을 사용해서 선언한다.

:pseudo-class {}

📒 문서구조와 관련된 가상 클래스

• 요소:first-child : 요소의 첫 번째 자식 요소 선택
• 요소:last-child : 요소의 마지막 자식 요소 선택

✍️예시 코드

li:first-child { color: red; }
li:last-child { color: blue; }

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

👉 HTML이 red로 JS가 blue로

📒 링크 관련된 가상 클래스

• a:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
• a:visited : 이미 방문한 하이퍼링크를 의미

하이퍼 링크란 : a태그에 href속성이 존재하는 것을 말한다.

✍️예시 코드

a:link { color: blue; }
a:visited { color: gray; }

<a href ="https://www.naver.com/">네이버</a>
<a href ="https://www.daum.net/">다음</a>

👉 방문한 링크는 회색으로, 방문하지 않은 링크는 파란색으로 나타남.

📒 사용자 가상 클래스

• 요소:focus : 현재 입력 포커스를 갖고 있는 요소에 적용
  현재 선택을 받는 것(tap키 이동처럼)
• 요소:hover : 마우스 포인터가 위치해 있는 요소에 적용
  마우스를 올렸을 때
• 요소:active : 사용자 입력에 의해 활성화된 요소에 적용
  순간적으로 활성화된다.

✍️ 예시코드

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

👉 tap으로 이동하면 노란색배경, 마우스 커서를 두면 굵게 표시, 클릭시 빨간색표시

📖가상 요소 ::

• 가상 요소: 존재하지않는 요소(태그)
• 가상요소선택자를 통해서 존재하지 않는 요소에 대해서 css규칙을 설정할 수 있다.
• 더블콜론을 사용해야하지만 하위 브라우저에서 작동하지 않는 오류가 날 수 있기 때문에 주의해야한다.

📒 가상 요소 선택자 before,after

• ::before : 요소 내용 앞쪽에 새 컨텐츠를 추가.
• ::after : 요소 내용 끝에 새 컨텐츠를 추가.
  🔥내용이 없는 요소이기 때문에 내용 삽입을 위해서는 css의 content속성을 이용해야 한다.
  🔥HTML태그나 자바스크립트 없이도 HTML 페이지 안에 콘텐츠,또는 디자인을 추가 할 수 있다.

가상요소선택자 알아보기

📋 content속성과 속성값

• ::before와 ::after에 쓰이는 속성
• 넣을 수 있는 속성값 : 문자열, 이미지, HTML 속성, 변수, 함수
  문자열의 경우 따옴표''를 사용해야한다.

📒 가상 요소 선택자 selection,marker

• ::selection : 마우스 드래그로 선택한 텍스트 컨텐츠 영억을 선택
• ::marker : 목록 아이템 앞에 붙는 마커를 선택

📒 가상 요소 선택자 first-line,first-letter

• ::first-line : 요소의 첫 번째 줄에 있는 텍스트를 감싸는 요소
• ::first-letter : 요소 내의 블록 레벨 요소의 첫 번째 문자를 감싸는 요소

가상요소선택자 알아보기

👏오늘 배운 것👏

새로운 개념들이 갑자기 엄청 많이 등장해서 머릿속에서 혼란스럽다. 
특히 html의 속성과 css의 속성이 달라서 헷갈린다.
✍️다시 정리하는 HTML과 CSS의 속성
- html의 속성 : id='user' 처럼 태그 안에 들어가는 값으로 추가 명령어의 역할을 한다. 공백 ( )을 통해 구분한다. 
- css의 속성 : 스타일을 지정하는 추가 명형어 세미콜론(;)을 통해 구분한다.
{ 속성:속성값}