가상 클래스 (pseudo-class)
가상 클래스란, 실제로 존재하는 요소에 가상으로 클래스를 부여하여 css로 제어하는 것을 의미한다. 기존의 여러가지 선택자로도 범위를 지정하기가 어려웠던 대상을 선택하기 위해 사용되는 선택자이다.
ex) 메뉴의 첫번째 항목, 단락의 첫번째 글자 등등
- 가상클래스: 콜론
:기호 1개 - 가상요소 : 콜론
:기호 2개 (ie8 이하 버전은 적용되지 않기 때문에 싱글콜론으로 표기하는 것이 낫다.)
가상 클래스
🍕 사용자 동작에 반응하는 가상 클래스 선택자
🍕 UI 요소 상태에 따라 적용되는 가상 클래스 선택자
🍕 타깃 가상 클래스 선택자
🍕 부정 가상 클래스 선택자
🍕 구조 가상 클래스 선택자
🍕 사용자 동작에 반응하는 가상 클래스 선택자
동적 가상 클래스라고 부르기도 하는 이 가상 클래스 선택자는 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 사용자의 동작에 따라 스타일을 제어하고자 할 때 사용한다.
:link
<style>
.navi a:link { /*클래스 navi 요소 안의 방문하지 않은 링크에 대한 스타일 지정*/
color: black; /*방문하지 않은 링크의 글씨 색상*/
text-decoration: none; /*방문하지 않은 링크의 밑줄 스타일을 없앰*/
font-size: 12px; /*방문하지 않은 링크의 글자 크기를 지정*/
padding: 10px;} /*방문하지 않은 링크 요소의 여백을 지정*/
</style>
<nav class="navi">
<ul>
<li><a href="#">신청 및 접수</a></li>
<li><a href="#">접수 확인</a></li>
<li><a href="#">공지 사항</a></li>
<li><a href="#">고객 센터</a></li>
</ul>
</nav>방문하지 않은 링크에 대한 스타일을 지정
문서 내의 하이퍼링크 중, 사용자가 아직 방문해본 적이 없는 링크에 스타일을 지정한다.
텍스트 링크는 브라우저 기본 스타일로 파란색 글자와 밑줄로 표시되지만 이러한 색상이나 밑줄 스타일을 제어할 때 :link 가상 클래스 선택자를 사용한다.
:visited
<sylye>
.navi a:link, a:visited { /*클래스 navi 요소 안의 방문하지 않은 링크와 방문했던 링크에 대한 스타일 지정*/
color: white; /*글씨 색상*/
text-decoration: none; /*밑줄 스타일을 없앰*/
font-size: 15px; /*글자 크기를 지정*/
padding: 20px;} /*여백을 지정*/
</style>
<nav class="navi">
<ul>
<li><a href="#">신청 및 접수</a></li>
<li><a href="#">접수 확인</a></li>
<li><a href="#">공지 사항</a></li>
<li><a href="#">고객 센터</a></li>
</ul>
</nav>방문했던 링크에 대한 스타일을 지정
문서 내의 하이퍼링크 중, 사용자가 한번 이상 방문했던 링크에 스타일을 지정한다.
텍스트 링크는 브라우저 기본 스타일로 자주색 글자로 표시되지만 이러한 색상이나 스타일을 제어할 때 :visited 가상 클래스 선택자를 사용한다.
:hover
<style>
.navi a:hover { /*클래스 navi 요소 안의 링크 위로 마우스를 올려놓았을 때의 스타일을 지정*/
background-color: black; /*배경 색을 검정색으로 바뀌게 함*/
color: yellow;} /*글자 색을 노랑색으로 바뀌게 함*/
</style>
<nav class="navi">
<ul>
<li><a href="#">신청 및 접수</a></li>
<li><a href="#">접수 확인</a></li>
<li><a href="#">공지 사항</a></li>
<li><a href="#">고객 센터</a></li>
</ul>
</nav>웹 요소에 마우스 커서를 올려놓았을 때의 스타일을 지정
문서 내의 웹 요소위로 사용자가 마우스 커서를 올려놓았을 때의 스타일을 지정하고자 할때는 :hover 가상 클래스 선택자를 사용한다.
이 선택자를 응용하면 롤오버 rollover 효과를 만들 수 있다.
:active
<style>
.navi a:active { /*클래스 navi 요소 안의 링크를 클릭했을 때의 스타일을 지정*/
background-color: #eee;} /*배경 색을 바뀌게 함*/
</style>
<nav class="navi">
<ul>
<li><a href="#">신청 및 접수</a></li>
<li><a href="#">접수 확인</a></li>
<li><a href="#">공지 사항</a></li>
<li><a href="#">고객 센터</a></li>
</ul>
</nav>웹 요소를 활성화 시켰을 때의 스타일을 지정
문서 내의 링크요소나 이미지요소 등 웹 요소를 활성화 시켰을 때 (누르고 있거나, 클릭했을 때) 의 스타일을 지정한다.
:focus
<style>
.navi a:hover, a:focus { /*클래스 navi 요소 안의 링크 위로 마우스를 올려놓았을 때와 초점이 맞추어졌을 때의 스타일을 지정*/
background-color: black; /*배경 색을 검정색으로 바뀌게 함*/
color: yellow;} /*글자 색을 노랑색으로 바뀌게 함*/
</style>
<nav class="navi">
<ul>
<li><a href="#">신청 및 접수</a></li>
<li><a href="#">접수 확인</a></li>
<li><a href="#">공지 사항</a></li>
<li><a href="#">고객 센터</a></li>
</ul>
</nav>웹 요소에 초점이 맞추어 졌을 때의 스타일을 지정
문서 내의 웹 요소에 사용자의 초점이 맞추어 졌을 때의 스타일을 지정하고자 할때는 :focus 가상 클래스 선택자를 사용한다.
예시로는 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 가져다 놓거나, tab 을 눌러 초점이 이동했을 때의 스타일을 지정할 수 있다. (hover 와 비슷한 의미로 사용되며 스타일을 지정할 때 hover 선택자와 같은 스타일을 지정해야 어수선하지 않게 보일 수 있다.)
동적 가상 클래스의 선언 순서
사용자 동작에 의한 가상 클래스 선택자는 선언 순서에 영향을 받는다.
순서가 바뀌면 스타일이 정확히 적용되지 않기 때문에 유의해서 선언하여야 한다.
:link-:visited-:hover (:focus)-:active이 순서로 정의힌다.
<style>
.navi a:link, a:visited { /*link 와 visited 먼저 선언*/
color: white;
text-decoration: none;
font-size: 15px;
padding: 20px;}
.navi a:hover, a:focus { /*그 다음 hover 선언 (focus)*/
background-color: black;
color: yellow;}
.navi a:active { /*마지막에 active 선언*/
background-color: #eee;}
</style>
<nav class="navi">
<ul>
<li><a href="#">신청 및 접수</a></li>
<li><a href="#">접수 확인</a></li>
<li><a href="#">공지 사항</a></li>
<li><a href="#">고객 센터</a></li>
</ul>
</nav>🍕 UI 요소 상태에 따른 가상 클래스 선택자
웹 요소의 상태에 따라 스타일을 제어하고자 할 때 사용한다. 요소 중에서도 UI (user interface) 성질을 가진 요소들에 스타일을 적용할 때 주로 사용된다.
:enabled :disabled
<style>
input:enabled {
background: #eee;
border: 1px black solid;}
textarea:disabled {
background: #white
border: 3px blue dotted;}
</style>
<form>
<label for="name">이름</label>
<input id="name" type="text">
<label for="telnumber">연락처</label>
<input id="telnumber" type="tel>
<textarea cols="20" rows="10" disabled>이용 약관...</textarea>
</form>
enabled : 해당 요소가 사용 가능한 상태일 때, 스타일을 지정하기 위한 선택자
disabled : 해당 요소가 사용 불가능한 상태일 때, 스타일을 지정하기 위한 선택자
checked
<style>
input:checked + p {
color:blue;
border:1px solid red;}
</style>
<body>
<div><input type="radio" name="button"><p>버튼1</p></div>
<div><input type="radio" name="button"><p>버튼2</p></div>
<div><input type="radio" name="button"><p>버튼3</p></div>
</body>
사용자가 라디오 박스 혹은 체크박스에서 항목을 선택하였을 때, 선택된 항목에 스타일을 지정하기 위한 선택자
🍕 타깃 가상 클래스 선택자
하이퍼 링크의 타깃 요소 스타일을 제어하고자 할 때 사용한다.
target
<style>
.test1 .tt:target {
color: #f63;}
</style>
<body>
<div class="test1">
<div id="ttone" class="tt">one</div>
<div id="tttwo" class="tt">two</div>
<div id="ttthree" class="tt">three</div>
</div>
<nav>
<a href="#ttone"><button>1</button></a>
<a href="#tttwo"><button>2</button></a>
<a href="#ttthree"><button>3</button></a>
</nav>
</body>
해당 웹 문서 안의 앵커 목적지의 스타일을 지정하기 위한 선택자
웹 문서에서 같은 사이트의 페이지나 다른 사이트의 페이지로 이동할 때는 link 를 이용한다.
이와 다르게 같은 문서 안에서 다른 위치로 이동하는 경우에는 anchor 를 이용하고, 이 때 :target 선택자를 이용하면 앵커의 목적지가 되는 부분의 스타일을 지정할 수 있다.
🍕 부정 가상 클래스 선택자
지정 된 선택자를 제외한 요소들의 스타일을 제어하고자 할 때 사용한다.
not(선택자)
<style>
input:not(.prof) {
color: blue;}
</style>
<body>
<div>학번<input type="text" name="studentID"></div>
<div>전공<input type="text" name="major"></div>
<div>담당 교수님<input type="text" class="prof" name="prof"></div>
</body>
특정 요소를 제외한 나머지 요소 모두에게 스타일을 지정하기 위한 선택자
🍕 구조 가상 클래스 선택자
웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 위치 기준으로 선택하여 스타일을 지정할 때 사용하는 선택자이다.
:root
웹 문서 안의 최상위 요소(root) 에 스타일을 적용할 것을 선언한다.
HTML 문서에서는 최상위 요소가 HTML 이므로 HTML 에 스타일을 적용한다.
즉, 문서 내의 모든 요소에 같은 스타일을 적용하고자 할 때 사용한다.
!important,class,id등 스타일 적용 우선 순위에 따라:root가 선언한 스타일이 강제 적용될 수 있고 강제 무시가 될 수도 있다. html 문서에서 적용되는 스타일의 우선순위는 나중에 한번에 정리해보기로 하자 !!일단은 html 보다 :root 가상 클래스의 스타일 적용 우선 순위가 높기 때문에 문서 내에서 계속해서 사용할 스타일을 :root 로 선언해놓는 것이 좋을 것 같다.
:root 를 사용하여 최상위 요소에 어떠한 값을 선언한다면, 이 값은 모든 요소에 사용될 수 있기 때문에 웹 문서 내의 요소들을 제어하는데에 용이한 점이 있다.
이러한 :root 를 이용한 변수 제어에 관한 부분도 나중에 한번에 정리해보기로 하자 !!
:구조 가상 클래스(an+b)
<style>
ul li:nth-last-child(2n+1) {
color: blue;}
/*ul 의 마지막 자식요소 li 로부터 (2n+1) 공식의 반복 선언*/
</style>
<body>
<div class="list">
<h1>여행 가고 싶은 곳</h1>
<ul>
<li>동해</li>
<li>제주</li>
<li>여수</li>
<li>전주</li>
<li>해남</li>
<li>남원</li>
<li>경주</li>
<li>진해</li>
<li>부산</li>
<li>태안</li>
</ul>
</div>
</body>스타일의 반복 규칙을 찾아 수식을 이용하여 스타일을 적용하는 방식이다.
구조 가상 클래스 선택자 뒤에 an+b 를 소괄호 () 안에 붙여 사용한다.
이러한 수식을 사용할 때에는 해당 요소들이 모두 같은 레벨의 요소여야 한다.
즉, 모두 한 부모 요소를 가지고 있어야만 한다는 것이다. 또한 a 와 b 에는 정수 (양수, 음수, 0) 이 들어갈 수 있다.
a: 배수가 들어간다.
n: 0부터 시작한다.
b: 시작 위치를 결정한다.
(2n+1) 은 배수가 2이고 +1의 위치에서 시작하니,
(2X0)+1= 1
(2X1)+1= 3
(2X2)+1= 5
(2X3)+1= 7
...
이런 식으로 홀수에만 스타일이 적용되도록 규칙을 공식화 한 것이다.
위 코드는 ul 의 마지막 자식 요소 li 로부터 시작하여 (2n+1) 의 공식 반복을 선언하고 있다. 즉, 마지막 자식요소로부터 시작하여 홀수 번째 요소들만 스타일이 적용된다.
아래 구조 가상 클래스 선택자의 소괄호 () 안에는 키워드 정수 공식 이 들어갈 수 있다.
키워드
- even : 짝수 ex) ul p:nth-of-type(even)
- odd : 홀수 ex) ul p:nth-of-type(odd)
정수
- 양수
- 음수
- 0
공식
- an+b 등
:nth-child(n)
부모 요소의 자식 요소들 중 앞에서부터 n번째 자식요소를 선택할 것을 선언한다.
이 때, 해당 자식 요소들은 같은 레벨의 (하나의 부모 요소를 갖는) 요소여야만 한다.
<style>
div p:nth-child(2) {
color:#eee;}
/*div 안의 두번째 자식이면서 p인 요소에 스타일 적용*/
</style>
<div>
<h1>불교동아리</h1>
<p>인사말</p> <!--스타일 적용-->
<p>소개</p>
<p>지원방법</p>
</div>위 코드의 구조 가상 클래스 선택자는 div 의 두번째 자식인 p 요소에 스타일을 선언하고 있다.
:nth-last-child(n)
부모 요소의 자식 요소들 중 끝에서부터 n번째 자식요소를 선택할 것을 선언한다.
이 때, 해당 자식 요소들은 같은 레벨의 (하나의 부모 요소를 갖는) 요소여야만 한다.
<style>
div p:nth-last-child(2) {
color:#eee;}
/*div 안의 마지막으로부터 두번째 자식이면서 p인 요소에 스타일 적용*/
</style>
<div>
<h1>불교동아리</h1>
<p>인사말</p>
<p>소개</p> <!--스타일 적용-->
<p>지원방법</p>
</div>위 코드의 구조 가상 클래스 선택자는 div 의 마지막으로부터 두번째 자식인 p 요소에 스타일을 선언하고 있다.
:nth-of-type(n)
부모 요소의 자식 요소들 중 형제 관계인 (유형이 같은) n번째 자식요소를 선택할 것을 선언한다.
<style>
div p:nth-of-type(2) {
color:#eee;}
/*div 안의 같은 형제 관계인 p 요소들 중 두번째 p 요소에 스타일 적용*/
</style>
<div>
<h1>불교동아리</h1>
<p>인사말</p>
<p>소개</p> <!--스타일 적용-->
<p>지원방법</p>
</div>위 코드의 구조 가상 클래스 선택자는 div 의 같은 유형의 형제 관계인 p 요소들 중, 두번째 p 요소에 스타일을 선언하고 있다.
:nth-last-of-type(n)
부모 요소 안의 형제 관계인 (유형이 같은) 요소들 중에서도 마지막으로부터 n번째 자식요소를 선택할 것을 선언한다.
<style>
div p:nth-last-of-type(2) {
color:#eee;}
/*div 안의 같은 형제 관계인 p 요소들 중 마지막으로부터 두번째 p 요소에 스타일 적용*/
</style>
<div>
<h1>불교동아리</h1>
<p>인사말</p>
<p>소개</p> <!--스타일 적용-->
<p>지원방법</p>
</div>위 코드의 구조 가상 클래스 선택자는 div 의 같은 유형의 형제 관계인 p 요소들 중, 마지막으로부터 두번째 p 요소에 스타일을 선언하고 있다.
:only-child
<style>
div p:only-child {
color: blue;}
/*div 의 유일한 자식인 p 요소에 스타일 적용*/
</style>
<div>
<p>생일 축하해<p> <!--스타일 적용-->
</div>부모 요소의 자식 요소가 하나밖에 없을 때, 그 유일한 자식 요소를 선택할 것을 선언한다.
:only-of-type
<style>
div p:only-of-type {
color: blue;}
/*div 의 자식 요소들 중, 같은 p 유형이 존재하지 않는 외동 p 요소 에 스타일 적용*/
</style>
<div>
<h1>서영이에게<h1>
<p>생일 축하해<p> <!--스타일 적용-->
</div>자식 요소들 중 같은 유형의 형제 관계인 요소가 없을 때, 그 외동 자식 요소를 선택할 것 을 선언한다.
:first-child
<style>
div h1:first-child {
color: blue;}
/*div 의 자식 요소들 중, 첫번째 자식 요소인 h1 요소에 스타일 적용*/
</style>
<div>
<h1>서영이에게<h1> <!--스타일 적용-->
<p>생일 축하해<p>
</div>부모 요소의 자식 요소들 중, 첫번째 자식 요소를 선택 할 것 을 선언한다.
:first-of-type
<style>
div p:first-of-type {
color: blue;}
/*div의 자식 요소인 같은 p 유형의 형제들 중, 첫번째 형제 요소인 p 요소에 스타일 적용-->
</style>
<div>
<h1>서영이에게<h1>
<p>생일 축하해<p> <!--스타일 적용-->
<p>우리가 친구가 된 지 벌써...</p>
<p>햇수로 12년째네...</p>
</div>같은 유형의 형제 관계인 요소들 중, 첫번째 형제 요소를 선택할 것 을 선언한다.
:last-child
<style>
div p:last-child {
color: blue;}
/*div의 자식 요소들 중, 마지막 자식 요소인 p 요소에 스타일 적용-->
</style>
<div>
<h1>서영이에게<h1>
<p>생일 축하해<p>
<p>우리가 친구가 된 지 벌써...</p>
<p>햇수로 12년째네...</p> <!--스타일 적용-->
</div>부모 요소의 자식 요소들 중, 마지막 자식 요소를 선택 할 것 을 선언한다.
:last-of-type
<style>
div p:first-of-type {
color: blue;}
/*div의 자식 요소인 같은 p 유형의 형제들 중, 마지막 형제 요소인 p 요소에 스타일 적용-->
</style>
<div>
<h1>서영이에게<h1>
<p>생일 축하해<p>
<p>우리가 친구가 된 지 벌써...</p>
<p>햇수로 12년째네...</p> <!--스타일 적용-->
</div>같은 유형의 형제 관계인 요소들 중, 마지막 형제 요소를 선택할 것 을 선언한다.
가상 요소 (pseudo-element)
가상 요소란, 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 적용하는 것을 의미한다.
ex) .h1 p::before{content:"new" : h1 태그의 p 요소 전에 new 라는 가상 요소를 삽입한다. (실제 출력 시, newp 로 출력된다.)
- 가상클래스: 콜론
:기호 1개 - 가상요소 : 콜론
:기호 2개 (ie8 이하 버전은 적용되지 않기 때문에 싱글콜론으로 표기하는 것이 낫다.)
가상 요소
::first-line
::first-letter
::before
::after
::marker
::selection
::placeholder
::first-line
텍스트의 첫번째 행을 선택할 것을 선언한다.
::first-letter
텍스트의 첫번째 글자를 선택할 것을 선언한다.
위 가상요소들은 사용할 수 있는 속성이 한정적이다.
font , color , background , margin , padding , border, text-decoration , text-transform , line-height , float , clear , vertical-align (단, float 속성값이 none일 경우에만)
<style>
p.q1::first-line {
text-decoration: underline;}
h1::first-letter {
font-size: 1.5em;
color: pink;}
</style>
<body>
<h1>Love quotes...</h1>
<p class="q1">Love, like you've never been hurt...</P>
<p>Love looks not with eyes, but with mind...</p>
</body>::before
실제 요소 앞에 가상의 자식요소를 생성하여 해당 요소를 선택할 것을 선언한다.
content 속성과 함께 사용한다.
::after
실제 요소 뒤에 가상의 자식요소를 생성하여 해당 요소를 선택할 것을 선언한다.
content 속성과 함께 사용한다.
<style>
li.m1::before {
content:"매콤한 ";}
li.m2 {
text-decoration: line-through;}
li.m2::after {
content: " (품절)";}
</style>
<body>
<h1>오늘 뭐 먹을까...</h1>
<li class="m1">부대찌개 밀키트</li>
<li class="m2">제육볶음 밀키트</li>
</body>::marker
마커 (불릿) 를 갖는 요소의 마커를 선택할 것을 선언한다.
li같은 불릿이 붙는 요소의 해당 불릿을 선택한다.content속성에 불릿 대신 넣을 기호나 텍스트를 입력할 수 있다.
::selection
마우스로 드래그하여 강조 된 텍스트를 선택할 것을 선언한다.
- 대표적으로
background-color속성을 이용하여 드래그 할 시 색상을 변경할 수 있다.
::placeholder
텍스트 필드의 힌트 속성이 부여된 요소를 선택할 것을 선언한다.
- 대표적으로
input속성의placeholder속성값을 선택하여 스타일을 적용한다.
