관리 메뉴

키스세븐

CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius 본문

IT와 생활/홈피와 블로그

CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius

키스세븐지식 2018. 10. 2. 18:43
공유하기 링크
필요하면 공유하세요 ^^
이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.

[CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius] 

웹디자인을 하다보면 모든 개체가 사각형이라서 지겨울 때가 있습니다. CSS 둥글게 만들기는 창의적인 웹디자인에 필요한 방법일 것입니다.

div나 li의 border 모서리를 둥글게 하기는 CSS에서 border-radius 속성을 사용합니다.

border-radius 속성은 포토샵 없이도 외곽선을 둥글게 만들 수 있다는 장점이 있습니다. 기본적인 div 등은 html, php문서에서 개체를 만들어 준 후에 CSS파일을 열어서 테두리를 둥글게 만드는 속성을 주는 방법입니다.




DIV, LI, SPAN 등의 개체를 만든 후 적용한다


예를 들기 위해 div로 사각형을 만들고 div개체의 모서리를 둥글게 만들어 보도록 하겠습니다.

먼저 html이나 php문서를 열어서 div 개체를 만들고 클래스 이름을 적어 줍니다. 


    <div class="이름 정하기">

        글자나 이미지

    </div>



border-radius의 속성 


hrml, php문서에서는 별로 할 것이 없습니다.

실질적인 효과는 CSS 둥글게 만들기를 통해서 이루어집니다. CSS파일을 열어서 클래스 이름을 적어준 후에 border-radius 속성을 적어 보도록 합시다.


    .이름 정하기 {width:가로길이px; height:세로길이px; border:테두리두께px solid #색상코드; border-radius:둥근각도px}


CSS 테두리 둥글게 만들기가 목적이니 당연히 border 속성을 입력하고 두께와 색상을 정해야 할 것입니다.

가장 중요한 것은 border-radius 입니다. 여기에 어느 정도의 각도로 꺾일 것인지를 적어줘야 할 것입니다. 숫자가 클수록 많이 꺾이게 됩니다. 즉, 숫자가 매우 크다면 완전히 동그란 원을 만들 수도 있을 것입니다.





border-radius의 여러 가지 팁 


CSS로 테두리 둥글게 만들기의 팁을 주자면, 너비, 높이와 비슷한 둥근 각도를 주면 거의 원이 된다는 것입니다.

예를 들어, width:20px; height:20px; 으로 했다면 border-radius도 border-radius:20px로 해주면 거의 원으로 만들 수 있다는 것입니다.


border-radius는 div 외에도 여러 가지 개체를 가지고 외곽선을 둥글게 만들 수 있습니다. li 등에도 테두리 둥글게 만들기를 할 수 있는데, 아래는 span 속성에 대해서 border-radius를 적용한 모습입니다.


    .클래스 이름 {color:#fff; width:50px; height:50px; border-radius:50px; line-height:120%; display:inline-block; text-align:center; margin:-0.3em}


CSS 둥글게 하기의 또 한 가지 팁을 주자면, line-height의 %를 적절히 바꾸면 안에 글자를 넣었을 때 조절이 편리하다는 것입니다.

border속성처럼 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius를 통해서 어느 쪽의 외곽선을 둥글게 만들기할 것인가를 정할 수가 있습니다.


물론 일반 div객체처럼 내부에 이미지를 넣어서 모서리를 둥글게 만들기할 수도 있습니다.



주의할 것은 브라우저 버전이다


단, 이 CSS기준은 오래된 브라우저에서는 적용되지 않을 수도 있습니다. 예를 들어, 익스플로러 8 이하에서는 그냥 사각형으로 보이기도 합니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)

이에 대한 대비 책은 뾰족한 것이 아니지만 대체로 behavior: url( "PIE.htc" );를 많이 사용합니다. CSS의 {  } 안에 넣어주는 것입니다.


최신 브라우저에서는 정상적으로 지원하기 때문에 border-radius를 사용하면 CSS 둥글게 하기가 편리해집니다. 디자인도 더욱 자유스러지는 것입니다.

키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
http://kiss7.tistory.com

공유하기 링크
필요하면 공유하세요 ^^
Comments