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

테이블,이미지 테두리 스타일
작성자 : 99 단국강토
등록날짜 : 2009.02.10 10:07
1,975
테이블,이미지 테두리 스타일 .................................................

테이블 태그나 이미지등 테두리선에 대한 스타일을 ! 특히 점선이나 한편을 다르게 표현하고자 할 때는 CSS를 사용할 수 있다.



border-style
border-style:none
 
border-style:dotted
 
border-style:dashed
 
border-style:solid
 
border-style:double
 
border-style:groove
 
border-style:ridge
 
border-style:inset
 
border-style:outset
 
* 4개의 태두리선을 모두 다르게 적용하려면
border-top-style
border-bottom-style
border-left-style
border-right-style 를 따로 따로 지정해야한다.


border-color
border-color:#006699
border-style:dotted
 
border-color:tomato
border-style:dashed
 
border-color:orange
border-style:solid
 
* 4개의 태드리선을 모두 다르게 적용하려면
border-top-color
border-bottom-color
border-left-color
border-right-color 를 따로 따로 지정해야한다.


border-width
border-width:1px
border-color:#006699
border-style:dotted
1px

3px
border-width:1px
border-color:tomato
border-style:dashed
1px

3px
border-width:1px
border-color:orange
border-style:solid
1px

3px
* 4개의 태드리선을 모두 다르게 적용하려면
border-top-width
border-bottom-width
border-left-width
border-right-width 를 따로 따로 지정해야한다.


margin (바깥쪽 여백)
margin:3px
border-width:1px
border-color:#006699
border-style:dotted
margin 없이

margin:3px

margin:10px
* 4개의 태드리선을 모두 다르게 적용하려면
margin- top
margin-bottom
margin-left
margin-right 를 따로 따로 지정해야한다.


width, height
width=300
height=40
border-width:1px
border-color:#006699
border-style:dotted
width=300
height=40


padding (안쪽 여백)
padding:5px
width=300px
border-width:1px
border-color:#006699
border-style:dotted
내용물 주위로 여백이...
* 4개의 태드리선을 모두 다르게 적용하려면
padding-top
padding-bottom
padding-left
padding-right 를 따로 따로 지정해야한다.


이미지에 적용하기
sonccc.gif sonccc.gif sonccc.gif
border-style:dotted;
border-color:orange;
border-width:3px
border-style:dashed;
border-color:orange;
border-width:3px
border-style:outset;
border-color:orange;
border-width:3px

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

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

Comments

번호 제목 글쓴이 날짜 조회
3045 색깔별로 분류 99 단국강토 02.10 1961
3044 선택자(Selector) 99 단국강토 02.10 1646
3043 HTML 강좌 STYLE SHEET 문단제어 99 단국강토 02.10 1690
3042 문서내에 작은 스크롤상자 만들기(iframe 대신) 99 단국강토 02.10 2498
3041 이미지 정중앙 99 단국강토 02.10 1747
3040 마우스 커서 변경 99 단국강토 02.10 1593
3039 make flexible width(example) 99 단국강토 02.10 2253
3038 리스트 스타일 99 단국강토 02.10 1936
열람중 테이블,이미지 테두리 스타일 99 단국강토 02.10 1976
3036 테이블 넓이보다 긴 텍스트 처리(자동 줄 바꿈) 99 단국강토 02.10 3424
3035 마우스 올렸을때 사각테두리 만드는 법 99 단국강토 02.10 2244
3034 서로 다르게 CSS소스 적용하는 방법 99 단국강토 02.10 2974
3033 마우스 On 시에 표 색상 바꾸기 99 단국강토 02.10 3352
3032 해상도 상관 없이 팝업 중앙에 위치시키기 99 단국강토 02.10 3418
3031 해상도 상관 없이 팝업 중앙에 위치시키기 99 단국강토 02.10 2349
3030 EclipseLink를 사용하여 JPA에서 반복 불가능한 읽기 방지 99 단국강토 02.10 2298
3029 EclipseLink를 사용하여 JPA에서 반복 불가능한 읽기 방지 99 단국강토 02.10 2694
3028 자바스크립트의기본 99 단국강토 02.10 1439
3027 자바스크립트의기본 99 단국강토 02.10 2940
3026 table 태그를 알자 99 단국강토 02.10 1421
3025 table 태그를 알자 99 단국강토 02.10 2789
3024 레이어를 제대로알자 99 단국강토 02.10 2452
3023 레이어를 제대로알자 99 단국강토 02.10 1602
3022 다음부터..창띄우지않기[쿠키이용] 99 단국강토 02.10 2546
3021 다음부터..창띄우지않기[쿠키이용] 99 단국강토 02.10 2955
3020 프린트관련스크립 99 단국강토 02.10 1527
3019 프린트관련스크립 99 단국강토 02.10 2012
3018 원하는 창 크기 ,즐겨찾기등록하기 99 단국강토 02.10 1833
3017 원하는 창 크기 ,즐겨찾기등록하기 99 단국강토 02.10 2200
3016 새창,새창내려온후진동 99 단국강토 02.10 1342
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취