모서리 둥글게,CSS가 아닌 jquery로 둥근 모서리 만들기 - 직접 해보기

들어가기 전에

jquery를 사용하여 각진 모서리로 둥글게 하는 것으로 저의 IE 8, IE Tester로 IE 6,7,8에서 보면 모서리가 둥글게 보였습니다. 그리고 PC 방에서 IE 7로 봐도 모서리가 둥글게 보였으니 IE에서 모서리를 둥글게 하지 못하는 것이 아님을 알기 바랍니다. 그리고 아이디명과 클래스명을 알아야 한다고 혹시 CSS로 둥글게 하는 것이 아닌가 생각할 것 같은데 CSS로 둥글게 하는 것이 아닌 jquery로 하는 것입니다.  jquery1

둥글게 하고 싶은 div의 아이디명과 클래스명만 알면 모서리를 둥글게 하는 것입니다. 쉽기 때문에 제가 티스토리 블로그에 설치하려는 것을 설명하려고 합니다. CSS를 알 필요도 없고 단지 아이디명과 클래스명만 알면 되고, 네이버 블로그,다음 블로그에서 안 되니 하지 마세요.
그리고 그라디언트,그림자로 보이는 경우는 제가 CSS를 사용한 것인데 IE 6,7,8에서 가능하게 하는 것은 모르겠습니다. 단 스크립트간 충돌이 있으면 둥글게 하는 jquery가 동작하지 않아 둥글게 되지 않습니다. 라이트박스(lightbox) 적용중 - 채은,채윤,채현의 글을 보면 스크립트 충돌로 IE 6,7,8에서는 둥글게 안 보여 크롬,사파리 등에서 둥글게 보이기 위해 CSS를 사용했습니다.

단지 위 글상자처럼 사각형 4개의 모든 모서리를 둥글게 하는 것만이 아닙니다. 아래 목록으로 여러가지로 둥글게 한 것 일부만 정리했습니다. 여러가지 모양에 대한 것은 http://jquery.malsup.com/corner/에서 볼 수 있습니다.모퉁이

• 4개의 모서리 둥글게 : 위 아래에서 볼 수 있는 글상자,블로그 전체틀 및 주인장 답글,카피라이트
• 바닥 모서리 두 개만 둥글게 : 사이드바에 있는 달력,위의 MORE를 클릭하면 나타나는 사각형
• 위 모서리 두 개만 둥글게 : 티에디션에서 타이틀 부분

제 생각에 클래스명이나 아이디명 및 소스삽입하기 등을 안다면 아래글을 따라하는 것은 어려움이 없을 것입니다. 그래도 초보자에게는 어려우니 아예 하지를 말거나 넉넉히 시간을 두고 따라 해 보세요. 참고로 여기서 설명할 것은 CSS로 둥글게 하는 것은 알 필요도 없고 이미지를 사용하는 것도 아닌 jquery를 사용하는 것입니다.

1. 파일 다운로드와 올리기

아래 두개의 파일을 다운로드받아 관리로 들어가 HTML/CSS 편집을 클릭한 후 파일 업로드를 클릭합니다. 그리그 그 페이지 아래에 있는 추가 버튼을 눌러 아래에서 받은 두개의 파일을 올립니다. 티스토리에서 파일올리기에 대해서에서 다루었지만, 티스토리 블로그에서 올리는 모든 파일은 images 폴더안에 들어가게 됩니다. 업로드하는 모든 파일은 images 폴더에 만들어져 들어갑니다. 여러분이 폴더를 만들고 올리는 것은 없습니다. 이것은 티스토리에서 정했는지는 모르나 무조건 images 폴더입니다.

• jquery.min.js
• jquery.corner.js

2. 소스 삽입

티스토리 블로그 관리로 들어가 HTML/CSS 편집을 클릭한 후 아래 그림처럼 소스를 </head> 위에  붙입니다. 소스는 아래 둥근모서리_소스1을 클릭하여 그 문서안에있는 소스를 복사하여 붙이는 것입니다. 아래 그림을 보면 클래스명과 아이디명이 나왔을 것입니다. 아래 소스는 없는 것인데 왜냐하면 아래에 입력한 아이디명과 클래스명은 저의 블로그 스킨에서입니다. 다른 스킨에서는 다릅니다. 참고로 원본 그림을 보기 위해서 아래 그림을 클릭하세요.

• 둥근모서리_소스1.txt

 - 무료로 팩스 10장보내기 :엔팩스 - 

3.둥글게 하기

글상자의 경우는 모든 티스토리 블로그가 공통이고 글상자의 클래스명은 txc-textbox이므로 아래 그림처럼 클래스명만 넣으면 모든 글상자의 모서리가 둥글게 되는데 소스는 아래의 둥근모서리_소스4에 있습니다. 그리고 모서리의 둥근 정도를 지정할 수 있는데 그것은 아래 아래 둥근 모서리_소스3를 클릭하면 소스가 나옵니다. 단 둥근 모서리_소스3은 저의 블로그에 현재 쓰인 것이고 jquery.min.js가 없습니다. 아래 소스인 경우는 제 블로그에서 그렇게 다른 블로그에서는 저같이 되지는 않습니다. 참고로 글상자를 둥글게 하는 것은 각진 글상자를 간단히 둥글게을 보세요.

• 둥근모서리_소스3.txt
  

• 둥근모서리_소스4.txt

  
  

 - 무료로 팩스보내기 : 하나팩스 -

업로드 등이 필요없음

아래코드를 복사한 후 전과 마찬가지로 위에 붙입니다. 소스를 보면 알겠지만 소스가 티스토리가 아닌 다른 곳에 있는데 그곳의 서버가 느리면 로딩이 느릴 수 있습니다. 만약 로딩이 너무 느리다 생각하면 둥글게 하는 소스 부분을 지우기 바랍니다. CSS를 안다면 클래스명이나 아이디명이라고 하면 바로 알 것이니 길게 설명하지 않겠습니다. 

• 둥근모서리_소스2.txt

클래스명과 아이디명 입력시 앞부분의 .이나 #를 잊으면 안됩니다. 예로 글상자의 클래스명이 txc-textbox인데 거기에 .txc-textbox라고 입력하는 것을 잊지마세요. 그리고 CSS3의 둥글게 하는 속성을 지원하는 경우에는 이 블로그처럼 각진 모서리가 둥글게 되면서 명암 등이 들어간다. 익스플로러 7,8에서는 CSS3의 둥글게 하는,명암을 주는 속성을 지원하지 않으므로 이렇게 안 보인다. CSS로 둥글게 한 것이 아님을 알기 바란다.