HTML 원 안에 텍스트 - HTML won an-e tegseuteu

위 사진처럼   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로 이미지 크기와 위치만 정해주면 끝

쉽죠?ㅎㅎ

HTML5/CSS3

[CSS Tips] CSS를 이용하여 동그라미 만들기, 동그라미 안에 글씨 넣기 (CSS Circles with Text)

DIV 태그의 기본 속성은 현재 자신이 속한 영역의 100%의 width 값을 가지는 4각의 블록(block) 형태이다. 

이 사각형 블록형태의 둥근 모서리 border-radius 값를 이용하여 삼각형 모양을 만들기도 하고 동그라미 모양으로 만들 수 있다. 이 전에 포스팅했던 CSS 풍선글의 경우, 풍선의 꼬리부분이 DIV의 border를 이용하여 삼각형을 만든 경우이다.

CSS border-radius 이용하여 동그라미 모양 만들기

가로 세로 200px 크기의 정사각형의 블록을 만든다.

.circle{
width:200px;
height:200px;
background:#00d3d3;

}

둥근모서리(border-radius)값은 각진 사각형을 둥근 모서리를 가진 사각형으로 만들어주는 속성이다.  아래의 스타일과 같이 border-radius의 값을 8px로 지정하면 그림과 같은 형태가 된다.

.circle{
width:200px;
height:200px;
border-radius:8px;
background:#00d3d3;

}

이것을 이용하여 둥근 모서리의 값을 사각형의 절반 너비(50%) 값을 지정해 주면 원형이 된다. 현재 width가 200px 이므로 모서리의 곡선값을 100px 또는 50%를 아래와 같이 적용하면 된다. 

.circle{
width:200px;
height:200px;
border-radius:50%;
background:#00d3d3;

}

동그라미 안에다가 글을 중앙에 배치하려면, 아래와 같이 기재한다. 단, 아래의 예시로 할 경우 세로정렬은 글의 길이가 길어서 line-break가 되지 않도록 한다.

.circle{
width:200px;
height:200px;
border-radius:50%;
background:#00d3d3;

font-size:16px;
text-align:center;  /*가로정렬*/
line-height:200px;  /*세로 정렬*/ 

}

배경을 사진이미지 등으로 넣고 동그라미 안의 글의 위치를 조금 이동해 보자.

나의 스타 SHINee의 WSS 활동 당시의 무대장면을 누가 이렇게 예쁘게 만들어 놓은 것이 있어서 이용하려고 한다.

어디서 다운받았는지 감감.. (알려주시면 수정) 

@import url( http://fonts.googleapis.com/css?family=Open+Sans:400,600,800,300 );

.circle{
width:200px;
height:200px;
border-radius:50%;
background:#00d3d3;

font-size:16px;

text-align:center;

line-height:110px;  /*글씨의 위치를 조금 위로 옮겼다*/

color:#00d3d3;
font-family:'Open Sans';
font-weight:bold;
background:url(./img/108.gif) center 100% no-repeat; /*이미지의 left은 값은 동그라미의 중앙, 이미지의 top값은 이미지의 baseline이 동그라미의 bottom에 오도록 100%*/

}

동그라미에 테두리와 그림자도 넣어보자. 그림자의 위치는 예제에서는 박스에 딱 붙였다.

@import url( http://fonts.googleapis.com/css?family=Open+Sans:400,600,800,300 );

.circle{
width:200px;
height:200px;
border-radius:50%;
background:#00d3d3;

font-size:16px;

text-align:center;

line-height:110px; 

color:#00d3d3;
font-family:'Open Sans';
font-weight:bold;
background:url(./img/108.gif) center 100% no-repeat;

border:6px solid #fff;
box-shadow: 0 0 16px rgb(221,221,221); /*4개의 값은 그림자의 위치 top, left, 그림자두께, 그림자 색상*/

}

IE8 이하의 브라우저에서는 CSS3 가 적용되지 않는다.

Chrome, FireFox, Safai등의 하위 브라우저에서도 CSS 동그라미 모양이 지원되도록 아래의 스타일을 추가한다.

@import url( http://fonts.googleapis.com/css?family=Open+Sans:400,600,800,300 );

.circle{
width:200px;
height:200px;
border-radius:50%;

-webkit-border-radius:50%;
-moz-border-radius:50%;
background:#00d3d3;

font-size:16px;

text-align:center;

line-height:110px; 

color:#00d3d3;
font-family:'Open Sans';
font-weight:bold;
background:url(./img/108.gif) center 100% no-repeat;

border:6px solid #fff;
box-shadow: 0 0 16px rgb(221,221,221);

-webkit-box-shadow: 0 0 16px rgb(221,221,221);
-moz-box-shadow: 0 0 16px rgb(221,221,221);

}

전체보기