가상 요소 선택자
BEFORE
- 선택자 요소의 내부 앞에 내용을 삽입.
- content: "내용"; => 필수 속성!
- 콜론 두 개( :: ) 사용
AFTER
- 선택자 요소의 내부 뒤에 내용을 삽입.
=> before & after 둘 다 삽입된 내용은 인라인 요소로 인식됨.
<body>
<div class="box"> Box </div>
</body>.box::before {
content: "앞!";
}
.box::after {
content: "뒤!"
}
속성 선택자
ATTR
- 속성을 포함한 요소 선택
- 대괄호로 표현
ATTR = VALUE
- 속성을 포함하고 값도 일치하는 요소 선택
[disabled] {
color: red;
}
[type="password"] {
color: red;
}
추가 응용 1
before & after 선택자는 content 값으로 단순 문자열뿐 아니라 선택 요소의 속성 값을 가져올 수 있다.
<button class="user" data-userName="rien"></button>위와 같이 data-userName 속성의 값으로 rien을 가지고 있는 클래스 이름이 user인 button요소가 있다고 한다면
.user::before {
content: attr(data-userName)"님 환영합니다!";
color: royalblue;
}
html에 저장해 둔 data 속성의 값을 꺼내 css에서 적용할 수 있다.
추가 응용 2
또한 content 속성의 값을 비워두고 그 자체를 도형으로 이용해 문자열을 장식할 수 있다.
<span class="element"> CSS 가상 요소 선택자 </span>/* => 콤마 ( , )를 이용하여 다중 선택 가능. */
.element::before,
.element::after {
content: "";
display: block;
height: 2px;
background-color: #333;
}
content 속성을 비워둔 다음, 기본적으로 inline성격을 가지고 있기 때문에 display 값을 block으로 지정해 준다.
그러면 요소의 성격이 block요소로 바뀌게 되면서 가로 값이 부모 요소의 크기 만큼 늘어나며 콘텐츠의 위, 아래에 가상 요소가 배치되는 특성을 갖는다.
높이값과 배경 색상을 지정해 주면 위아래에 밑줄이 그어져 있는 장식 효과를 얻을 수 있다.
추가 응용 3
- ::after 이용하여 커서 깜빡이는 효과 만들기
<div class="box">
<span class="element">CSS 가상 요소 선택자</span>
</div>.box {
width: 200px;
height: 30px;
background-color: aquamarine;
}
.element::after {
content: "";
width: 1px;
height: 20px;
background-color: #333;
display: inline-block;
animation: blink .7s ease-in-out infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
content 속성을 비워두고 가로 값은 1px 세로 값은 20px을 주면 요소 끝에 선 하나가 생기게 된다.
이 요소를 css @keyframes를 이용하여 불투명도를 1에서 0으로 바꾸는 애니메이션을 만들어서 적용해 주면
커서가 깜빡이는 듯한 효과를 넣을 수 있다.
'코드 정리 > CSS' 카테고리의 다른 글
| CSS 단위와 색상표현 (0) | 2022.11.15 |
|---|---|
| CSS 스타일의 상속과 선택자 우선순위 (0) | 2022.11.15 |
| CSS 선택자 - 가상 클래스 선택자 (0) | 2022.11.13 |
| CSS 선택자 - 기본 선택자와 복합 선택자 (0) | 2022.11.13 |
| CSS 기본 문법과 선언 방식 (0) | 2022.11.13 |
