CSS / 도형 만들기 / 원, 타원
CSS의 border-radius
속성으로 원을 만들 수 있다.
원 만들기
- HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다.
<div class="circle"></div>
- 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣는다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { margin: 30px auto; width: 200px; height: 200px; background-color: #e3f2fd; } </style> </head> <body> <div class="circle"></div> </body> </html>
border-radius
속성을 추가하고, 값에50%
를 넣으면 원이 만들어진다.
.circle { margin: 30px auto; width: 200px; height: 200px; background-color: #e3f2fd; border-radius: 50%; }
타원 만들기
- 가로 또는 세로 크기를 변경하면 타원이 된다.
.circle { margin: 30px auto; width: 400px; height: 200px; background-color: #e3f2fd; border-radius: 50%; }
테두리만 있는 원 만들기
- 배경색이 없고 테두리만 있는 원을 만들고 싶다면
background-color
대신border
속성을 사용한다.
.circle { margin: 30px auto; width: 200px; height: 200px; border: 20px solid #e3f2fd; border-radius: 50%; }