|
 |
 CSS 강좌
4. 스타일시트 특강4
|
 |
[1][2][3]
|
☞ 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에
따라 그 색상이 잘 나타날 때도 있고 그렇지 않는
때도 있다는 것을 유의하시길 바랍니다.
현재 시각 새벽 02시 20분이네요.....잠도 오고.....피곤도
하고.....낼 학교도 일찍 가봐야 되는데..... 이
말은 즉...." 여기서 네번째 특강 마치도록
하겠습니다." ☜이 말을 하고 싶다는 말이져....^^>핫핫~
여기서 마치도록 하겠습니다. 마지막으로 한
마디...『 연습 많이 하세요
』
|
이전 페이지로 || 태그연습장 || 메인 페이지로
|
|
|
|
