코드 그라데이션
13. 가상 클래스와 가상 요소 본문
가상 클래스
- 사용자 동작에 반응
- 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶으면 사용
1) 방문하지 않은 링크에 스타일을 적용하는 ‘link 가상 클래스 선택자’
- 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용
- 텍스트 링 크는 기본적으로 파란색 글자와 밑줄로 표시됨
- 이 때 링크의 밑줄을 없애거나 색상을 바꾸려면 ：link 선택자를 사용한다.
2) 방문한 링크에 스타일을 적용하는 ‘:visited 가상 클래스 선택자’
- 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용
- 한 번 이상 방문한 텍 스트 링크는 보라색이 기본값.
- 이 때 사용자가 방문한 텍스트 링크와 색상이 달라지 지 않게 하려면 :visited 선택자를 사용해 조절한다.
3) 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ‘:hover 가상 클래스 선택자’
- hover 선택자는 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용
4) 웹 요소를 활성화했을 때 스타일을 적용하는 ‘:active 가상 클래스 선택자’
- active 선택자는 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정
5) 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ‘:focus 가상 클래스 선택자’
- focus 선택자는 웹 요소에 초점이 맞추어졌을때 스타일 적용
적용순서
예제 - 메뉴의 텍스트를 상황에 따라 다르게 표현하는 문제
- 먼저 링크(a：link)와 방문했던 링크의 텍스트(a：visited)는 밑줄을 없앱니다.
- 링크 위로 마우스 포인터를 올려놓으면(a:hover) 짙은 회색 배경에 흰색 글자로 바뀌고,
- 클릭하는 순간(a ： active) 배경이 빨간색으로 바뀐다.
<!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 {
float: left;
width: 150px;
padding: 10px;
}
.navi a:link, .navi a:visited{ /* 방문한 링크와 방문하지 않은 링크를 설정 */
display: block;
font-size: 14px;
color :#000;
padding: 10px;
text-decoration: none; /* 밑줄 없앰 */
text-align: center;
}
.navi a:hover, .navi a:focus {
background-color: #222; /* 배경 색 */
color: #fff; /* 글자 색 */
}
.navi a:active {
background-color: #f00; /* 배경 색 */
}
</style>
</head>
<body>
<div class="container">
<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>
</div>
</body>
</html>
실행 결과
-위 : 포인터를 위로 올림
-아래 : 직접 클릭
요소 상태에 따른 가상 클래스
1) 앵커 대상에 스타일을 적용하는 ‘:target 가상 클래스 선택자’
- 문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고,
- 같은 문서 안에서 다른 위치로 이동할 때에는 앵커ancllor를 이용
- 이때 ：target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용 가능
예제 - 앵커 요소를 클릭했을 때 스타일 바꾸기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>가상 선택자</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; /* 배경 색 */
}
.contents {
margin: 30px auto;
width: 400px;
padding: 20px;
border: 1px solid #222;
border-radius: 5px;
}
#intro:target {
background-color:#0069e0;
color:#fff;
}
#room:target {
background-color:#ff9844;
}
#reservation:target{
background-color:#fff8dc;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<div id="intro" class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
</div>
<div id="room" class="contents">
<h2>객실 소개</h2>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
</div>
<div id="reservation" class="contents">
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>
</div>
</body>
</html>
실행 결과
2) 요소의 사용 여부에 따라 스타일을 적용하는 ‘:enabled와:disabled 가상 클래스 선택자’
- 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용
- 사용할 수 없는 상태 일 때 스타일을 지정하려면 :disabled 선택자를 사용
3) 선택한 항목의 스타일을 적용하는 ‘:checked 가상 클래스 선택자’
- 폼의 라디오박스나 체크박스에서 선택된 항목에는 checked 라는 속성이 추가된다.
- checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리하다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>IT 고르기</title>
<style>
#signup input:checked + label {
color: orange;
font-weight: bold;
}
#signup input:not([type=radio]):hover {
border-color: #f00;
}
</style>
</head>
<body>
<h1>IT 고르기</h1>
<form id="signup">
<p><b>HTML 좋아요 싫어요</b></p>
<input id="a" type="radio" name="gift" value="yes">
<label for="a">좋아요</label>
<input id="b"type="radio" name="gift" value="no">
<label for="b">싫어요</label>
<input type="button">sdfsadasadf</input>
</form>
</body>
</html>
실행 결과
4) 특정 요소를 제외하고 스타일을 적용하는 ‘:not 가상 클래스 선택자’
- 적용하려는 필드를 나열하는 것보다 적용하지 않은 필드가 더 적을 때, 이걸 사용하는 것이 더 편리하다.
구조 가상 클래스
- 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자
- 특정 요소에 스타일을 적용하려면 보통 class와 id 선택자를 사용
- 하지만....
- 요소가 여러 개 나열되어 있는 경우 class나 id를 사용하지 않고도
- 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상클래스 Test</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
.navi{
width:960px;
height:60px;
padding-bottom:10px;
border-bottom:2px solid darkorchid;
}
.navi ul{
list-style: none;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li {
float:left;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited{
display:block;
font-size:14px;
color:darkred;
padding: 10px;
text-decoration: none; /* 밑줄 없앰 */
text-align: center;
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경 색 */
color:yellow; /* 글자 색 */
}
.navi a:active {
background-color:red; /* 배경 색 */
}
#move:target{
background-color:#0069e0; /* 배경색 - 파란색 */
color:#fff; /* 글자색 - 흰색 */
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">공</a></li>
<li><a href="#">부</a></li>
<li><a href="#">하세</a></li>
<li><a href="#move">요</a></li>
</ul>
</nav>
<div>
<h2>공</h2>
<p>sakldfjalsdfklasdjfklasdjfklasdjfkladsjkfjasdklfjaksdlfjkalsdfjklasdjfklasdjfkladsjfkaldsfjklfjdsklfdsjfkaldsjfakdlsfjaklfjdsklfadjf</p>
</div>
<div>
<h2>부</h2>
<p>sakldfjalsdfklasdjfklasdjfklasdjfkladsjkfjasdklfjaksdlfjkalsdfjklasdjfklasdjfkladsjfkaldsfjklfjdsklfdsjfkaldsjfakdlsfjaklfjdsklfadjf</p>
</div>
<div>
<h2>하세</h2>
<p>sakldfjalsdfklasdjfklasdjfklasdjfkladsjkfjasdklfjaksdlfjkalsdfjklasdjfklasdjfkladsjfkaldsfjklfjdsklfdsjfkaldsjfakdlsfjaklfjdsklfadjf</p>
</div>
<div id="move">
<h2>요</h2>
<p>sakldfjalsdfklasdjfklasdjfklasdjfkladsjkfjasdklfjaksdlfjkalsdfjklasdjfklasdjfkladsjfkaldsfjklfjdsklfdsjfkaldsjfakdlsfjaklfjdsklfadjf</p>
</div>
</div>
</body>
</html>
실행 결과
예제 2 - 위치에 따라 자식 요소 선택하기
설명
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>가상 선택자</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; /* 배경 색 */
}
.contents {
margin: 30px auto;
width: 400px;
padding: 20px;
border: 1px solid #222;
border-radius: 5px;
}
.contents :nth-child(3) {
background-color: #ffff00;
}
.contents p:nth-of-type(3) {
background-color: #00b900;
}
</style>
</head>
<body>
<div class="container">
<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>
<div class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
<h2>객실 소개</h2>
<p>Irure incididunt duis ut cupidatat laborum adipisicing veniam irure.</p>
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>
</div>
</body>
</html>
실행 결과
수식을 사용해 위치 지정하기
- 위치를 지정할 때 :nth-child(n) 선택자처럼 위치를 정확히 알려 줄 수도 있지만 1, 3, 5번째 처럼 위치가 계속 바뀐다면 반복된 규칙을 찾아내서 an+b처럼 수식을 사용할수도 있다.
- 이때 n값은 0부터 시작.
- 또는 홀수 번째에 스타일을줄 때는 :nth-child(odd), 짝수 번째에 스타일을 줄 때는 : nth-child (even)을 사용
예제
- 선택자 tr:nth-of-type(2n+l)을 사용해 표의 홀수 번째 열에만 배경색을 넣는 스타일을 정의
<!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-of-type(2n+1) { /* 홀수 번째 열에만 스타일 적용 */
background:lightgray;
color:black;
}
</style>
</head>
<body>
<div id="container">
<h1>웹 개발</h1>
<table>
<tr>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
<tr>
<td>Javascirpt</td>
</tr>
<tr>
<td>React</td>
</tr>
<tr>
<td>node.js</td>
</tr>
</table>
</div>
</body>
</html>
실행 결과
가상 요소
- 가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면,
- 가상 요소는 문서 안 의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가.
- 가상요소를만 들어 사용하는 이유는 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위함.
- 가상 요소는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개 （：：）를붙여서 표시
첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 ‘::first-line 요소, ::first-letter 요소’
- ::first-line 요소와 ::first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용
- ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리킨다.
- 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.
- <p> 태그 안에 <br> 태그가 있어서 첫 번째 글자가 첫 번째 줄에 없을 경우에는 적용할 수 없습니다.
<가상 요소 선택자>
내용 앞뒤에 콘텐츠를 추가하는 ::before 요소, ::after 요소
- before 요소와 after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.
- 이 요소를 사용하면 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있다.
예제 - 가상 요소를 사용해 스타일 적용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 요소 마지막</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
ul li {
margin:15px;
}
li.new::after {
content:"NEW!!";
font-size:x-small;
padding:2px 4px;
margin: 0 10px;
border-radius:2px;
background:#f00;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="new">시계</li>
<li>자동차</li>
<li>배</li>
<li class="new">비행기</li>
</ul>
</div>
</body>
</html>
실행 결과
문제 1
정답 화면
조건
- 가상 클래스를 사용하여 첫 번째 이미지를 선택한다.
- 첫 번째 이미지 스타일은 테두리 색상을 빨강, 두께를 10px 로 지정한다.
답안 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
img {
width: 400px;
height: auto;
margin-right:50px;
border:1px solid #ccc;
box-shadow: 2px 2px 5px #ccc;
}
img:first-of-type {
border:10px solid #f00;
/* border 의 색상과 두께를 따로 지정해도 됩니다.
border-color:#f00;
border-width: 2px;
*/
}
</style>
</head>
<body>
<img src="images/이미지1.png" alt="">
<img src="images/이미지2.png" alt="">
<img src="images/이미지3.png" alt="">
</body>
</html>
문제 2
정답 화면
조건
- 메뉴 6에 있는 테두리를 없앤다.
- 메뉴 6의 테두리를 없애고 나면 메뉴 전체 너비가 길어진다. 이를 조금 줄여라
- 메뉴 6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색과 글자색이 바뀌게
- 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경색과 글자색이 바뀌게
답안 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
* {
box-sizing: border-box;
}
.top-menu {
margin:50px auto;
padding:0;
list-style:none;
width:605px;
height:35px;
box-shadow:0 3px 4px #8b8b8b;
background-color:orange;
}
.top-menu li {
float:left;
border-right:1px solid #929292;
}
.top-menu li a:link{
color:black;
text-decoration:none;
text-align:center;
display:block;
width:100px;
height:35px;
line-height: 35px;
}
.top-menu li a:visited {
color:black;
}
.top-menu li:last-child {
border-right:none;
}
.top-menu li:not(:last-child) a:hover {
background-color:#555;
color:#fff;
}
.top-menu li:last-child a:hover {
background-color:#b30000;
color:#fff;
}
</style>
</head>
<body>
<nav>
<ul class="top-menu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
</nav>
</body>
</html>
728x90
'Front > Mega-CSS' 카테고리의 다른 글
| 15. 트랜지션 (6) | 2023.06.03 |
|---|---|
| 14. 변형 (1) | 2023.06.03 |
| 12. 속성 선택자 (0) | 2023.05.16 |
| 11. 연결 선택자 (0) | 2023.05.15 |
| 10. 색 그라데이션 (0) | 2023.05.14 |
'Front/Mega-CSS' Related Articles
more
Comments