π»overflowπ»
- μμμ λ΄μ©μ΄ μμμ μμ ν¬κΈ°λ₯Ό λ²μ΄λ λ μ΄λ»κ² μ²λ¦¬ν μ§λ₯Ό μ§μ νλ€.
- visible: μμμ λ΄μ©μ΄ μμ λ°μΌλ‘ λκ°λ κ°λ €μ§μ§ μκ³ λ³΄μ΄κ² νλ€. (κΈ°λ³Έκ°)
- hidden: μμμ λ΄μ©μ΄ μμ λ°μΌλ‘ λκ°λ©΄ μλ €μ 보μ΄μ§ μκ² νλ€.
- scroll: μμμ λ΄μ©μ΄ μμ λ°μΌλ‘ λκ°λ©΄ μ€ν¬λ‘€λ°κ° λνλκ² νμ¬ μ€ν¬λ‘€ν΄μ λ³Ό μ μκ² νλ€.
- auto: λ΄μ©μ΄ μμ λ°μΌλ‘ λκ°λ©΄ μ€ν¬λ‘€λ°κ° νμν κ²½μ°μλ§ λνλκ² νλ€.
- inherit: λΆλͺ¨ μμμ μμ±κ°μ μμνλ€.
βΆscroll
βΆauto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border: 1px solid black;
width: 200px;
height: 200px;
/* λμ³λ 보μ¬μ€λΌ */
/* overflow: visible; */
/* λμ³λ λΆλμ 보μ΄μ§ μλλ€. */
/* overflow: hidden; */
/* μ€ν¬λ‘€ */
overflow: scroll;
/* overflow: auto; */
}
</style>
</head>
<body>
<div id="box">μμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμ</div>
</body>
</html>
π»visibilityπ»
- κ°μμ±
- μμλ₯Ό νλ©΄μ 보μΌμ§ λ§μ§ μ μ΄νλ μμ±
- hovorμ κ²°ν©νμ¬ λμ μΈ μΉμ λ§λ€ μ μλ€.
- visible: μμλ₯Ό 보μ΄κ² νλ€. (κΈ°λ³Έκ°)
- hidden: μμλ₯Ό νλ©΄μμ κ°μΆ₯λλ€. κ·Έλ¬λ 곡κ°μ κ·Έλλ‘ μ°¨μ§νλ€.
- collapse (ν κ΄λ ¨ μμμμ μ¬μ©): μ μ μ¨κΈ΄λ€. (μΌλ°μ μΌλ‘ νμ ν λλ μ΄μμ μ¬μ©)
- inherit: λΆλͺ¨ μμμ μμ±κ°μ μμνλ€.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
hoverκ° λμ΄ cat2κ° μ¬λΌμ§λ©΄ hover ν΄μ λμ΄ λ€μ cat2κ° λνλκ³ λ€μ hoverκ° μλλμ΄ μ¬μ§μ΄ κΉλ°κΉλ°κ±°λ¦°λ€.
μ΄λ κ² μ¬μ©νλ©΄ μλλ€.
#cat2:hover {
visibility: hidden;
}
#box {
border: 10px solid black;
padding: 30px;
}
#box:hover > img {
visibility: hidden;
}
</style>
</head>
<body>
<div id="box">
<img src="../asset/images/catty01.png" id="cat1">
<img src="../asset/images/catty02.png" id="cat2">
<img src="../asset/images/catty03.png" id="cat3">
</div>
</body>
</html>
λ§μ°μ€κ° box μλ‘ hoverλλ©΄ μ΄λ―Έμ§κ° μ¬λΌμ§λ€..
'WEB > CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [CSS] μμμ μ’μ°μμΉ μ‘°μ : float (0) | 2023.09.26 |
|---|---|
| [CSS] μμμ μΆλ ₯ λ°©μ μ μ΄ : display(***) (0) | 2023.09.26 |
| [CSS] λ°μ€ λͺ¨λΈ(border, width, height, padding, margin) (0) | 2023.09.25 |
| [CSS] μ λ€λ¦ ν°νΈ(Generic font) (0) | 2023.09.25 |
| [CSS] μΉ ν°νΈ(κ΅¬κΈ ν°νΈ, λλ) μ μ©νκΈ° (0) | 2023.09.25 |
