[CSS] 가상 요소 (Pseudo-elements) / ::after, ::before
by mini_min[CSS] 가상 요소 (Pseudo-elements) / ::after, ::before
✔️ 가상 요소
: 가상 요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.
: 예를 들어, ::first-line 을 사용하면 문단 첫 줄의 글씨체만 변경가능!
✨ 가상 요소는 클래스와 달리, 특정 부분에만 스타일 적용할 때 사용
📓 형식
: 가상 요소에는 두 개의 콜론을 사용한다 !!
.subject > p:first-line {color: blue;}
.subject > p:first-letter {color: red; font-weight: bold;}
.city > p:before {content: "※ ";}
.city > p:after {content: " !!!"; color: blue; font-weight: bold;}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.subject > p:first-line {color: blue;}
.subject > p:first-letter {color: red; font-weight: bold;}
.city > p:before {content: "※ ";}
.city > p:after {content: " !!!"; color: blue; font-weight: bold;}
</style>
</head>
<body>
<h3>가상 요소(Pseudo-elements)</h3>
<div class="subject">
<p>프로그래밍<br>자바</p>
<p>프레임워크<br>스프링</p>
<p>데이터베이스<br>오라클</p>
<p>웹프로그래밍<br>서블릿</p>
</div>
<hr>
<div>
<p>:before, :after</p>
<p>
어떤 엘리먼트의 앞(before)과 뒤(after)에 내용을 삽입하기 위해 사용된다.
content 속성이 있어야만 유효하다.
</p>
</div>
<div class="city">
<p>서울</p>
<p>경기</p>
<p>인천</p>
</div>
</body>
</html>💡 :before, :after
어떤 엘리먼트의 앞(before)과 뒤(after)에 내용을 삽입하기 위해 사용된다. content 속성이 있어야만 유효하다.
📓 카페 메뉴판 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.cafe {padding: 20px; }
.cafe > ul {list-style: none; padding: 0;}
.cafe > ul li {margin: 10px 0;}
.cafe > ul li.sale:before {
content: "SALE!\A할인"; /* \a : 줄바꿈 */
display: inline-block; /*display 덕분에 붙음! */
width: 30px; text-align: center;
padding: 3px 7px; margin-right: 5px;
font-size: x-small;
border-radius: 4px;
color: #fff; background: #f55;
white-space: pre; /*강제 줄바꿈을 위해 \a 있음에도 강제로 줄바꿔줌 ! . width 가 크면 한 줄로 표시됨*/
}
.java ol {padding: 0;}
.java li {list-style: none; counter-increment: chapter;} /*chapter 의 카운트 값을 1 증가*/
.java li:before {
content: "제 " counter(chapter) " 장 "; /*chapter 의 count 값을 표시*/
}
</style>
</head>
<body>
<h3>카페 메뉴</h3>
<div class="cafe">
<ul>
<li class="sale">아메리카노 - 2,500원</li>
<li>에스프레소 - 4,500원</li>
<li>카페라떼 - 5,000원</li>
<li class="sale">카푸치노 - 5,500원</li>
</ul>
</div>
<hr>
<h3>목록 카운터 증가</h3>
<div class="java">
<ol>
<li>자바란 ?</li>
<li>기본 프로그램</li>
<li>자료형</li>
<li>제어문</li>
</ol>
</div>
</body>
</html>카페 메뉴
- 아메리카노 - 2,500원
- 에스프레소 - 4,500원
- 카페라떼 - 5,000원
- 카푸치노 - 5,500원
목록 카운터 증가
- 자바란 ?
- 기본 프로그램
- 자료형
- 제어문
💡 display: inline-block; 해줘야, 줄바꿈한 내용이 이어진다.
💡 white-space: pre; /*강제 줄바꿈을 위해 \a 있음에도 강제로 줄바꿔줌 ! . width 가 크면 한 줄로 표시됨*/
'HTML' 카테고리의 다른 글
| [CSS] 텍스트 관련 스타일 (font) / 웹 폰트 가져오기 (0) | 2022.09.15 |
|---|---|
| [CSS] 사용자 지정 속성(변수) var() 함수 (0) | 2022.09.14 |
| [CSS] 가상 클래스 (Pseudo-classes) (0) | 2022.09.14 |
| [CSS] 결합자 (Combinator) : 인접 형제 / 일반 형제 / 자식 / 후손 (0) | 2022.09.14 |
| [CSS] 선택자(Selector) ⭐⭐ / Attribute Selector / class Selector (0) | 2022.09.14 |
블로그의 정보
개발자 미니민의 개발로그
mini_min