[TIL] Border

Sohee YeoΒ·2022λ…„ 4μ›” 7일
CSSTIL
1

TIL

λͺ©λ‘ 보기
15/23
post-thumbnail

2022.04.07 Today I LearnedπŸ“š

border

λ³΄λ”λŠ” 보더 λ°•μŠ€ μ˜μ—­μ˜ μŠ€νƒ€μΌμ„ μ •μ˜ν•œλ‹€.
λ³΄λ”λŠ” μš”μ†Œκ°€ μ°¨μ§€ν•˜λŠ” 전체 λ„ˆλΉ„μ™€ λ†’μ΄μ˜ 일뢀이닀.

  • border-width β†’ μ„ μ˜ λ‘κ»˜μ™€ κ΄€λ ¨λœ 속성
  • border-style β†’ μ„ μ˜ λͺ¨μ–‘κ³Ό κ΄€λ ¨λœ 속성
  • border-color β†’ μ„ μ˜ 색깔과 κ΄€λ ¨λœ 속성

border-width

  • 길이 지정 β†’ 속성 값을 pxκ³Ό 같은 λ‹¨μœ„λ‘œ 직접 지정
  • medium β†’ 쀑간 ꡡ기둜 ν‘œμ‹œ
  • thin β†’ 얇은 μ‹€μ„ μœΌλ‘œ ν‘œμ‹œ
  • thick β†’ ꡡ은 μ„ μœΌλ‘œ ν‘œμ‹œ

border-style

  • none β†’ 선을 μ—†μ•°
  • solid β†’ 직선
  • dotted β†’ 점선
  • dashed β†’ νŒŒμ„ , λ°”λŠμ§ˆ λͺ¨μ–‘
  • double β†’ 이쀑선
  • groove β†’ ν…Œλ‘λ¦¬κ°€ 였λͺ©ν•˜κ²Œ μ•ˆμͺ½μœΌλ‘œ 파인 μ„ 
  • ridge β†’ ν…Œλ‘λ¦¬κ°€ λ³Όλ‘ν•˜κ²Œ λ‚˜μ˜¨ μž…μ²΄κ°μ΄ μžˆλŠ” μ„ 

radius

radius 속성은 ν…Œλ‘λ¦¬μ˜ 꼭짓점을 λ‘₯κΈ€κ²Œ λ§Œλ“ λ‹€.
μ„€μ •ν•œ radius 값을 λ°˜μ§€λ¦„μœΌλ‘œ ν•˜λŠ” 원을 λ°•μŠ€μ˜ κΌ­μ§“μ μ—μ„œ κ·Έλ € λ‘₯κ·Ό ν…Œλ‘λ¦¬λ₯Ό κ·Έλ¦°λ‹€.

profile
Sohee Yeo
μ‹€νŒ¨μ— λ¬΄λ”˜ μ‚¬λžŒ. ν”„λ‘ νŠΈμ—”λ“œ 개발자λ₯Ό κΏˆκΏ‰λ‹ˆλ‹€
이전 포슀트

[TIL] λ§ˆμ§„ 병합 ν˜„μƒ

λ‹€μŒ 포슀트

[TIL] overflow: hidden VS display: none

6개의 λŒ“κΈ€

comment-user-thumbnail
YEJI
2022λ…„ 4μ›” 7일

border κ°„λ‹¨ν•˜κ²Œ 잘 μ •λ¦¬ν•˜μ…¨κ΅°μš”...! ν‘œμ§€ λ°”λ€Œμ…¨λ„€μš”. 저두 λ°”κΏ”μ•Όν•˜λŠ”λ°γ… ,γ… 

1개의 λ‹΅κΈ€
comment-user-thumbnail
μ„œκ°€ν¬
2022λ…„ 4μ›” 7일

정리 κΉ”λ”ν•˜κ²Œ 잘 ν•˜μ…¨λ„€μš© μ†Œν¬λ‹˜ 😊
ν”„λ‘œν•„ 사진 λ„ˆλ¬΄ μ΄μ˜μ‹ κ±° μ•„λ‹Œκ°€μ—¬ πŸ‘€

1개의 λ‹΅κΈ€
comment-user-thumbnail
<SeongHun />
2022λ…„ 4μ›” 9일

border 정리 글인데 μ–΄λ–»κ²Œ μ΄λ ‡κ²Œ 예쁠 μˆ˜κ°€ 있죠???πŸ‘πŸ‘πŸ‘
μ†Œν¬λ‹˜ 졜고!!!!!

1개의 λ‹΅κΈ€