<style>
.product::before {
content: 'BEST';
position: absolute;
top: 0;
left: 50%;
translate: -50% -50%;
background-color: #ffdd0035;
border: 1px solid #ffdd00;
color: #ffdd00;
padding: .5em 2em;
border-radius: 100px;
text-transform: uppercase;
}
</ style>
모든 product 클래스에 BEST 란 글자가 나타나면서 BEST 이외의 다른 텍스트를 주고 싶다면
위 CSS는 1회성이 되버리게 된다.
각자 다른 텍스트를 주고 싶다면 아래처럼 사용하면 된다
<body>
<div data-label="free" class="product">
<img height="200px" src="images/th-html.png" alt="">
<h2>HTML Course</h2>
<p>Learn the basics of web development with HTML5 as beginner-friendly</p>
</div>
<div data-label="best selling" class="product">
<img height="200px" src="images/th-css-course.png" alt="">
<h2>HTML & CSS Course</h2>
<p>Learn HTML5 and CSS3 in 7 Days completely from scratch.</p>
</div>
<div data-label="coming soon" class="product">
<img height="200px" src="images/th-js.png" alt="">
<h2>JavaScript Course</h2>
<p>Learn the JavaScript Basics and Advanced Concepts by completing</p>
</div>
</ body>
<style>
.product::before {
content: attr(data-label);
position: absolute;
top: 0;
left: 50%;
translate: -50% -50%;
background-color: #ffdd0035;
border: 1px solid #ffdd00;
color: #ffdd00;
padding: .5em 2em;
border-radius: 100px;
text-transform: uppercase;
}
</ style>
content: attr(data-label) 로 속성 명을 주고,
class="product" 태그에 추가로 data-label 이란 속성을 주면 각 텍스트를 별개로 표시할 수 있다.
'CSS' 카테고리의 다른 글
| [CSS] 5-2. CSS GRID (0) | 2024.10.22 |
|---|---|
| [CSS] 5-1. FlexBox layout (0) | 2024.10.10 |
| [CSS] 블록 서식 문맥이란 ? ( Block Formatting Context, BFC ) (0) | 2024.10.02 |
| [CSS] 4. 포지셔닝 ( position , float, clear) 과 float layout (0) | 2024.10.01 |
| [CSS] 3. 레이아웃 스타일 - 인라인, 블록, 인라인블록 (0) | 2024.09.26 |
