• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

Font의 속성값-2

오작교 18181

0
padding-top , padding-left , paddding-bottom , padding-right
 
앞페이지에서 배운 margin하곤 비슷한 기능인데요...역시 여백조정 속성입니다. 그러나 padding속성은 margin속성에 비해 글자나 요소간에 겹치게 할 수가 없답니다. margin보다는 그리 많이 사용되지 않는 듯 하네요..^^
 
 ☞ border-width , border-color , border-style
  border속성은 해당요소의 테두리의 스타일을 지정하는 기능을 합니다. margin보다는 좁은 영역을 가지는 데요.....(이 말을 이해하실지....ㅜ.- ) border-width 속성은 테두리의 굵기를 지정해주고, border-color 속성은 색상을 , border-style 속성은 스타일을 지정해주는 기능을 합니다. 예제 하나 볼까요? ^^
 <style type="text/css">
  <!--
   body { margin-left:10%; color:red; font-size:13px; font-weight:bold; font-family:arial; }
   h1 { font-size:30px; }
   .love { border-width:10px; border-style: inset; border-color:yellow; }
   .story { border-width:20px; border-style: double; border-color:skyblue; }
   .kiss { border-width:30px; border-style: outset; border-color:black; }

  -->
 </style>
 <body>
  <h1>태그매니아</h1>
  <p class=love> i love you</p>
  <p class=story> i love you</p>
  <p class=kiss> i love you</p>
 </body>

 border-width 의 값이 커질 수록 테두리의 두께가 두꺼워지고 border-style의 경우 예제에서 보여진 inset , double , outset 뿐만 아니라 solid , dotted , dashed , ridge 등이 있습니다. 또한 border-color의 경우 그 border-style에 따라 그 색상이 잘 나타날 때도 있고 그렇지 않는 때도 있다는 것을 유의하시길 바랍니다.

공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 202410
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290075 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349099 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 293710 +14
300
normal
오작교 23.12.10.09:32 14439 0
299 Script
normal
오작교 23.12.10.09:29 19723 0
298 CSS
normal
오작교 21.01.09.14:18 40663 0
297 HTML
normal
오작교 15.09.17.08:58 116266 0
296 HTML
normal
오작교 15.09.13.21:38 21532 0
295 HTML
normal
오작교 15.09.13.21:30 25114 0
294 HTML
normal
오작교 15.08.30.12:19 52731 0
293 Script
normal
오작교 15.05.12.14:06 21113 0
292 HTML
file
오작교 12.03.08.13:51 35877 0
291 HTML
normal
오작교 11.06.03.10:44 40697 0
290 CSS
normal
오작교 11.06.03.10:29 70601 0
289 Script
normal
오작교 11.03.22.11:19 43408 0
288 Script
normal
오작교 11.03.22.11:15 38165 0
287 Script
normal
오작교 11.03.22.11:07 37059 0
286 HTML
normal
오작교 11.01.25.10:27 36156 0
285 CSS
normal
오작교 11.01.24.10:40 35327 0
284 HTML
normal
오작교 11.01.24.10:39 37038 0
283 Script
normal
오작교 11.01.24.10:34 38058 0
282 CSS
normal
오작교 11.01.24.10:31 37682 0
281 CSS
normal
오작교 11.01.24.10:27 36158 0