문단모양과 스타일

문단 모양

 

1. 들여쓰기(text-indent)

 

첫 번째 줄의 들여쓰기 정보를 조절해주는 명령이다. 줄간격의 단위는 “in, cm, mm, pt, em"을 줄 수 있다. 일반적으로 쓰이는 단위는 글자단위로 처리하는 ”em"를 사용한다. 기본단위는 pt(pixel)

 

text-indent:3em ▶ 3글자 들여쓰기 text-indent:3cm ▶ 3cm 들여쓰기 text-indent:3in ▶ 3inch 들여쓰기 text-indent:3mm ▶ 3mm 들여쓰기 text-indent:3pt ▶ 3pixel 들여쓰기

   

 

 

2. 줄간격 조절하기(line-height)

숫자나 퍼센트를 입력하면 현재 본문내 글꼴 크기에 숫자를 곱한만큼 행간이 늘어난다. 실수사용도 가능하다.  

 

line-height:3   ▶ 글꼴 크기의 3배만큼 줄간격이 발생 line-height:1.5 ▶ 글꼴 크기의 1.5배만큼 줄간격이 발생 line-height:3cm ▶ 3cm 들여쓰기 line-height:3in ▶ 3inch 들여쓰기 line-height:3mm ▶ 3mm 들여쓰기 line-height:3pt ▶ 3pixel 들여쓰기

 

 

3. 자간(letter-spacing)

 

기본 단위는 pixel.  

letter-spacing:3   ▶ 3pixel 간격 letter-spacing:3cm ▶ 3cm 간격 letter-spacing:3in ▶ 3inch 간격 letter-spacing:3mm ▶ 3mm 간격

     

 

 

4. 문자의 밑줄 속성(text-decoration)

 

text-decoration:none	앵커 태그에서 사용하면 링크문자의 밑줄표시가 발생하지 않는다. <a href="..." style="text-decoration:none">this</a>
text-decoration:ubderline	문자에 밑줄을 표시한다. <u>...</u>와 동일함. <p style="text-decoration:underline"> .... </p>

 

 

 

 

 

5. 문단의 여백 주기(margin)

 

margin-left	문단의 왼쪽 여백을 줌
margin-right	문단의 오른쪽 여백을 줌
margin-top	문단의 상단 여백을 줌
margin-bottom	문단의 하단 여백을 줌

 

   
6. 패딩 

 

 태이블의 셀 경계선이나 문단과 텍스트 사이의 간격을 말한다.  

 

 

padding-left	문단 안의 왼쪽 여백을 줌
padding-right	문단 안의 오른쪽 여백을 줌
padding-top	문단 안의 상단 여백을 줌
padding-bottom	문단 안의 하단 여백을 줌