[HTML/CSS] 들여쓰기 및 내어쓰기 방법

html 문서를 들여쓰기 및 내어쓰기를 하기 위해서는 css의 text-indent를 활용하시면 됩니다.

 

 

우선 간단하게 문서 파일을 하나 만들어보겠습니다.

 

 

코드는 간단히 이런식으로 만들었으며, p 태그를 수정하는 형태로 진행하도록 하겠습니다.

각각의 p 태그는 서로 다른 클래스명을 가지고 있습니다.

 

 

브라우저로 열였을 때 이런 형태의 모습으로 나옵니다.

보시기 조금 편하도록 일부러 왼쪽 끝에서 marign을 준 상태이고, 하늘색 점선이 왼쪽 끝이라고 생각하시고 보시면 됩니다.

 

 

우선 가장 먼저 class="in"을 조정하여 들여쓰기를 진행해보도록 하겠습니다.

.in { text-indent: 30px; }

위 코드를 입력하시면 첫 줄만 들여쓰기가 일어납니다.

 

 

text-indent의 속성값을 반대로 음수로 주는 경우 내어쓰기가 실행됩니다.

.out { text-indent: -30px; }

위와 같이 하늘색 점선인 임의의 왼쪽 벽을 뚫고 한 줄이 밖으로 나가는 모습을 볼 수 있습니다.

 

하지만 실제 홈페이지에서는 이렇게 밖으로 나가면 보기가 불편하기 때문에 아래와 같은 형태를 이용하시면 됩니다.

.hybrid {
	margin-left: 30px; /* 1 */
	text-indent: -30px; /* 2 */
}

우선 p 태그를 margin이나 padding을 이용하여 전체 문단을 왼쪽 벽에서 띄웁니다.

 

그리고 text-indent를 이용하여 한 줄만 내어쓰기를 해주면 아래와 같이 한 문단만 내어쓰기를 하면서 벽에 가려지는 현상을 막을 수 있습니다.