프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기

http://oxtag.com/html/ex/iframe/iframe_border.html


프레임셋 / 아이프레임 / 테이블 등의 border 모양바꾸기입니다.
즉, 문서의 테두리 두르기라고 생각하시면됩니다.
아래 말고도 아이프레임에 적용한 것을 보실려면 미리보기를 클릭하세요.
미리보기의 아이프레임에 테두리 두르기가 복잡하다고 생가하시면 간단하게 테이블태그로 하셔도 됩니다.
테이블 안에 아이프레임을 불러오고 아이프레임의 테두리 값을 0으로 하면되니까요.


이 팁은 굳이 프레임에만 쓰는것이 아니라
테이블의 border도 마찬가지로 사용할수있습니다.
일단 세로로 두개가 나누어진 프레임형태를 만들어보도록 하죠.
웬만하면 메모장에서 프레임을 고치는 습관을 가지세요.
나모나 드림위버는 쓸데없는 태그들이 많이 들어가거든요.
왼쪽이 메뉴가 들어가고 오른쪽은 메인이구요...
프레임셋문서의 태그를 보면 대충 이런 형태로 되어있죠.

<frameset border="0" cols="60,*" frameborder="0">

<frame name="left" src="메뉴.htm" scrolling="no" style="border-right-style: solid; border-right-width: 1; border-right-color: red" >

<frame name="right" src="메인.htm">

</frameset>

여기서 우리가 오늘 배울부분은
이 부분입니다.

style="border-right-style: solid; border-right-width: 1; border-right-color: red"

이것이 프레임의 border의 모양을 정해주는 스타일시트입니다.

위의 스타일시트를 설명하자면 오른쪽프레임 border를 1크기의 실선으로 테두리로 주고, 색상은 빨강으로 주라는 명령입니다.


이제 대충 알겠지만 이 스타일은
좌/우/위/아래를  따로 지정해서 border의 모양을 바꿀수가 있습니다.
style="border-right-style: solid; border-right-width: 1; border-right-color: red"
여기서 right 대신에 left/top/bottom 을 넣어주시면 된답니다.


만약! 그 프레임 전체에 스타일을 적용시킬려면...
right/left/top/bottom은 넣지말고 border-style: solid 이렇게 넣거나 전부 넣어주는 방식으로하면..
그 프레임의 모든 부분에 스타일이 적용이 됩니다. ^^;;


이제 선의 모양을 지정하는 부분을 살펴보죠.
solid라고 해놓은 것은 실선이지만 모양을 자유롭게 바꿀수가 있어요.

일반실선 : solid
점선 : dotted
오목들어가기 : groove
대시 : dashed
이중실선 : double
볼록 나오기 : ridge
안쪽으로넣기 : inset
바깥쪽으로빼기 : outset


이렇게 말이죠....^^ 쓰고싶은 모양으로 맘대로 바꾸어보세요.
정말 쓸만한 팁이죠?