CSS만으로도 복잡한 이미지 파일 없이 다양한 도형을 손쉽게 만들 수 있습니다. width, height, background, 그리고 border-radius 같은 기본 속성을 조합하면 정사각형, 직사각형, 원형 등 여러 형태를 자유롭게 표현할 수 있습니다.
CSS 도형 만들기 핵심 원리
가장 기본이 되는 개념은 다음과 같습니다.
- 정사각형: 너비와 높이를 동일하게 설정합니다.
- 직사각형: 너비와 높이를 다르게 설정합니다.
- 원형: 너비와 높이를 동일하게 설정한 후
border-radius: 50%를 적용합니다.
예제 코드
아래는 세 가지 도형(정사각형, 직사각형, 원형)을 한 화면에 출력하는 완전한 HTML 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
div {
display: inline-block;
margin: 20px;
}
.square {
width: 100px;
height: 100px;
background: rgb(23, 153, 121);
border: 3px solid darkblue;
}
.rectangle {
width: 200px;
height: 100px;
background: rgb(255, 232, 21);
border: 3px solid rgb(42, 0, 70);
}
.circle {
width: 100px;
height: 100px;
background: rgb(0, 255, 13);
border: 3px solid rgb(27, 0, 78);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>CSS로 만드는 다양한 도형 예제</h1>
<div class="square"></div>
<div class="rectangle"></div>
<div class="circle"></div>
</body>
</html>
코드 설명
각 클래스의 역할을 살펴보면 다음과 같습니다.
.square (정사각형)
너비와 높이를 각각 100px로 동일하게 지정하여 정사각형을 만듭니다. 배경색은 청록 계열의 rgb(23, 153, 121)이며, 짙은 파란색 테두리가 적용되었습니다.
.rectangle (직사각형)
너비를 200px, 높이를 100px로 설정해 가로로 긴 직사각형을 구현했습니다. 노란색 배경에 보라색 계열 테두리가 사용되었습니다.
.circle (원형)
정사각형과 마찬가지로 너비와 높이를 100px로 설정한 뒤, border-radius: 50% 속성을 추가하면 모서리가 완전히 둥글어져 원 모양이 됩니다. 이것이 CSS에서 원을 만드는 가장 대표적인 방법입니다.
실행 결과
위 코드를 브라우저에서 실행하면 초록색 정사각형, 노란색 직사각형, 밝은 녹색 원형이 가로로 나란히 배치된 결과를 확인할 수 있습니다. display: inline-block 덕분에 각 도형이 한 줄에 나란히 표시되며, margin: 20px로 요소 사이에 적절한 간격이 유지됩니다.
추가 팁: 더 다양한 도형 응용하기
- 타원(Ellipse): 너비와 높이를 다르게 설정하고
border-radius: 50%를 적용하면 타원이 됩니다. - 둥근 사각형(Rounded Rectangle):
border-radius값을 픽셀 단위(예:10px)로 조절하면 부드러운 모서리를 가진 사각형을 만들 수 있습니다. - 삼각형(Triangle):
border속성의 색상 조작 기법을 활용하면 삼각형도 순수 CSS로 구현할 수 있습니다.
이처럼 CSS의 기본 박스 모델과 border-radius 속성만 잘 활용해도 이미지 없이 깔끔하고 가벼운 도형 요소를 웹 페이지에 추가할 수 있습니다.