일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- grid
- CSS
- 확률
- 알고리즘
- Codility
- dataframe
- spring
- Design Pattern
- Prefix Sums
- SK바이오사이언스
- Javascript
- 수학
- stl
- c
- series
- align-items
- 백준
- 포토샵
- Gap
- c++
- 소수
- 상태
- pandas
- 에라토스테네스의 체
- Photoshop
- 강화학습
- skt membership
- margin
- 통신사할인
- Flexbox
Archives
- Today
- Total
목록타입페이스 매칭 (1)
sliver__
CSS로 배우는 Border-Radius
요약border-radius 속성은 단순히 모서리를 둥글게 만드는 역할을 넘어, 디자인의 분위기(진지함 vs. 재미) 를 조절하는 핵심 요소입니다. 둥근 정도(곡률)를 조절함으로써, 사용자에게 전달되는 인상을 크게 바꿀 수 있습니다. 이 글에서는 타입페이스와의 조화, 적용 대상, 그리고 CSS 코드 예제를 통해 다양한 시나리오에서 border-radius를 활용하는 방법을 정리합니다.1. Border-Radius와 디자인 감성작은 곡률(0–4px): 깔끔하고 진지한(세련된) 인상중간 곡률(8–16px): 부드러우면서도 현대적인 느낌큰 곡률(>24px): 친근하고 재미있는 분위기Tip: 디자인에 사용한 타입페이스의 곡률을 참고해, 요소의 border-radius를 매칭하면 일관된 시각적 조화를 이룹니다.2..
Frontend/CSS
2025. 5. 5. 10:34