사용자 동작에 반응하는 가상 클래스
사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일을 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용합니다.
1. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용
- 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다.
- 텍스트 링크는 기본적으로 파란색글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할때 :link선택자를 사용합니다.
2. :visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용
- 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용합니다.
- 방문한 텍스트 링크는 기본적으로 자주색으로 표시되는데 사용자가 방문했던 링크도 일반 텍스트 링크와 색상이 달리지지 않게 하려면 :vistied선택자를 사용합니다.
3. :hover 가상 클래스 선택자 - 웹 요소에 마우스 커서를 올려놓을 떄의 스타일 적용
- 웹 요소 위로 마우스 커서를 올려놓을 떄의 스타일을 지정합니다. 이 가상 클래스 선택자를 응용하면 이미지 위로 마우스 커서를 올려놓으면 다른 이미지로 바뀌었다가 마우스 커서를 치우면 원래 이미지로 돌아오는 롤오버 효과를 만들 수 있습니다.
4. :active 가상 클래스 선택자 - 웹 요소를 활성화했을 때의 스타일 적용
- 링크나 이미지 등의 웹 요소를 활성화했을 때(누르고 있을때)의 스타일을 지정합니다.
- 예를들어 링크를 클릭했을 떄의 스타일을 지정합니다.
5. :focus 가상 클래스 선택자 - 웹 요소에 초접이 맞추어졌을 때의 스타일 적용
- 웹 요소에 초점이 맞추어졌을 떄의 스타일을 지정합니다.
- 예를들어 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나
tab키를 눌러 초점을 이동했을 때의 스타일을 지정합니다.
가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 합니다.
- 앞에서 살펴본 1~4번 4개의 가상 클래스를 모두 정의한다면 :link 선택자 부터 정의하고 :vistied, :hober, :active 순서대로 정의합니다.
- 이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않습니다. (lv.haf로 순서기억!)
링크에서 가상 선택자 사용하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>link 스타일</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
.navi{
width:960px;
height:60px;
padding-bottom:10px;
border-bottom:2px solid #ccc;
}
.navi ul{
list-style: none;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li {
display:inline-block;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited {
font-size:14px;
padding: 10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경 색 */
color:#fff; /* 글자 색 */
}
.navi a:active {
background-color:#f00; /* 배경 색 */
}
</style>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="https://velog.io/@jyyoun1022" target="_blank">나의 벨로그</a></li>
<li><a href="https://github.com/jyyoun1022" target="_blank" >나의 깃허브</a></li>
<li><a href="https://www.youtube.com/" target="_blank" >유튜브</a></li>
<li><a href="https://www.netflix.com/browse" target="_blank" >넷플릭스</a></li>
</ul>
</nav>
</div>
</body>
</html>
UI요소 상태에 따른 가상 클래스
사용자의 동작뿐만 아니라 웹 요소의 상태에 따라 스타일 지정할 때도 가상 클래스 선택자를 사용합니다.
그 중에서도 UI 요소의 상태에 따른 가상 클래스는 웹 사이트나 앱 화면을 디자인할 떄 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용합니다.
:enalbed와 :disabled 가상 클래스 선택자 - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
-
해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled 클래스를 사용하고 해당요소가 사용 불가능한 상태일 떄의 스타일을 지정하려면 :disabled 클래스를 사용합니다.
-
예를 들어 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드(text area)를 게시판 입력화면으로 사용할 때는 enalbed 상태지만 회원 약관 등을 보여 줄 때는 사용자가 내용을 보기만 해야 하므로 disabled상태로 만들어야 합니다.
:cheked 가상 클래스 선택자 - 라디오 박스나 체크박스에서 해당 항목을 선택했을 떄의 스타일 지정
라디오 버튼을 클릭했을 떄 스타일 적용하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 가상 클래스 </title>
<style>
body {
background-color:#fff;
}
form fieldset{
margin-bottom:25px;
}
form legend{
font-size:15px;
font-weight:600;
}
input:disabled {
background:#ddd;
border:1px #ccc solid;
}
input:checked + span {
color:blue;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>사용자 정보</legend>
<label>이름 <input type="text" disabled></label>
</fieldset>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요</p>
<label><input type="radio" name="subject" value="speaking" checked><span>회화</span></label>
<label><input type="radio" name="subject" value="grammar"><span>문법</span></label>
<label><input type="radio" name="subject" value="writing"><span>작문</span></label>
</fieldset>
</form>
</body>
</html>
구조 가상 클래스
말 그대로 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자 입니다.
:root 가상 클래스 선택자 -문서 전체에 적용하기
- 문서 안의 루트요소에 스타일을 적용합니다.
- HTML문서에서는 루트 요소가 HTML이므로 HTML요소에 스타일이 적용됩니다.
- 웹 문서 구조에서 최상위 요소,즉 뿌리 부분은
<root>태그입니다. - 전체적으로 문서 안에 똑같이 적용할 스타일이 있을 경우 :root 선택자를 이용해 지정합니다.
:nth-child(n), :nth-last-chlid(n) 가상 클래스 선택자- 자식 요소의 위치에 따라 스타일 적용하기
- 웹 문서에서 특정 부분에 스타일을 적용하려면 보통 class나 id선택자를 이용해 이름을 붙여주고 그 클래스나 id에 대한 스타일을 정의하면 됩니다.
- 하지만 여러 개의 항목이 일렬(가로나 세로)로 나열되어 있는 경우, class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할 수 있습니다.
- 주로 메뉴 항목에 이 스타일을 적용합니다.
- 세번째에 있는 메뉴 항목이든 끝에 있는 메뉴 항목이든 원하는 위치에 따라 요소를 찾아 스타일을 지정할 수 있기 때문입니다.
- :nth-chlid(n)는 앞에서부터 n번째 자식 요소에 스타일을 적용하고, :nth-last-child(n)는 끝에서부터 n 번째인 자식 요소에 스타일을 적용합니다.
- an+b처럼 수식을 사용할 수 있는데 이때 n값은 0부터 차례대로 정수를 대입해 계산합니다.
- 다만 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 갖고 있어야만 한다.
- 즉 문서 구조로 표시했을때 모두 같은 레벨의 요소여야 합니다.
👉//div요소 안에서 세번째 자식 요소인 p요소에 스타일 적용
div p:nth-child(3)
👉//div요소 안에서 홀수 번째로 나타나는 자식 요소인 p요소에 스타일 적용
div p:nth-child(odd), div p:nth-child(2n+1)
👉//div요소 안에서 짝수 번째로 나타나느 자식 요소인 p요소에 스타일 적용
div p:nth-child(even), div p:nth-child(2n+0), div p:nth-child(2n)
표의 홀수 번쨰 열에만 배경 색 넣기
(table tr:ntl-child(odd))
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>가상 클래스</title>
<style>
#container {
text-align:center;
color:#2b2b2b;
}
table, tb, th {
border:1px solid #ccc;
}
table {
width:200px;
margin:0 auto;
border-collapse:collapse;
}
td {
text-align:left;
padding:10px;
padding-left:20px;
}
table tr:nth-child(2n+1) {
background:lightgray;
color:black;
}
</style>
</head>
<body>
<div id="container">
<h1>건강에 좋은 건강 식품</h1>
<table>
<tr>
<td>블루베리</td>
</tr>
<tr>
<td>귀리</td>
</tr>
<tr>
<td>토마토</td>
</tr>
<tr>
<td>시금치</td>
</tr>
<tr>
<td>적포도주</td>
</tr>
<tr>
<td>견과류</td>
</tr>
<tr>
<td>브로콜리</td>
</tr>
<tr>
<td>연어</td>
</tr>
<tr>
<td>마늘</td>
</tr>
<tr>
<td>녹차</td>
</tr>
</table>
</div>
</body>
</html>
:nth-of-type(n), :nth-last-of-type(n)가상 클래스 선택자 - 특정 태그 위치에 스타일 적용하기
<p>태그나<li>태그가 여러개 나열되어 있고 각 태그나 id나 class를 사용하지 않은 상태에서 몇 번째에 있는<p>태그 또는 몇 번쨰에 있는<li>태그처럼 태그에 따라 몇 번쨰에 있는 항목인지를 지정해 스타일을 적용할 떄 이 가상 클래스 선택자를 사용합니다. :nth-of-type(n)은 앞에서 부터 세어 n번째 요소이고 :nth-last-of-type(n)은 끝에서부터 세어 n번째 요소에 스타일을 적용합니다.
:first-child, :last-child 가상 클래스 선택자- 첫 번째,마지막 요소에 스타일 적용하기
- :fist-child는 첫 번째 자식 요소를 선택해 스타일을 적용하고 :last-child 는 마지막 자식 요소에 스타일을 적용합니다. 예를 들어 section p:first-child는 section의 p 자식 요소들 중 첫번째 p자식 요소를 가리킵니다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Gradient Menu</title>
<style>
ul.navi li {
list-style-type: none; /* 불릿 없앰 */
display: block; /* 영역 만듦 */
width: 8em; /* 너비 */
height: 3em; /* 높이 */
float: left; /* 왼쪽으로 플로팅 */
text-align: center; /* 가운데 정렬 */
font-family: "Lucida Grande", sans-serif; /* 글꼴 */
border: 1px #818181 solid; /* 테두리 */
box-shadow: 1px 1px 1px #bbb; /* 박스 그림자 */
}
/* 메뉴 링크 스타일 */
ul.navi li a {
display: block; /* 영역 만듦 */
padding: .8em .5em .5em .5em; /* 안여백 */
text-decoration: none; /* 밑줄 없앰 */
color: #292929; /* 글자색 */
text-shadow: 1px 1px 0px #cccccc; /* 텍스트 그림자 */
}
/* 메뉴 링크 위로 마우스 오버했을 때의 스타일 */
ul.navi li:hover{
background-color: #333333; /* 배경색 */
}
/* 메뉴 링크 위로 마우스 오버한 후 링크 스타일 */
ul.navi li:hover > a{
color:#FFF; /* 글자색 */
text-shadow:0px 1px 0px #fff; /* 텍스트 그림자 */
}
/* 첫번째 항목의 스타일 */
ul.navi li:first-child {
border-top-left-radius: 1em;/* 왼쪽 상단 코너를 부드럽게 */
border-bottom-left-radius: 1em;/* 왼쪽 하단 코너를 부드럽게 */
}
/* 마지막 항목의 스타일 */
ul.navi li:last-child {
border-top-right-radius: 1em; /*오른쪽 상단 코너를 부드럽게 */
border-bottom-right-radius: 1em;/* 오른쪽 하단 코너를 부드럽게 */
}
</style>
</head>
<body>
<div>
<ul class="navi">
<li id="home"><a href="#">Home</a></li>
<li id="html"><a href="#">HTML5</a></li>
<li id="css"><a href="#">CSS3</a></li>
<li id="jquery"><a href="#">JQuery</a></li>
</ul>
</div>
</body>
</html>
ul의 li자식 요소 중 첫번째 li요소와 마지막 li요소의 왼쪽과 오른쪽 모소리를 둥글게 처리하도록 스타일을 지정
가상요소
가상 클래스 선택자가 여러 태그 중에서 원하는 태그를 선택하기 위해 사용하는 선택자라면 가상 요소는 내용의 일부만 선택해 스타일을 적용할때 사용합니다.
- 가상 요소는 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두개(::)를 붙입니다.
::first-line요소와 ::first-text요소 - 첫 번째 줄, 첫 번째 글자에 스타일 적용하기
- 이 요소들을 사용하면 지정한 요소의 첫 번째줄이나 첫 번째 글자에 스타일을 쉽게 적용할 수 있습니다.
- ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데 첫 번째 글자는 반드시 첫 번째 줄에 있어야 합니다.
- 만약
<p>태그 안에<br>태그가 있어 첫 번째 글자가 첫 번째 줄에 없을 경우 적용할 수 없습니다.
::before, ::after 요소 -내용의 앞뒤에 콘텐츠 추가하기
- 이 요소를 사용하면 특정 요소의 내용 앞이나 뒤에 지정한 내용을 넣을 수 있습니다.
- 다시 말해 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>link 스타일</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
ul li {
margin:15px;
}
li.hot::after {
content:"NEW!!";
font-size:x-small;
padding:2px 4px;
margin: 0 10px;
border-radius:2px;
background:#f00;
color:#fff;
}
</style>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
</head>
<body>
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="hot">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="hot">제품 D</li>
</ul>
</div>
</body>
</html>
블로그 이전합니다! https://jyyoun1022.tistory.com/