가상클래스 PseudoClass
표기방법
div:가상클래스{ }
//예시
div:hover{background-color: yellow;}
종류
hover
- mouseover 할때 나타나는 css 동작
<head>
<title>Step06_PseudoClass</title>
<style>
div:hover{
background-color: yellow;
}
</style>
</head>
<body>
<!-- 마우스가 hover 되었을때 배경색이 바뀌는 div -->
<div class="box bg-yellow"></div>
<div class="box"></div>
<div class="box"></div>
</body>
focus
- focus가 왔을때 나타날 css동작
<head>
<title>Step06_PseudoClass</title>
<style>
input:focus{
background-color: yellow;
}
</style>
</head>
<body>
<!-- focus가 왔을때 배경색이 바뀌는 input -->
<input type="text"/>
<input type="text"/>
<input type="text"/>
</body>
active
- 마우스 클릭시 나타날 css설정
<head>
<title>Step06_PseudoClass</title>
<style>
button:active{
width: 100px;
}
</style>
</head>
<body>
<!-- active 되었을때 (누르고 있을때) 크기가 바뀌는 버튼 -->
<button>active</button>
</body>
link
- 한번도 방문하지 않은 링크
a:link{color: olive;}
visited
- 이미 방문했던 링크
a:visited{color: brown;}
:nth-child
선택기는 부모에 관계없이 n번째 아이인 모든 요소와 일치한다.
가상요소 PseudoElement
표기방법
//문법
선택자::가상요소{ }
//예시
p::first-letter
종류
::first-letter
- 지정된 선택자의 첫 번째 문자에 스타일을 추가하는 데 사용함
- 참고 : https://www.w3schools.com/cssref/sel_firstletter.asp
p::first-letter { }
::first-line
- 지정된 선택자의 첫 번째 줄에 스타일을 추가하는 데 사용된다.
p::first-line {background-color: yellow;}
::before | after
- ::before - 어떤 요소의 컨텐츠가 시작하는 지점의 공간을 만들어줌
- ::after - 어떤 요소의 컨텐츠가 끝나는 지점의 공간을 만들어줌
- 만들어진 공간에는 띄어쓰기, 글자, 이미지 등이 들어갈 수 있다.
/*::before*/
p::before{
content: "(";
color: blue;
}
/*::after*/
p::after{
content: ")";
color: blue;
}
'CSS' 카테고리의 다른 글
| 이미 만들어져 있는 css요소를 div에 적용해보기 (0) | 2019.11.19 |
|---|---|
| p 요소 변경하기 (0) | 2019.11.19 |
| 속성(Properties)과 값(Value) (0) | 2019.11.19 |
| BoxModel (0) | 2019.11.19 |
| CSS 선언 / 선택자 (0) | 2019.10.29 |
