[html,css] 원 만들고 위에 글자, 이미지 넣는 방법

위 사진처럼   html과 css를 이용해 원을 만들고 글자,이미지를 원 위에 배치하고 싶으신가요..?

저도 처음 웹페이지를 제작 하며 자초지종 다 겪어가며 성공했는데요 ㅠㅠㅠ

정답이 아닐 수도 있습니다만 html과 css로 제가 완성시킨 방법을 알려드릴게요

---

1) 원 만들기

첫번째로 우리는 원을 만들어 줘야 합니다.

HTML에서 <div>태그를 만들어주세요

<div>
</div>

 

그 다음으로는 css에서 꾸며주면 돼요

이 때 중요한것은 position !! 꼭 relative 여야 해요

div{
    background-color: antiquewhite;
    border-radius: 50%;
    
    width: 24%;
    padding-bottom: 24%;
    
    position: relative;
}

 

자세히 설명 드리자면 해당 css에서

-윗 부분 코드는 원을 만들고, 색깔을 지정해주고

-중간 코드는 원의 크기를

-아래 코드는 원의 위치를 지정해 줘요 

 

다음 단계로 갈까요?

 

2) 글자 원 위에 올리기

그럼 이제는 원 위에 올라갈 글을 써줘야 하는데요 이때 중요한게 글씨태그의 위치!

<div>
	<h2>원 만들고<br>꾸미는 방법</h2>
</div>

 

꼭 div 태그 안에 글자를 넣줘야 하는데요

우리가 원하는게 원 안에 글자가 있는 모습을 원하기 때문이예요

 

그런데 이렇게만 하면 글자가 원 안에서도 내가 원하는 위치에 가있지 않기 때문에

꼭 css로 문장의 자세한 위치를 지정해야 해요

h2{
    position : absolute;
    left : 11.1%;
    bottom :30%;
    
    font-size: 3em;
    text-align: center;
    font-family: 'Black Han Sans', sans-serif;
}

 

???우리가 앞에 원을 만들때 꼭 relative를 넣어줬던 이유가 여기서 나와요

position : absolute는 부모태그 즉 position이 더 먼저 있는 상위 태그를 절대적으로 움직이게 되는데요.

 

부모태그의 position이 relative일 경우 아예 그 태그 위치를 기준으로 움직이기 때문이예요

 

자세히 설명 드리자면 해당 css에서

-윗 부분 코드는 위치를 지정해 주고

-아랫 부분 코드는 글씨체와 글 정렬을 해줘요

 

3) img 원 위에 올리기

마지막으로 사진을 원 위에 올리고 싶을때도 문장을 올릴때와 유사해요

<div>
	<img src = "1.png">
	<h2>원 만들고<br>꾸미는 방법</h2>
</div>

 

이 때도 img 태그를 div 태그 안에 꼭 넣어줘야 해요!

 

img {
 	width : 30%;
 	height: 30%;
    
	position: absolute; 
    
 	right : 33%;
	top : -15%;
}

그리고 css로 이미지 크기와 위치만 정해주면 끝

 

쉽죠?ㅎㅎ