[CSS] 글꼴(Font) 스타일,Box Model,리스트(list) 에 대해서

CSS 글꼴(Font) 스타일

font 속성은 텍스트의 글꼴과 스타일을 지정합니다. 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> 10픽셀로 지정된 텍스트입니다. 13픽셀로 지정된 텍스트입니다. 9포인트로 지정된 텍스트입니다. 10포인트로 지정된 텍스트입니다.

font-weight 속성을 이용하면 텍스트의 굵기를 지정할 수 있습니다. <p style="font-weight: normal">일반적인 텍스트입니다.</p> <p style="font-weight: bold">bold를 지정한 텍스트입니다.</p> 일반적인 텍스트입니다. bold를 지정한 텍스트입니다.

텍스트의 크기 단위

font-size 속성을 사용할때 앞의 예제에서는 픽셀(px)과 포인트(pt)를 사용하였습니다. 이외에도 다양한 단위를 사용하여 글자의 크기를 지정할 수 있습니다. 글자의 크기를 지정하는 단위에는 절대단위와 상대단위로 나눌 수 있습니다. 절대단위 상대단위 pt (포인트, 1pt= 1/72 in) % (기준이 되는 글꼴에 대한 퍼센트) in (인치, 1in = 25.4 mm) em (기준이 되는 글꼴에 대한 문자의 높이) mm (밀리미터)   cm(센티미터)   pc (파이카, 1pc=12pt)   px (픽셀,1px=모니터의 1도트)

이 중 글자 크기를 지정할때 가장 많이 사용되는 단위는 절대단위 중 px와 pt 입니다. 9pt와 12px로 지정하는 것이 가장 일반적이다고 할 수 있습니다. 상대단위 em, %는 모두 브라우저의 기본 글꼴을 기준으로 지정되는 크기입니다. 1em은 100%와 동일하고 1em 이라는것은 브라우저의 기본 폰트의 100%크기 라는 의미입니다. 폰트의 크기를 지정하지 않으면 12pt 정도의 크기로 화면에 출력됩니다. 그러므로 0.75em으로 지정한 경우 이를 절대값으로 환산하면 9pt 정도의 크기로 출력됩니다.

Box Model - Margins, padding and borders

각각의 엘리먼트를 문서에 배치하기 위해서는 Box Model 이라고 부르는 margin, padding 그리고 border 속성을 전체적으로 이해해야 합니다. 위의 그림에서 중요한 4가지는 content, padding, border, margin 입니다. content : 순수한 콘텐츠 padding : 콘텐츠와 경계선 사이의 여백 border : 경계선 margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백 <table width="300" cellpadding="0" cellspacing="0" border="0" align="center"> <tr>  <td bgcolor="#EEEEEE">   <div style="padding:10px; margin:10px; border:1px gray solid;">Box Model을 설명하기 위한 예제</div>  </td> </tr> </table> 이 예제에서 padding값과 margin값을 변경해 보면 이 값이 어떤 부분을 의미하는지 이해할 수 있습니다. Box Model을 설명하기 위한 예제

CSS Box Model - 경계선(border)

border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다. <p style="border:1px gray solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p> 위와 같이 지정하면 1px의 gray 색상을 가진 경계선이 표시됩니다. border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다. border:1px gray solid 에서 1px은 경계선을 굵기를 지정하고, gray는 경계선의 색상을 지정합니다. 마지막에 있는 solid는 경계선을 스타일을 지정합니다. 이를 하나씩 분리하여 지정할 수도 있습니다. <p style="border-width:1px; border-color:gray; border-style:solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p> border-style 속성값으로는 solid 외에  dotted, dashed, double 등이 있습니다. 화면상에 구분이 잘되게끔 border-width를 2픽셀로 지정해보겠습니다. <p style="border-width:2px; border-color:gray; border-style:solid;">solid 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dotted;">dotted 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dashed;">dashed 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:double;">double 스타일의 경계선</p> solid 스타일의 경계선 dotted 스타일의 경계선 dashed 스타일의 경계선 double 스타일의 경계선

CSS 리스트(list)

list-style-type 속성을 사용하면 리스트의 marker 스타일을 지정할 수 있습니다. <ul>  <li style="list-style-type: disc">disc 타입의 리스트  <li style="list-style-type: circle">circle 타입의 리스트  <li style="list-style-type: square">square 타입의 리스트  <li style="list-style-type: none">none 타입의 리스트 </ul> disc 타입의 리스트 circle 타입의 리스트 square 타입의 리스트 none 타입의 리스트   순서가 있는 리스트(ol)의 경우는 다음과 같이 marker를 지정할 수 있습니다. <ol>  <li style="list-style-type: decimal">decimal 타입의 리스트  <li style="list-style-type: lower-roman">lower-roman 타입의 리스트  <li style="list-style-type: upper-roman">upper-roman 타입의 리스트  <li style="list-style-type: lower-alpha">lower-alpha 타입의 리스트  <li style="list-style-type: upper-alpha">upper-alpha 타입의 리스트 </ol> decimal 타입의 리스트 lower-roman 타입의 리스트 upper-roman 타입의 리스트 lower-alpha 타입의 리스트 upper-alpha 타입의 리스트

리스트의 marker에 이미지를 사용할 수도 있습니다. <ul>  <li style="list-style-image: url('marker.gif')">이미지를 사용한 리스트  <li style="list-style-image: url('marker.gif')">이미지를 사용한 리스트 </ul> 이미지를 사용한 리스트 이미지를 사용한 리스트