Tailwind - Border
β’
border
β’
κΈ°λ³Έκ°
β’
ν
λ리 λκ»
β’
ν
λ리 μμ
β’
ν
λ리 μ€νμΌ
β’
ν
λ리 λ°©ν₯
β’
border-radius
border
border λ ν
λ리 μ€νμΌ μμ±μ΄λ©°, tailwind μμλ μ€νμΌ ν΄λμ€λ‘ μ§μ λμ΄ μμ΅λλ€.
class μ border λ§ μμ±ν΄λ κΈ°λ³Έ ν
λ리λ₯Ό μ§μ ν μ μμ΅λλ€.
κΈ°λ³Έκ°
κ·Έλ₯ border ν΄λμ€λ§ μ§μ νλ©΄, 1px λκ» λ° gray 컬λ¬λ₯Ό κΈ°λ³ΈμΌλ‘ ν
λλ¦¬κ° μ§μ λ©λλ€.
ν λ리 λκ»
border-λκ»
λκ» κΈ°λ³Έ λ¨μ
β’
border: 1px λκ»μ κΈ°λ³Έ ν
λ리
β’
border-2: 2px λκ»μ ν
λ리
β’
border-4: 4px λκ»μ ν
λ리
β’
border-8: 8px λκ»μ ν
λ리
λκ» μ»€μ€ν μ§μ
border-[ν¬κΈ°px]
[ ] κΈ°νΈλ₯Ό μμ±νλ©΄, μνλ ν¬κΈ° λ¨μλ‘ λκ»λ₯Ό μ§μ ν μ μμ΅λλ€.[ν¬κΈ°px] κΈ°νΈμ μ¬μ©μ border λΏλ§μλλΌ ν¬κΈ°λ₯Ό μ§μ νλ ν΄λμ€μμ μ 곡λλ λ¨μκ° μλ, μ§μ μ§μ νλ ν¬κΈ°λ‘ ν¬κΈ°κ° μ μ©λλ λͺ¨λ ν΄λμ€μμ ν΅μ©λ©λλ€.
<div className="m-10 inline-block w-[480px]">
<div className="border-[10px] p-4 rounded-lg shadow-md space-y-4 animate-pulse">
<div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="space-y-2">
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
</div>
</div>
</div>
JavaScript
볡μ¬
ν λ리 μμ
border-컬λ¬-μμ
border-[#000000]
ν
λ리 μμμ border-μ»¬λ¬ ννλ‘ μ»¬λ¬μμ μ΄λ¦μ μ§μ νκ³ , border-컬λ¬-μμ ννλ‘ μ§μ νλ κ²½μ°μλ μμμ 100~900 μΌλ‘ 100 λ¨μλ‘ μ§μ ν μ μμ΅λλ€.
β’
100: λ§€μ° λ°μ μμ
β’
200: λ°μ μμ
β’
300: μ€κ° λ°κΈ°μ μμ
β’
400: μ½κ° μ΄λμ΄ μμ
β’
500: κΈ°λ³Έ μμ
β’
600: μ½κ° μ΄λμ΄ μμ
β’
700: μ€κ° μ΄λμ΄ μμ
β’
800: μ΄λμ΄ μμ
β’
900: λ§€μ° μ΄λμ΄ μμ
λ, μ§μ ν μμμ½λλ‘ ν
λ리λ₯Ό μ£Όκ³ μΆλ€λ©΄, border-[#000000] ννλ‘ νΉμ ν μμμ μ§μ ν μλ μμ΅λλ€.
<div className="m-10 inline-block w-[480px]">
<div className="border-[10px] border-blue-500 p-4 rounded-lg shadow-md space-y-4 animate-pulse">
<div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="space-y-2">
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
</div>
</div>
</div>
JavaScript
볡μ¬
<div className="m-10 inline-block w-[480px]">
<div className="border-[10px] border-[#ffc2ff] p-4 rounded-lg shadow-md space-y-4 animate-pulse">
<div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="space-y-2">
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
</div>
</div>
</div>
JavaScript
볡μ¬
ν λ리 μ€νμΌ
ν
λ리 μ€νμΌμ solide~none κΉμ§ λΈλΌμ°μ μ μ§μ μ€νμΌμ λ°λΌ μ§μ ν μ μμ΅λλ€.
ν΄λμ€ | μ€λͺ
|
border-solid | μ€μ ν
λ리 |
border-dashed | λμ μ€νμΌ ν
λ리 |
border-dotted | μ μ μ€νμΌ ν
λ리 |
border-double | μ΄μ€ μ ν
λ리 |
border-none | ν
λ리 μμ |
<div className="m-10 inline-block w-[480px]">
<div className="border-[10px] border-blue-500 border-dashed p-4 rounded-lg shadow-md space-y-4 animate-pulse">
<div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="space-y-2">
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
<div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
</div>
</div>
</div>
JavaScript
볡μ¬
ν λ리 λ°©ν₯
ν΄λμ€ | μ€λͺ
|
border-t | μλ¨ ν
λ리 μ μ© |
border-r | μ°μΈ‘ ν
λ리 μ μ© |
border-b | νλ¨ ν
λ리 μ μ© |
border-l | μ’μΈ‘ ν
λ리 μ μ© |
border-x | μ’μ° ν
λ리 μ μ© |
border-y | μν ν
λ리 μ μ© |
border-radius
ν΄λμ€ | μ€λͺ
|
rounded-sm | μμ λ₯κ·Ό λͺ¨μ리 (0.125rem / 2px) |
rounded | κΈ°λ³Έ λ₯κ·Ό λͺ¨μ리 (0.25rem / 4px) |
rounded-md | μ€κ° λ₯κ·Ό λͺ¨μ리 (0.375rem / 6px) |
rounded-lg | ν° λ₯κ·Ό λͺ¨μ리 (0.5rem / 8px) |
rounded-xl | λ ν° λ₯κ·Ό λͺ¨μ리 (0.75rem / 12px) |
rounded-2xl | λ§€μ° ν° λ₯κ·Ό λͺ¨μ리 (1rem / 16px) |
rounded-3xl | μ΅λ λ₯κ·Ό λͺ¨μ리 (1.5rem / 24px) |
rounded-full | μμ λ₯κΈκ² (μν) |
rounded-t-sm | μλ¨ λͺ¨μλ¦¬λ§ μμ λ₯κΈκΈ° |
rounded-r-sm | μ°μΈ‘ λͺ¨μλ¦¬λ§ μμ λ₯κΈκΈ° |
rounded-b-sm | νλ¨ λͺ¨μλ¦¬λ§ μμ λ₯κΈκΈ° |
rounded-l-sm | μ’μΈ‘ λͺ¨μλ¦¬λ§ μμ λ₯κΈκΈ° |
rounded-t-md | μλ¨ λͺ¨μλ¦¬λ§ μ€κ° λ₯κΈκΈ° |
rounded-r-md | μ°μΈ‘ λͺ¨μλ¦¬λ§ μ€κ° λ₯κΈκΈ° |
rounded-b-md | νλ¨ λͺ¨μλ¦¬λ§ μ€κ° λ₯κΈκΈ° |
rounded-l-md | μ’μΈ‘ λͺ¨μλ¦¬λ§ μ€κ° λ₯κΈκΈ° |
rounded-t-lg | μλ¨ λͺ¨μλ¦¬λ§ ν° λ₯κΈκΈ° |
rounded-r-lg | μ°μΈ‘ λͺ¨μλ¦¬λ§ ν° λ₯κΈκΈ° |
rounded-b-lg | νλ¨ λͺ¨μλ¦¬λ§ ν° λ₯κΈκΈ° |
rounded-l-lg | μ’μΈ‘ λͺ¨μλ¦¬λ§ ν° λ₯κΈκΈ° |
rounded-t-xl | μλ¨ λͺ¨μλ¦¬λ§ λ ν° λ₯κΈκΈ° |
rounded-r-xl | μ°μΈ‘ λͺ¨μλ¦¬λ§ λ ν° λ₯κΈκΈ° |
rounded-b-xl | νλ¨ λͺ¨μλ¦¬λ§ λ ν° λ₯κΈκΈ° |
rounded-l-xl | μ’μΈ‘ λͺ¨μλ¦¬λ§ λ ν° λ₯κΈκΈ° |
rounded-t-2xl | μλ¨ λͺ¨μλ¦¬λ§ λ§€μ° ν° λ₯κΈκΈ° |
rounded-r-2xl | μ°μΈ‘ λͺ¨μλ¦¬λ§ λ§€μ° ν° λ₯κΈκΈ° |
rounded-b-2xl | νλ¨ λͺ¨μλ¦¬λ§ λ§€μ° ν° λ₯κΈκΈ° |
rounded-l-2xl | μ’μΈ‘ λͺ¨μλ¦¬λ§ λ§€μ° ν° λ₯κΈκΈ° |
rounded-t-3xl | μλ¨ λͺ¨μλ¦¬λ§ μ΅λ λ₯κΈκΈ° |
rounded-r-3xl | μ°μΈ‘ λͺ¨μλ¦¬λ§ μ΅λ λ₯κΈκΈ° |
rounded-b-3xl | νλ¨ λͺ¨μλ¦¬λ§ μ΅λ λ₯κΈκΈ° |
rounded-l-3xl | μ’μΈ‘ λͺ¨μλ¦¬λ§ μ΅λ λ₯κΈκΈ° |
rounded-full | μμ μν λͺ¨μ리 |