교육/HTML+CSS
[CSS] CSS로 동그라미를 그려보자.
그미s
2022. 10. 14. 13:11
728x90
반응형
이미지없이 css만으로 동그라미를 만들어 보자
먼저 출력할 곳을 만들어 준다
<div class = "test"></div>그리고 색상이 표현될 수 있는 가로와 세로가 동일한 기본 속성을 입력하고
거기에
border-radius: 50%;를 추가한다
css 속성은 그럼 이렇게 된다
.test{
width: 50px;
height: 50px;
position: relative;
display : block;
background-color: brown;
border-radius: 50%;
}
이걸 html 화면에 다 합쳐서 적어 보면
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제</title>
</head>
<style>
.test{
width: 50px;
height: 50px;
position: relative;
display : block;
background-color: brown;
border-radius: 50%;
}
</style>
<body>
<div class = "test"></div>
</body>
</html>
요래 된다
728x90
반응형