원 안에 숫자

HTML과 CSS에 flex를 사용해서 원 안에 숫자 넣기

by


html에서 초록색 원 안에 숫자 1을 넣는 코드를 구현해야 할 일이 있어 만들어 보았습니다. flex가 늘 어렵다고 생각이 드는데 원 안에 숫자를 넣기에는 이 코드가 제일 간편하게 구현될 수 있어 사용해 보았습니다.

아래의 코드를 보면 그렇게 복잡하지 않게 구현되는 것을 보실 수 있습니다.

목차
1. 원 안에 숫자 넣는 HTML 코드
2. 원 안에 숫자 넣는 CSS코드
3. 결론

원 안에 숫자 넣는 HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">

<title>Centered Circle with Number 1</title> </head>

<body>
<div class="centered-circle"> <span>1</span>
</div>
</body>
</html>


 

원 안에 숫자 넣는 CSS코드

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.centered-circle {
  width: 100px;
  height: 100px;
  background-color: green; /* 초록색 배경부분, 다른 색으로 원할 경우 변경 가능*/
  border-radius: 50%; /*원 모양으로 만들려면 50% 정도 넣으면 됨*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff; /* 흰색 텍스트 부분, 다른 색으로 원할 경우 변경 가능*/
  font-size: 24px;
  font-weight: bold;
}

 

이 코드는 화면 가운데에 위치한 100px x 100px 크기의 초록색 원 안에 흰색으로 숫자 1을 가운데 정렬하여 표시되게 했습니다. 페이지의 가운데로 이동하려면 display: flex; justify-content: center; align-items: center;를 사용해서 구현되게 했습니다.

border-radius는 사각형 박스 그릴 때에도 모서리를 둥글게 하거나 할 때 쓰이는 코드입니다. 잘 알아두시면 다양한 원이나 둥근 사각형 등에 응용할 수 있습니다.

 

결론

위와 같은 코드를 적용해서 구현을 하면 아래와 같이 구현이 됩니다.

원 안에 숫자

도움이 되셨으면 좋겠습니다.



댓글