λ€μ΄κ°κΈ°
border μμ±μ μμμ ν λ리μ κ΄λ ¨λ μμ±μ μ§μ ν λ μ¬μ©νλ€.
ν λ리μ κ΅΅κΈ°, λͺ¨μ, μμμ μ§μ ν μ μλ μμ±λ€μ΄ μμΌλ©°,
μμ λ°°μ΄ background μμ±μ²λΌ μ¬λ¬ μμ±μ μΆμ½νμ¬ μ μ©ν μλ μλ€.
π border κ΄λ ¨ μμ±
- border-width
: κΈ°λ³Έκ° = medium
μ μ κ΅΅κΈ°λ₯Ό μ§μ νλ μμ±μ΄λ€.
μνμ’μ° μ μ κ΅΅κΈ°λ₯Ό λ€λ₯΄κ² ννν μ μλ€.
border-width:[top][right][bottom][left];< μμ± κ° >
| ν€μλ | thin, medium, thick |
| λ¨μ | px, em, rem ... ( %, μ μ λ¨μ μ¬μ©λΆκ° ) |
- border-style
: κΈ°λ³Έ κ° = none
μ μ λͺ¨μμ μ§μ νλ μμ±μ΄λ€.
μνμ’μ° μ μ λͺ¨μμ λ€λ₯΄κ² ννν μ μλ€.
border-style:[top][right][bottom][left];
<μμ± κ°>
| none | borderλ₯Ό νμ νμ§ μμ΅λλ€. |
| solid | borderλ₯Ό μ€μ λͺ¨μμΌλ‘ λνλΈλ€. |
| double | borderλ₯Ό μ΄μ€ μ€μ λͺ¨μμΌλ‘ λνλΈλ€. |
| dotted | borderλ₯Ό μ μ λͺ¨μμΌλ‘ λνλΈλ€. |
κ·Έ λ°μλ dashed, double, groove, ridge inset, outset λ±μ λ€μν μ€νμΌμ΄ μλ€.
- border-color
: κΈ°λ³Έ κ° = currentColor
μ μ μμμ μ§μ νλ μμ±μ΄λ€.
μνμ’μ° μ μ μμμ λ€λ₯΄κ² νννλ€.
border-color:[top][right][bottom][left];
- border μΆμ½
: 곡백μΌλ‘ ꡬλΆν΄ μΆμ½νμ¬ μ¬μ©ν μ μκ³ , μ μλμ§ μμ μμ±κ°μ λν΄μλ κΈ°λ³Έ κ°μ΄ μ μ©λλ€.
<μμ >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
div {
border-width: 10px;
border-style: solid;
border-color: #000;
/* μΆμ½ν */
border: 10px solid #000;
}
</style>
</head>
<body>