DIV
1. css로 처리한 div 라운드 두가지 - 간지![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg.png)
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=5215&p=1
1. css로 처리한 div 라운드 두가지 - 간지
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg.png)
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=5215&p=1
배경색을 직접 지정함으로써 모서리가 둥글게 보이게 위장한 것이다.
background-color를 꼭 지정해야하며, transparent는 IE 및 크롬 에서 안 된다.
background-color를 꼭 지정해야하며, transparent는 IE 및 크롬 에서 안 된다.
2. 이미지 없이 CSS로 둥근 모서리 구현하기 - 치묘 ![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=3892
마찬가지 배경색을 지정해주어야 한다.
실제로 1번과 2번의 코드는 같습니다. 다만 사용된 태그가 다를 뿐입니다.
DIV with Script
1. CSS 기반 둥근 모서리 DIV를 편하게 처리해주는 스크립트입니다.![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
1. CSS 기반 둥근 모서리 DIV를 편하게 처리해주는 스크립트입니다.
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
위의 치묘님이 사용한 코드와 같은 겁니다.
Nifty Corners http://pro.html.it/esempio/nifty/
nifty.js 파일이 반드시 필요하며, 마찬가지 배경색을 지정해주어야 한다. Rounded("div#nifty","#fff","#9BD1FA");
각 모서리의 배경색이 각각 다르고 투명이어야 할 때는 사용하기 어려운 소스이다.
수정. 투명일 때도 가능하다.
DIV 태그를 이용해 둥근 모서리를 구현하고자 할 때는 이 소스를 사용하면 좋을 것 같습니다.
div with script 역시 위의 div를 단지 스크립트로 꾸며놓은 것에 불과하기 때문에 별 다른 차이는 없습니다. 다만 js 파일을 사용하느냐 css만으로 꾸미느냐의 차이죠.
Nifty Corners http://pro.html.it/esempio/nifty/
nifty.js 파일이 반드시 필요하며, 마찬가지 배경색을 지정해주어야 한다. Rounded("div#nifty","#fff","#9BD1FA");
각 모서리의 배경색이 각각 다르고 투명이어야 할 때는 사용하기 어려운 소스이다.
수정. 투명일 때도 가능하다.
DIV 태그를 이용해 둥근 모서리를 구현하고자 할 때는 이 소스를 사용하면 좋을 것 같습니다.
div with script 역시 위의 div를 단지 스크립트로 꾸며놓은 것에 불과하기 때문에 별 다른 차이는 없습니다. 다만 js 파일을 사용하느냐 css만으로 꾸미느냐의 차이죠.
2. Rounded Corners - 미노 ![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
http://dhtmlgoodies.com/index.html?whichScript=rounded-corners
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
http://dhtmlgoodies.com/index.html?whichScript=rounded-corners
배경을 투명으로 지정해도 배경 가장자리에 약간의 흰색이 남아있어 매끄럽지 못하다는 단점이 있다.
TABLE with Script
1. 모서리 둥근테이블 만들기 - 아마도넌 ![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg.png)
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=3020
% 지정이 안된다.
2. 모서리 둥근 테이블, 이미지 없이 구현하기(2) - 정낙훈 ![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_on.png)
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=5905
위에서와는 달리 table 태그를 이용하며 배경색을 지정해주지 않아도 된다. 이얏호.
소스도 사용하기 간편한 편이다. 자바스크립트에 테이블이 좀 과도하게 들어가 있어서 그렇지..;;
3번과 크게 달라 보이지 않는다. 만 그래도 좀 더 낫겠지?;
MyNote-T 레이아웃에 사용된 스크립트입니다.
소스도 사용하기 간편한 편이다. 자바스크립트에 테이블이 좀 과도하게 들어가 있어서 그렇지..;;
3번과 크게 달라 보이지 않는다. 만 그래도 좀 더 낫겠지?;
MyNote-T 레이아웃에 사용된 스크립트입니다.
3. 모서리 둥근 테이블, 이미지 사용없이 구현하기 - 정낙훈 ![](/files/attach/images/160219/486/160/point_type_2_bg.png)
![](/files/attach/images/160219/486/160/point_type_2_bg.png)
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=2554
TABLE
1. 테이블로 테이블 모서리에 곡선만들기. ^^ - 후니 ![](/files/attach/images/160219/486/160/point_type_2_bg_off.png)
![](/files/attach/images/160219/486/160/point_type_2_bg_off.png)
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=747