티스토리 뷰
반응형
✏️ 사용자 동작에 반응하는 가상 클래스
사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 함
#1 가상 클래스 - link 가상 클래스 선택자
웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용
텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시 / 이때 링크의 밑줄을 없애거나 색상을 바꿀 수 있음
#2 가상 클래스 - visited 가상 클래스 선택자
웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용하며 한 번 이상 방문한 링크는 보라색이 기본값
사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 visted 선택자를 사용하여 조절
#3 가상 클래스 - hover 가상 클래스 선택자
웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용 / 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바꾸거나, 메인 메뉴 위로 마우스 포인터를 올렸을 때 서브메뉴가 나타나는 효과를 만들 수 있음
#4 가상 클래스 - active 가상 클래스 선택자
웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정
예를 들면 어떤 웹 요소의 링크를 클릭하는 순간의 스타일을 지정
#5 가상 클래스 - focus 가상 클래스 선택자
웹 요소에 초점이 맞춰졋을 때 스타일을 적용 / 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에
tab키를 눌러 입력 커서를 이동하였을 때 스타일을 적용
※예시
<!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><!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>
✏️ 요소 상태에 따른 가상 클래스
웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 수 있음, 이때 가상 클래스 선택자를 사용
#1 target 가상 클래스 선택자
문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때는 앵커를 이용 / 이때 target 선택자를 사용하면 앵커로 연결된 부분의 스타일을 쉽게 지정할 수 있음
#2 enabled와 disabled 가상 클래스 선택자
해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 enabled 선택자를
해당 요소가 사용할 수 없는 상태일 때 스타일을 지정하려면 disabled 선택자를 사용
예를 들면, 텍스트 영역 필드를 사용해 회원 약관을 보여줄 때는 사용자가 입력할 수 없도록 disabled속성을 사용
#3 checked 가상 클래스 선택자
폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가됨 / 이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 : checked 선택자를 사용하면 편리해짐
<!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; /* 배경색 */
}
#signup {
background:#fff;
border:1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup fieldset:first-of-type label {
float: left;
font-size: 13px;
width: 60px;
}
/* #signup input[type=text], input[type=tel] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
} */
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:not([type=radio]):hover {
border-color: #f00;
}
#signup input:checked + label { /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color:red; /* 글자색 */
font-weight:bold; /* 글자 굵게 */
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font: 16px 맑은고딕,굴림,돋움;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup b {
float: left;
font-size: 13px;
width: 110px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="ps-1.html#intro">이용 안내</a></li>
<li><a href="ps-1.html#room">객실 소개</a></li>
<li><a href="ps-1.html#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<form id="signup">
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" required>
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel">
</li>
</ul>
</fieldset>
<fieldset>
<legend>객실 형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic">
<label for="basic">기본형(최대 2인)</label>
<li>
<li>
<input type="radio" name="room" id="family">
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
<button type="submit"> 제출 </button>
</form>
</div>
</body>
</html>
#4 not 가상 클래스 선택자
not은 괄호 안에 있는 요소를 제외한이라는 의미를 지니고 있음
<!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; /* 배경색 */
}
#signup {
background: #fff;
border: 1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin: 30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup fieldset:first-of-type label {
float: left;
font-size: 13px;
width: 60px;
}
/* #signup input[type=text], input[type=tel] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
} */
#signup input:not([type="radio"]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:not([type="radio"]):hover {
border-color: #f00;
}
#signup input:checked + label {
/* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color: red; /* 글자색 */
font-weight: bold; /* 글자 굵게 */
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font: 16px 맑은고딕, 굴림, 돋움;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup b {
float: left;
font-size: 13px;
width: 110px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="ps-1.html#intro">이용 안내</a></li>
<li><a href="ps-1.html#room">객실 소개</a></li>
<li><a href="ps-1.html#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<form id="signup">
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" required />
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel" />
</li>
</ul>
</fieldset>
<fieldset>
<legend>객실 형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic" />
<label for="basic">기본형(최대 2인)</label>
</li>
<li></li>
<li>
<input type="radio" name="room" id="family" />
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
<button type="submit">제출</button>
</form>
</div>
</body>
</html>위 코드를 보면
#signup input:not([type="radio"]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:not([type="radio"]):hover {
border-color: #f00;
}
// 이런 부분이 있는데 radio특성을 제외한 text와 tel에만 스타일을 적용한다는 의미
구조 가상 클래스
웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자
✏️ 특정 위치의 자식 요소 선택하기
| 종류 | 설명 |
| : only chid | 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 사용 |
| A : only type of | 부모 안에 A 요소가 하나뿐일 때 선택 |
| : first-child | 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택 |
| : last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택 |
| A: first-of-type | 부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택 |
| A: last-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소를 선택 |
| : nth-child(n) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택 |
| : nth-last-child(n) | 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택 |
| A: nth-of-type(n) | 부모 안에 있는 A 요소 중에서 n번째 요소를 선택 |
| A: nth-last-of-type(n) | 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택 |
※ nth-child(n)과 A:nth-of-type(n)의 차이점
<!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> .contents :nth-child(3) {
background-color:#ffff00;
}
.contents p:nth-of-type(3) {
background-color:#00b900;
}
먼저 nth-child(3)부분은 content요소 안에서 세 번째 자식 요소이므로 qui magna~~부분에 적용이 되고
p:nth-of-type(3) 부분은 content안에서 p요소 중에 세 번재 이므로 Irure inc~~ 부분에 적용이 됨
※ 수식 사용하기
nth-child(n)으로 사용할 수도 있지만 홀수나 짝수처럼 반복된 규칙을 찾아서 n대신 an+b로 사용할 수도 있음
✏️ 가상 요소
가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가 / 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위함
::first-line 요소와 ::first-letter요소
지정한 요소의 첫 번째 줄이나 첫 번째 글자의 스타일을 적용할 수 있음
::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키므로 첫 번째 글자는 반드시 첫 번째 줄에 있어야 함
만약 <p>태그 안에 <br>태그가 있어서 첫 번째 글자가 첫 번째 줄에 없을 경우에는 적용 불가능
::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">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="new">제품 D</li>
</ul>
</div>
</body>
</html>
<li> 태그 안에는 new라는 텍스트를 추가하지 않았지만 new라는 클래스에서
after요소를 사용해 new를 추가하여서 화면과 같이 출력
반응형
'Web > CSS' 카테고리의 다른 글
| [Web/CSS] CSS - 변형 함수 (0) | 2024.04.29 |
|---|---|
| [Web/CSS] CSS - 복습 5 (0) | 2024.04.29 |
| [Web/CSS] CSS - 속성 선택자 (0) | 2024.04.26 |
| [Web/CSS] CSS - 연결 선택자 (0) | 2024.04.26 |
| [Web/CSS] CSS - 복습4 (0) | 2024.04.24 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 백준
- C++
- 자바스크립트
- 세그먼트 트리
- DP
- 이분 매칭
- 최단 경로
- 유클리드 호제법
- 자바
- DFS
- C++ Stack
- BFS
- 자료구조
- html
- 에라토스테네스의 체
- js
- Do it!
- java
- 알고리즘
- 유니온 파인드
- 카운팅 정렬
- 투 포인터
- 알고리즘 공부
- HTML5
- c++ string
- 우선순위 큐
- 백준 풀이
- 스택
- CSS
- 반복문
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
글 보관함