텍스트 스타일을 위한 속성 (출처: http://www.homejjang.com/07/text_css.php)
- color: 텍스트 색상 (white #FFFFFF )
- direction: 텍스트 방향 ( ltr, rtl )
- line-height: 줄간격 (150% )
- letter-spacing: 글자간격 (-0.1px)
- text-align: 텍스트 정렬 (left, right, center, justify )
- text-decoration: 텍스트 장식 (none, underline, overline, line-through, blink )
- text-indent: 들여쓰기 (20px )
- text-transform: 대소문자 지정 (none, capitalize, uppercase, lowercase)
- word-spacing: 단어간격 (1px)
배경 스타일을 위한 속성 (출처: http://www.homejjang.com/07/css_background.php)
- background-color: 배경색을 지정 (yellow, #FFFF80, Ivory) <div style="height:50px; background-color: #FFFFF0">ivory배경색이 지정된 예제</div>
- background-image: 배경 이미지를 지정할 수 있습니다. url(bg.gif) <div style="width:250; height:250; background-image: url(bg.gif)"></div>
- background-repeat: 배경 이미지의 반복 여부르리 지정. repeat, repeat-x, repeat-y, no-repeat
- background-position: 배경 이미지의 위치 지정.( top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right) <div style="width:250; height:250; background-image: url(bg.gif) ; background-repeat:no-repeat"></div>
- background-attachment: 배경이미지의 스크롤 여부를 지정, (scroll, fixed)
글꼴 스타일을 위한 속성 (출처: http://www.homejjang.com/07/css_font.php )
- 텍스트의 글꼴과 스타일을 지정
- font-family: 텍스트의 글꼴 지정
<p style="font-family: 돋움">돋움 글꼴로 지정된 텍스트입니다.</p>
<p style="font-family: 궁서">궁서 글꼴로 지정된 텍스트입니다.</p>
<p style="font-family: 바탕">바탕 글꼴로 지정된 텍스트입니다.</p> - font-size: 텍스트의 크기 지정
<p style="font-size: 10px">10픽셀로 지정된 텍스트입니다.</p>
<p style="font-size: 13px">13픽셀로 지정된 텍스트입니다.</p>
<p style="font-size: 9pt">9포인트로 지정된 텍스트입니다.</p>
<p style="font-size: 10pt">10포인트로 지정된 텍스트입니다.</p> - font-weight: 텍스트의 굵기 지정
<p style="font-weight: normal">일반적인 텍스트입니다.</p>
<p style="font-weight: bold">bold를 지정한 텍스트입니다.</p>
Box Model - Margins, padding and borders
- content: 순수한 컨텐츠
- padding: 컨텐츠와 경계선 사이의 여백
- border: 경계선
- margin: 경계선 밖에서 박스 모델의 최종 경계선까지의 여백
- 예: <div style="padding:10px; margin:10px; border:1px gray solid;">Box Model을 설명하기 위한 예제</div>