https://www.udemy.com/course/so_easy_html_css/
유데미 <너무 쉬운 HTML/CSS 입문> 에서 학습한 내용을 정리하였다.
가상클래스(Pseudo Class),가상 요소(Pseudo Element)에 대해 알아보자.
1. 슈도 코드(pseudocode)
프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위해 사용하는 언어.
다른 프로그램 개발자나 이용자에게 모듈이 하는 일과 작동원리를 설명하는 데에 쓴다.
2. :hover 가상 클래스
가상 클래스(pseudo class)를 이용하면 요소의 상태에 따른 스타일 지정이 가능.
:hover : 마우스가 위에 있을 때 적용.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {width: 200px; background-color: lightcyan;}
div:hover {background-color: magenta;}
a:hover {color: lightgreen;}
</style>
</head>
<body>
<a href="#">Click Here</a>
<div>
This is a normal div.
</div>
</body>
</html>
This is a normal div에 마우스를 올려놓으면
요로케 바뀜.
hover는 일종의 이벤트라고 생각해도 됨.
3. :hover시 나타남.
먼저 display:none 상태로 지정하고 :hover 시 바꿔주면 나타나는 효과 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.help {background-color: lightcyan;}
.help p {display: none;
background-color: yellow;}
.help:hover p {display: block;}
</style>
</head>
<body>
<div class="help">
help
<p>Hi, what can I help you?</p>
</p>
</div>
</body>
</html>
이 상태였다가
help 위에 마우스를 올려놓으면
요렇게 바뀐다.
스타일에서
class 명에 가상클래스를 붙이면
.클래스명:가상클래스 태그명
ex)
.help:hover p
태그에 가상클래스를 붙이면
태그명:가상클래스
ex)
div:hover
4. :focus , :checked
폼(Form) 요소에 주로 쓰이는 가상 클래스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {background-color: lightsteelblue;}
input:checked{width: 20px; height: 20px;}
</style>
</head>
<body>
<div>
<label for = "txtName">Your Name</label>
<input type="text" name="txtName">
</div>
<div>
<label for = "chkEmail">Email receive</label>
<input type="checkbox" name="chkEmail">
</div>
</body>
</html>
저 텍스트박스를 누르면(:focus)
이렇게 파란색으로 변하고
체크박스에 체크하면(:checked)
이렇게 크게 변한다.
5. :first-child, :last-child
-해당 그룹의 요소들 중에서(자식 포함) 첫번째 것, 마지막 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {border: 1px solid;}
p:first-child {color:red;}
p:last-child { font-weight: bold;
font-style: italic;}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<div>
<p>p3-1</p>
<p>p3-2</p>
</div>
</div>
</body>
</html>
첫번째 자식은 여러개 있을 수 있지만
마지막 자식은 그 대의 제일 마지막 자식만 이야기한다.
6. ::before, ::after 가상 요소
해당 요소의 시작 전, 후의 가상 요소에 대한 스타일을 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 p {float: left;}
#div1::before{display: block;
content: "inserted before";}
#div1::after{content: "";
clear: both;
display: table;}
</style>
</head>
<body>
<div id="div1">
<p>This is a floating text</p>
</div>
</body>
</html>
7. hover시 이미지가 바뀌는 링크 만들기
오마이갓.. 진짜 모르겠다..
답을 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.changeImg img {
width: 100px;
height: auto;
}
.changeImg img:last-child {
display: none;
}
.changeImg:hover img:first-child {
display: none;
}
.changeImg:hover img:last-child {
display: inline-block;
}
</style>
</head>
<body>
<a href="#" class="changeImg">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<img src="https://lh3.googleusercontent.com/3zkP2SYe7yYoKKe47bsNe44yTgb4Ukh__rBbwXwgkjNRe4PykGG409ozBxzxkrubV7zHKjfxq6y9ShogWtMBMPyB3jiNps91LoNH8A=s500">
</a>
</body>
</html>changeImg라는 클래스를 정의할 때
먼저 img 속성들을 다 정의를 해줬다.
그리고 img들 중 last -child는 처음에는 안 보이기로 해두었다가.
hover시 inline-block으로 보이도록 했다.
img들 중 first-child는 초반에는 그냥 보이는 것이니 아무 설정도 하지 않고
hover시 안 보이게 된다.
google 위에 마우스를 올리면
요렇게 바뀐다.
'Front-End > HTML_CSS' 카테고리의 다른 글
| [CSS] tsx 내의 string에서 줄바꿈이 안되는 문제 해결 (0) | 2023.09.22 |
|---|---|
| [CSS] position: fixed일 때 상하스크롤이 안되는 문제 해결 (0) | 2023.06.12 |
| [HTML/CSS] 220317 학습일기 (0) | 2023.03.18 |
| [HTML/CSS] 230316 학습일기 (0) | 2023.03.17 |
| [HTML/CSS]220314 학습일기 (0) | 2023.03.15 |
