이미지 없이 CSS로 둥근 모서리 구현하기

웹팁

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

2008.12.31 07:48 조회 수

12547

이온디

첨부파일 https://imweb.eond.com/coding/162696

DIV
1. css로 처리한 div 라운드 두가지 - 간지

http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=5215&p=1

배경색을 직접 지정함으로써 모서리가 둥글게 보이게 위장한 것이다.
background-color를 꼭 지정해야하며, transparent는 IE 및 크롬 에서 안 된다.

2. 이미지 없이 CSS로 둥근 모서리 구현하기 - 치묘

http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=3892

마찬가지 배경색을 지정해주어야 한다.

실제로 1번과 2번의 코드는 같습니다. 다만 사용된 태그가 다를 뿐입니다.

DIV with Script
1. CSS 기반 둥근 모서리 DIV를 편하게 처리해주는 스크립트입니다.

위의 치묘님이 사용한 코드와 같은 겁니다.
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 - 미노

http://dhtmlgoodies.com/index.html?whichScript=rounded-corners

배경을 투명으로 지정해도 배경 가장자리에 약간의 흰색이 남아있어 매끄럽지 못하다는 단점이 있다.

TABLE with Script

1. 모서리 둥근테이블 만들기 - 아마도넌

http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=3020

% 지정이 안된다.

2. 모서리 둥근 테이블, 이미지 없이 구현하기(2) - 정낙훈

http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=5905

위에서와는 달리 table 태그를 이용하며 배경색을 지정해주지 않아도 된다. 이얏호.
소스도 사용하기 간편한 편이다. 자바스크립트에 테이블이 좀 과도하게 들어가 있어서 그렇지..;;
3번과 크게 달라 보이지 않는다. 만 그래도 좀 더 낫겠지?;
MyNote-T 레이아웃에 사용된 스크립트입니다.

3. 모서리 둥근 테이블, 이미지 사용없이 구현하기 - 정낙훈

http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=2554

TABLE

1. 테이블로 테이블 모서리에 곡선만들기. ^^ - 후니

http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=747

이온디

스크립트 사용이 편하긴 하지만 이 글을 읽어보길 바랍니다.
http://naradesign.net/wp/2008/05/23/142/

오후 08:40

댓글

댓글 삭제
닫기

이온디

스크립트 사용이 편하긴 하지만 이 글을 읽어보길 바랍니다.http://naradesign.net/wp/2008/05/23/142/

2009.01.01 20:40

취소

Total 235 articles in 1 / 12 pages

	제목	날짜
	코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)	2018/01/03
	jQuery를 배울수 있는 동네들입니다.	2013/08/09
	관련 링크 [1]	2010/05/23
235	[PHP] 들어온 경로 URL 기록 남기기.	2003/01/11
234	[Table] table 과 관계된 팁 몇가지..	2003/05/04
233	[CGI] Space Checker - 계정 하드용량과 DB용량 동시확인	2003/06/06
232	[Script] 글자 크기 바꾸기	2003/07/23
231	[HTML5] 폼 이미지로 보이기	2003/08/10
230	[HTML5] 이미지 세로 정렬	2003/08/13
229	[Meta] IE6의 이미지(그림) 툴바 기능 막기, 이미지 도구 모음 막기 [2]	2003/09/21
228	[Script] 폼 크기 자동으로 늘였다 줄였다..	2003/09/23
227	[Script] 페이지 이동 (메타태그, 자바스크립트, PHP)	2003/09/24
226	[PHP] 페이지 접속 암호화	2003/09/25
225	[Form] form 태그에서 빈칸 없애주기	2003/10/06
224	[Script] 체크박스를 이미지로 바꾸기	2003/10/26
223	[Flash] 페이지 가득 채우는 플래시	2003/12/16
222	[Form] 폼 입력 시 글자 제한하기	2003/12/21
221	[HTML5] 레이어에 스크롤 생기기 [1]	2004/04/23
220	[HTML5] 셀렉트폼에 링크 걸기	2004/04/23
219	[HTML5] 같은 위치에 2개의 레이어 띄우기 [1]	2004/04/23
218	[HTML5] 레이어1은 보이고 레이어2는 감추기 [2]	2004/04/23
217	[HTML5] [질문] 폼 타겟 지정하기	2004/04/24
216	[HTML5] 작은 창으로 새창 열기 [2]	2004/04/25