π»μμ± μ νμπ»
νΉμ ν μμ±μ κ°μ§ μμλ€μ μ ννκΈ° μν΄ μ¬μ©λλ€.
1. μ νμ[μμ±λͺ ]
2. μ νμ[μμ±λͺ =κ°]
3. μ νμ[μμ±λͺ ^=κ°]
4. μ νμ[μμ±λͺ $=κ°]
5. μ νμ[μμ±λͺ *=κ°]
[κ³΅ν΅ HTML]
<body>
<div class="list">
<a href="http://naver.com" target="_self">λ€μ΄λ²</a>
<a href="http://yes24.com" target="_blank" title="λ§ν¬">μμ€24</a>
<a href="https://daum.net">λ€μ</a>
<a href="https://11st.co.kr">11λ²κ°</a>
<a href="https://coupang.com" target="_blank">μΏ ν‘</a>
</div>
</body>1. μ νμ[μμ±λͺ ]
<style>
a[target] {
color: red;
}
</style>
target μμ± μ€μ λ μμλ§ μ€νμΌ μ μ©λλ€.
2. μ νμ[μμ±λͺ =κ°]
<style>
.list a {
color: black;
text-decoration: none;
display: block;
margin-bottom: 5px;
}
a[target="_blank"] {
color: red;
}
</style>
target= "_blank"μΈ μμλ§ μ€νμΌ μ μ©λλ€.
3. μ νμ[μμ±λͺ ^=κ°]
<style>
a[href^="http://"] {
color: red;
}
</style>
hrefκ° http://λ‘ μμνλ μμλ§ μ€νμΌ μ μ©λλ€.
4. μ νμ[μμ±λͺ $=κ°]
<style>
a[href$='.com'] {
color: red;
}
</style>
hrefκ° .comμΌλ‘ λλλ μμλ§ μ€νμΌ μ μ©λλ€.
5. μ νμ[μμ±λͺ *=κ°]
<style>
a[href*=co] {
color: red;
}
</style>
hrefμμ coκ° λ€μ΄κ° μμλ§ μ€νμΌ μ μ©λλ€.
π»λμμΈμ μ μ©νκΈ°π»
1. νμ μ λ ₯ νλ κ°μ‘°νκΈ°
<body>
<div id="list">
<input type="text" value="1" required>
<input type="text" value="2" readonly>
<input type="text" value="3" readonly>
<input type="text" value="4">
<input type="text" value="5" required>
<input type="text" value="6" disabled>
<input type="text" value="7">
<input type="text" value="6" disabled>
<input type="text" value="8" >
<input type="text" value="9">
<input type="text" value="10" required>
</div>
<hr>
<input type="button" value="λ²νΌ">
</body> <style>
input[type=text] {
display: block;
margin-bottom: 3px;
border: 1px solid #555;
background-color: #fff;
padding: 3px;
outline: none;
color: #333;
}
input[type=text]:required {
background-color: gold;
}
input[type=text]:optional {
background-color: #ccc;
}
</style>
2. μ λ ₯νμ§ μλ νλμ μ λ ₯νλ νλ ꡬλΆνκΈ°(1)
<style>
input[type=text] {
display: block;
margin-bottom: 3px;
border: 1px solid #555;
background-color: #fff;
padding: 3px;
outline: none;
color: #333;
}
input[type=text]:disabled {
background-color: #999;
}
/* readonlyλ enabledμ μνλ€ */
input[type=text]:enabled {
background-color: gold;
}
</style>
3. μ λ ₯νμ§ μλ νλμ μ λ ₯νλ νλ ꡬλΆνκΈ°(2)
<style>
input[type=text]:read-only {
background-color: gold;
}
input[type=text]:read-write {
background-color: #ccc;
}
</style>
4. μ λ ₯ νλ μμ±μ λ°λΌ λ§μ°μ€ ν¬μΈν° λ°κΎΈκΈ°
<style>
input[type=text]:read-only {
background-color: gold;
}
input[type=text]:read-only {
cursor: not-allowed;
}
</style>
π»μ²΄ν¬λ°μ€, λΌλμ€, μ λ νΈ css μ μ©νκΈ°π»
체ν¬λ°μ€, λΌλμ€, μ λ νΈλ css μ μ©μ΄ μ μλλ€.
<div>
<input type="checkbox" class="cb">
<input type="checkbox" class="cb">
<input type="checkbox" class="cb">
</div><style>
.cb {
border: 1px solid red;
width: 100px;
height: 100px;
background-color: gold;
}
</style>
ν¬κΈ°λ§ μ μ©λμλ€.
1. checked + opacity
<style>
.cb {
/* λΆν¬λͺ
λ(0~1)*/
opacity: 0.2;
}
.cb:checked {
opacity: 1;
}
</style>
2. checked + visibility
<style>
#cat {
visibility: visible;
}
#cd-cat:checked + #cat {
visibility: hidden;
}
</style>
'WEB > CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [CSS] display, float μ¬μ©νμ¬ μ¬λ°± μ§μ°κΈ° (0) | 2023.09.26 |
|---|---|
| [CSS] μμμ μ/λ€μ μΆκ° λ΄μ© μμ± : μ νμ νμ (0) | 2023.09.26 |
| [CSS] μμ μ ν : κ°μν΄λμ€ (0) | 2023.09.26 |
| [CSS] νκ·Έμ μν μ λ ¬ (0) | 2023.09.26 |
| [CSS] μμμ μμΉ : position, z-index (0) | 2023.09.26 |
