문단 스타일

윤재열·2022년 1월 26일

목록 보기

6/19

direction 속성-글자 쓰기 방향 지정하기

텍스트를 어느 방향으로 부터 쓰기 시작해 화면에 표시할지 결정

속성 값	설명
ltr	왼쪽에서 오른쪽으로(left to right) 텍스트를 표시합니다.(기본값)
rtl	오른쪽에서 왼쪽으로(right to left) 텍스트를 표시합니다.

아랍어는 오른쪽에서 왼쪽으로 씁니다.
다만,한글이나 영어처럼 왼쪽에서 오른쪽으로 쓰는 언어일 경우 속성 값으로 trl을 입력해도 텍스트 표시 순서는 바뀌지 않고 왼쪽에서 오른쪽으로 정렬되어 나타납니다.

text-align 속성-텍스트 정렬하기

속성 값	설명
start	현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬합니다.
end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬합니다.
left	왼쪽에 맞추어 문단을 정렬합니다.
right	오른쪽에 맞추어 문단을 정렬합니다.
center	가운데에 맞추어 문단을 정렬합니다.
justify	양쪽에 맞추어 문단을 정렬합니다.
match-parent	부모 요소에 따라 문단을 정렬합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>뉴욕타임즈 10대 식품</title>
  <style>
  	p {
  		border: 1px solid #ccc; /* 테두리 - 1픽셀짜리 회색 실선 */
  		padding: 10px; /* 테두리와 내용 사이의 패딩 여백 */
  		margin: 10px; /* 단락 주변의 마진 여백 */
  	}
    .align-left {text-align:left;}  /* 왼쪽 정렬 */
    .align-right {text-align:right;}  /* 오른쪽 정렬 */
    .align-center {text-align:center;}  /* 가운데 정렬 */
    .align-justify {text-align:justify; }  /* 양쪽 정렬 */
  </style>
</head>
<body>
  <h1>텍스트 정렬 </h1>
	<!-- 왼쪽 정렬 -->
	<p class="align-left"> 
		Integer elementum massa at nulla placerat varius.
		Suspendisse in libero risus, in interdum massa.
		Vestibulum ac leo vitae metus faucibus gravida ac in neque.
		Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
	</p>  
	<!-- 오른쪽 정렬 -->
  <p class="align-right"> 
		Integer elementum massa at nulla placerat varius.
		Suspendisse in libero risus, in interdum massa.
		Vestibulum ac leo vitae metus faucibus gravida ac in neque.
		Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
	</p> 

	<!-- 가운데 정렬 -->
	<p class="align-center">
		Integer elementum massa at nulla placerat varius.
		Suspendisse in libero risus, in interdum massa.
		Vestibulum ac leo vitae metus faucibus gravida ac in neque.
		Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
	</p> 	
 
	<!-- 양쪽 정렬 -->
	<p class="align-justify">
		Integer elementum massa at nulla placerat varius.
		Suspendisse in libero risus, in interdum massa.
		Vestibulum ac leo vitae metus faucibus gravida ac in neque.
		Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
	</p> 

</body>
</html>

text-indent속성-텍스트 들여 쓰기

텍스트가 많은 문서일 경우 , 문단의 첫 글자를 들여쓰면 문단을 들여 쓰면 문단의 시작을 쉽게 알아 볼 수 있습니다.

속성 값	설명
<크기>	단위와 함께 들여 쓸 크기를 지정합니다.
<백분율>	부모 요소의 너비를 기준으로 상대적 크기를 지정합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>뉴욕타임즈 10대 식품</title>
  <style>
    p {
      border:1px solid #000; /* 테두리 - 1픽셀짜리 회색 실선 */
      padding:10px; /* 패딩 여백 */
      margin:10px; /* 마진 여백 */
    }
    .indent1 {text-indent:15px;}  /* 15px만큼 들여쓰기 */
    .indent2 {text-indent:5%;}  /* 5%만큼 들여쓰기 */
  </style>
</head>
<body>
  <h1>블루베리(Blueberry)</h1>
  <p>블루베리는 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제하고 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지기도 한다.</p>
  <p class="indent1">블루베리는 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제하고 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지기도 한다.</p>
  <p class="indent2">블루베리는 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제하고 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지기도 한다.</p>
</body>
</html>

line-height속성- 줄간격 조절하기

문단의 첫 줄을 넘어 두 줄 이상이 되면 '줄 간격'이 생깁니다.줄간격은 너무 좁아도 내용이 들어오지 않고 너무 넓으면 내용을 보기가 싫어집니다.

<숫자>,<크기><백분율>로 표시합니다.
<숫자>,<백분율>로 지정했을 때는 글자 크기를 기준으로 지정합니다.
예를 들어 글자 크기를 12px로 지정했을 때 줄 간격을 2.0으로 했다면 실제 줄 간격을 24px가 됩니다.
보통 줄 간격을 글자 크기의 1.5~2배면 적당합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>줄 간격</title>
  <style>
    p { 
      font-size:15px;
      border:1px solid gray;
      padding:10px;
    }
    .big-line {
      line-height:2;  /* 글자 크기 2배만큼의 줄간격 */
    }
    .small-line {
      line-height: 0.7;  /* 글자 크기 0.7배만큼의 줄간격 */
    }

  </style>
</head>
<body>
  <h2>블루베리(Blueberry)</h2>
  <p>블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
    이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
  <p class="small-line">블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
    이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
  <p class="big-line">블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
    이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>    
</body>
</html>