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
반응형
'교육 > HTML+CSS' 카테고리의 다른 글
| [HTML/CSS] 슬라이딩 애니메이션 : KEYFRAMES (8) | 2022.11.14 |
|---|---|
| [HTML/CSS] 버튼에 HOVER 속성을 이용하여 에니메이션을 넣어보자 (5) | 2022.10.31 |
| [CSS] 높이 100% (2) | 2022.10.12 |
| [HTML] smooth-scroll (0) | 2022.10.12 |
| [HTML/CSS] div 또는 a 속성의 버튼을 편하게 나열해 보자 (grid-template-columns) (0) | 2022.10.11 |