홈 강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

마케팅 특별마케팅자료 다운로드마케팅자료 창업,경영 기획,카피 동기부여,성취 소스,유틸
CSS 사용방법 - 테두리표현
작성자 : 99 단국강토
등록날짜 : 2009.02.16 11:33
2,332
테두리표현
  1 테두리와 문단간격 - [ padding ]
  2 테두리 모양 - [ border-style ]
  3 테두리 두께 - [ border-width ]
  4 테두리 색상 - [ border-color ]
blank.gif
       1 테두리와 문단간격 - [ padding ] ... [ TOP ]

안녕하세요^^ 이제는 스타일시트에 대하여 감이 많이 잡히시죠^^*
형식은 비슷비슷하니 따라 하시는데 크게 어려우신것은 없으실것 이고 또한 HTML에서 기본기만 있으시면 더더욱 쉬우실 것입니다. 역시 지금 다룰 padding도 HTML테이블에서 다룬 cellpadding와 같은 역활을 한답니다. 내용을 한번 볼까요^^
padding-top : 윗쪽
padding-bottom : 아랫
padding-left : 왼쪽
padding-right : 오른쪽

역시 전장 margin에서 다루었듯이 더 쉬운방법 입니다. 아래를 보셔요^^
{padding:값1(상하좌우 모두해당)}
{padding:값1(상하),값2(좌우)}
{padding:값1(상),값2(좌우),값3(하)}
{padding:값1(상),값2(우),값3(하),값4(좌)}

어때요 쉽죠^^* 아래 예제의 주석부분은 똑같은 방법이니 여러분께서 카피하여 스타일시트에 넣어 연습해 보세요^^*

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<!-- td {padding:100,50,200} -->
<style>
td {padding-top:100;padding-right:50;padding-bottom:200;padding-left:50}
font {width:100%;height:100%;background-color:yellow}
</style>
</head>
<body>
<table border='1' width='100%' height='100%'>
<tr><td><font>&nbsp;</font></td></tr>
</table>
</html>

blank.gif
       2 테두리 모양 - [ border-style ] ... [ TOP ]

홈페이지를 이쁘게 꾸미실려고 하시는 분들은 지금 나오는 border-style속성에 관심이 많이 있으시겠느데요^^?
먼저 border-style속성의 값에 대하여 알아볼까요!
none : 테두리를 표시하지 않으며 굵기 0으로 설정, 표의 셀에 테두리가 중복되는 경우에는 다른값이
          우선됩니다.
hidden : 테두리를 표시하지 않으며 굵기 0으로 설정, 표의 셀에 테두리가 중복되는 경우에는 이 값이 가장
             우선됩니다.
solid : 테두리를 직선으로 표현합니다.
double : 테두리를 두줄로 표현합니다.
groove : 외곽선이 들어가 보이도록 입체적으로 표현합니다.
ridge : 테두리가 돌출되어 보이도록 입체적으로 표현합니다.
inset : 테두리의 안쪽 전체가 들어가 보이도록 입체적으로 표현합니다.
outset : 테두리의 안쪽 전체가 돌출되어 보이도록 입체적으로 표현합니다.
dashed : 테두리를 긴 점선으로 표시합니다.(익스플로러 5.5이상)
dotted : 테두리를 짧은 점선으로 표시합니다.(익스플로러 5.5이상)

모처럼 inline방식으로 예제를 만들어 보았습니다.^^*

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
</head>
<body>
<font style='border-style:none'>[none] 적용</font><p>
<font style='border-style:hidden'>[hidden] 적용</font><p>
<font style='border-style:solid'>[solid] 적용</font><p>
<font style='border-style:double'>[double] 적용</font><p>
<font style='border-style:groove'>[groove] 적용</font><p>
<font style='border-style:ridge'>[ridge] 적용</font><p>
<font style='border-style:inset'>[inset] 적용</font><p>
<font style='border-style:outset'>[outset] 적?lt;/font><p>
<font style='border-style:dashed'>[dashed] 적용</font><p>
<font style='border-style:dotted'>[dotted] 적용</font><p>
</html>

참고로 아래와 같은 방법으로 적용을 할 수 있습니다. 즉 위의 예제처럼 상하좌우를 다 지정하지 않고 원하고자 하는 면만을 세밀하게 정의 할 수 있습니다.
{border-top-style}와 같은 방법으로^^* 중간에 top,bottom,left,right를 정의할 수 있죠^^*

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
</head>
<body>
<font style='border-top-style:solid'>[solid] 적용</font><p>
<font style='border-bottom-style:double'>[double] 적용</font><p>
<font style='border-left-style:groove'>[groove] 적용</font><p>
<font style='border-right-style:ridge'>[ridge] 적용</font><p>
<font style='border-top-style:inset'>[inset] 적용</font><p>
<font style='border-bottom-style:outset'>[outset] 적용</font><p>
<font style='border-left-style:dashed'>[dashed] 적용</font><p>
<font style='border-right-style:dotted'>[dotted] 적용</font><p>
</html>

blank.gif
       3 테두리 두께 - [ border-width ] ... [ TOP ]

