• CSS

CSS TEXT-INDENT 와 MARGIN-LEFT를 이용하여 글자 들여쓰기, 내어쓰기 효과

2018-11-09 223

설명

  • 카카오톡 링크

CSS TEXT-INDENT 와 MARGIN-LEFT를 이용하여 글자 들여쓰기, 내어쓰기 효과입니다

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! ) 

<style>
	.line {display:inline-block; width:100%}
	.line span { display:inline-block; width:100%; font-family:"NanumSquare"; font-size: 16px; margin-top:20px }
	.line .first_span {margin-top:0}
	.line .one {text-indent: 2em;}
	.line .two {text-indent: -2em;}
	.line .three {text-indent: -2em;margin-left: 2em;}
</style>

<div class="line">
	<span class="one first_span">
		테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 
	</span>
	<span class="two">
		테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 
	</span>
	<span class="three">
		테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 /테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 / 테스트 글자입니다 
	</span>
</div>