π»CSS μ νμπ»
1. κ°μ ν΄λμ€
- μμμ νΉμ μνλ λμμ μ ννλλ° μ¬μ©νλ€.
- κ°μν΄λμ€λ ν κ°μ μ½λ‘ (:)μΌλ‘ μμνμ¬, κ·Έ λ€μ κ°μν΄λμ€μ μ΄λ¦μ΄ μ¨λ€.
https://steady-record.tistory.com/entry/CSS-%EA%B0%80%EC%83%81%ED%81%B4%EB%9E%98%EC%8A%A4
[CSS] μμ μ ν : κ°μν΄λμ€
μμλ€μ μ ννλ λ° μ¬μ©λλ κ°μ ν΄λμ€λ€μ΄λ€. 1. :first-child ν΄λΉ μμκ° λΆλͺ¨ μμμ 첫 λ²μ§Έ μμ μμμΈ κ²½μ°μ μ€νμΌμ μ μ©νλ€. 2. :last-child ν΄λΉ μμκ° λΆλͺ¨ μμμ λ§μ§λ§ μμ μ
steady-record.tistory.com
2. κ°μμμ
- μ νμμ μΆκ°λμ΄ νΉμ ν μνλ μμΉμ μμλ₯Ό μ νν λ μ¬μ©λλ€.
- κ°μμμλ λ κ°μ μ½λ‘ (::)μΌλ‘ μμνλ©°, κ·Έ λ€μ κ°μμμμ μ΄λ¦μ΄ μ¨λ€.
π»μ νμ νμπ»
- μ νν μμμ μ/λ€μ μΆκ°λ‘ λ΄μ©μ μμ±νλ μν μ νλ€.
- μ£Όλ‘ μ²¨μν λ μ¬μ©νλ€.
1. ::before (= :before)
2. ::after (= :after)
<body>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. <span>Ex praesentium</span> voluptatem sed, fuga molestias, soluta et ut doloribus ad eum ratione! Aspernatur itaque id inventore alias voluptatem consectetur aperiam dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae hic et quasi eveniet aliquam quis obcaecati reiciendis? Assumenda iure, harum dolorem aut consectetur, eligendi, odit modi deleniti minima expedita autem? Lorem ipsum dolor sit, amet consectetur adipisicing elit. <span>Officiis explicabo maxime</span> sed iusto fuga neque architecto distinctio illum dignissimos. Odio corrupti perspiciatis eius <span>exercitationem</span> tempora quam, accusamus itaque laudantium atque?</p>
</body>
<style>
p > span {
color: blue;
}
p > span::before {
content: "[";
color: orange;
}
p> span::after {
content: "]";
color: orange;
}
</style>
'WEB > CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [CSS] ν μ€νΈ κ·Έλ¦Όμ, μμ κ·Έλ¦Όμ : text/box-shadow (0) | 2023.09.26 |
|---|---|
| [CSS] display, float μ¬μ©νμ¬ μ¬λ°± μ§μ°κΈ° (0) | 2023.09.26 |
| [CSS] νΉμ ν μμ±μ κ°μ§ μμλ€μ μ ν : μμ± μ νμ (0) | 2023.09.26 |
| [CSS] μμ μ ν : κ°μν΄λμ€ (0) | 2023.09.26 |
| [CSS] νκ·Έμ μν μ λ ¬ (0) | 2023.09.26 |