자! 이제는 border-width속성만 보아도 이것이 무었이구나! 아시겠죠?
네! 이속성은 테두리의 두께를 정의하는 속성이랍니다. 그리고 아래 예제에서는 위 에서 언급한것 처럼 세밀하게 정의하는 방법도 같이 예를 들었으니 참조하세요.

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
</head>
<body>
<font style='border-style:solid;border-width:1'>재미있는 인포카페^^*</font><p>
<font style='border-style:solid;border-top-width:1'>재미있는 인포카페^^*</font><p>
<font style='border-style:solid;border-bottom-width:1'>재미있는 인포카페^^*</font><p>
</html>

blank.gif
       4 테두리 색상 - [ border-color ] ... [ TOP ]

border-color는 테두리의 색상을 정의하는 스타일 속성입니다. 윗 강의를 따라하셨으면 무리없이 소화하실 수 있겠죠^^* 이해가 않가시면 위 강의부터 다시시작--,.--;;

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
</head>
<body>
<font style='border-style:solid;border-color:red'>재미있는 인포카페^^*</font><p>
<font style='border-style:solid;border-top-color:red'>재미있는 인포카페^^*</font><p>
<font style='border-style:solid;border-bottom-color:red'>재미있는 인포카페^^*</font><p>
</html>

테두리를 정의하는 강좌가 끝이요~~~ 부족한 부분이 있어도 이쁘게 봐주셔요^^* 그럼 다음 강좌로 넘어갑니다.

출처 : Tong - 드렁크수달스님의 ■ CSS ■통

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
☞​자세히보기

Comments

로그인한 회원만 댓글 등록이 가능합니다.
번호 제목 글쓴이 날짜 조회
3135 1-16.[문장,문서] 문장, 문서 꾸미기4 - ④ 문서에 선긋기 <hr> 태그 99 단국강토 02.16 3200
3134 1-15.[문장,문서] 문장, 문단 꾸미기3 - ③ <br> <p> 태그 99 단국강토 02.16 2270
3133 [문장,문서] 문장, 문단 꾸미기2 - ② <body> 속성 태그 99 단국강토 02.16 2512
3132 1-13.문장,문서] 문장, 문단 꾸미기 - ① 문장, 문단 태그 입문 99 단국강토 02.16 2556
3131 1=12.[글자] 움직이는 글자4 - ④ <marquee> 태그 다양한 실전 응용 99 단국강토 02.16 2155
3130 1-11.[글자] 움직이는 글자3 - ③<marquee> 태그 활용2 99 단국강토 02.16 2474
3129 1-10.[글자] 움직이는 글자2 - ② <marquee> 태그 활용 99 단국강토 02.16 2630
3128 1-9.[글자] 움직이는 글자1 - ① <marquee> 태그 99 단국강토 02.16 2593
3127 1-8.[글자] 글자 꾸미기 1 - ③ 글자 태그 정리 99 단국강토 02.16 2379
3126 1-6.[글자] 글자 기본 태그 - ② <font> <size> <color> 태그 99 단국강토 02.16 2862
3125 1-5.[태그] 태그의 이해 - ① <br>태그 99 단국강토 02.16 2006
3124 1-4.[HTML 기초] HTML 구조와 속성 - ④ HTML 들여다보기 99 단국강토 02.16 2399
3123 1-3.[HTML 기초] HTML 문서 - ③ HTML 만들기 99 단국강토 02.16 2567
3122 CSS 사용 표현 - 범위 표현 99 단국강토 02.16 2004
3121 CSS 사용방법 - 배경표현 99 단국강토 02.16 2310
3120 CSS 사용방법 - 문단표현 99 단국강토 02.16 2047
열람중 CSS 사용방법 - 테두리표현 99 단국강토 02.16 2333
3118 CSS 사용방법 - 커서표현 99 단국강토 02.16 2016
3117 CSS 사용방법 - 필터 표현 99 단국강토 02.16 2292
3116 내 전용 스타일 시트입니다. 99 단국강토 02.16 2016
3115 스타일 시트로 이미지 롤오버 만들기 99 단국강토 02.16 1889
3114 프리진의 css 99 단국강토 02.16 2123
3113 TextArea 박스 내부에 밑줄이미지 삽입 99 단국강토 02.16 3868
3112 CSS를 이용한 테이블 라인 표현하기 99 단국강토 02.16 3022
3111 테이블(table)와 관련된 스타일 시트 99 단국강토 02.16 2594
3110 스타일시트로 모서리가 라운딩 처리된 테이블[roundrect] 99 단국강토 02.16 2220
3109 LG전자 스타일시트 99 단국강토 02.16 2428
3108 TextArea 자동으로 늘리기 99 단국강토 02.16 4314
3107 자바스크립트 100선 99 단국강토 02.16 1376
3106 자바스크립트 100선 99 단국강토 02.16 2151
마케팅
특별 마케팅자료
다운로드 마케팅자료
+ 마케팅 더보기
+ 특별 마케팅자료 더보기
+ 다운로드 마케팅자료 더보기
창업,경영
기획,카피,상품전략
동기부여,성취
+ 창업,경영 더보기
+ 기획,카피,상품전략 더보기
+ 동기부여,성취 더보기