[css] 테두리 및 테두리 라운드 속성 활용
CSS를 사용하면 요소에 테두리를 추가하고 테두리를 둥글게 만들 수 있습니다. 이는 웹 페이지 및 웹 앱의 디자인을 개선하고 더욱 매력적인 UI를 만들 수 있게 도와줍니다.
테두리 속성 추가하기
요소에 테두리를 추가하기 위해서는 border
속성을 사용합니다. 예를 들어, 아래와 같이 CSS를 작성하여 테두리를 추가할 수 있습니다.
.example {
border: 2px solid #000;
}
위의 코드에서는 example
클래스를 가진 요소에 2픽셀 두께의 검은색 테두리가 추가됩니다.
테두리 라운드 속성 사용하기
테두리를 더욱 둥글게 만들기 위해서는 border-radius
속성을 사용합니다. 이를 통해 테두리의 각 꼭지점을 둥글게 조절할 수 있습니다.
.example {
border: 2px solid #000;
border-radius: 10px;
}
위의 코드에서는 example
클래스를 가진 요소의 테두리를 10픽셀 만큼 라운드 처리합니다.
결론
CSS의 테두리 속성과 테두리 라운드 속성을 활용하면 웹 페이지 및 웹 앱의 디자인을 더욱 다채롭게 꾸밀 수 있습니다. 이를 통해 사용자들에게 더욱 매력적인 UI를 제공할 수 있습니다.
참고자료: MDN Web Docs