- 컨텐츠의 가로 정렬 (나를 감싸고 있는 부모태그 기준) - 내가 수평정렬을 시키고자 하는 인라인 레벨 요소를 감싸고 있는 부모태그에 속성을 기술해주어야 한다. - 인라인 레벨 요소의 수평 정렬을 시키는 속성 - left(default), center, right
text-align:left;
왼쪽 정렬
text-align:right;
오른쪽 정렬
text-align:center;
가운데 정렬
text-align:justify;
양쪽 정렬
text-align
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>뉴욕타임즈 10대 식품</title>
<style>
fieldset { padding: 10px; margin: 10px; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
.align-justify { text-align: justify; }
legend.clg {
color: red;
font-weight: bold;
font-size: 20px;
text-align: left;
}
</style>
</head>
<body>
<h1>텍스트 정렬</h1>
<!-- 왼쪽 정렬 -->
<fieldset class="align-left">
<legend class="clg">align-left</legend>
I don't know you But I want you All the more for that Words fall through
me And always fool me And I can't react And games that never amount To
more than they're meant Will play themselves out Take this sinking boat
and point it home We've still got time Raise your hopeful voice you have a
choice You've make it now
</fieldset>
<!-- 오른쪽 정렬 -->
<fieldset class="align-right">
<legend class="clg">align-right</legend>
I don't know you But I want you All the more for that Words fall through
me And always fool me And I can't react And games that never amount To
more than they're meant Will play themselves out Take this sinking boat
and point it home We've still got time Raise your hopeful voice you have a
choice You've make it now
</fieldset>
<!-- 가운데 정렬 -->
<fieldset class="align-center">
<legend class="clg">align-center</legend>
I don't know you But I want you All the more for that Words fall through
me And always fool me And I can't react And games that never amount To
more than they're meant Will play themselves out Take this sinking boat
and point it home We've still got time Raise your hopeful voice you have a
choice You've make it now
</fieldset>
<!-- 양쪽 정렬 -->
<fieldset class="align-justify">
<legend class="clg">align-justify</legend>
I don't know you But I want you All the more for that Words fall through
me And always fool me And I can't react And games that never amount To
more than they're meant Will play themselves out Take this sinking boat
and point it home We've still got time Raise your hopeful voice you have a
choice You've make it now
</fieldset>
</body>
</html>
text-indent(들여쓰기)
text-indent: 15px;
text-indent: 5%; (부모 width)
text-indent
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>들여쓰기 기능</title>
<style>
p {
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
.indent1 {
text-indent: 15px;
}
.indent2 {
text-indent: 5%;
}
</style>
</head>
<body>
<h1>Photograph</h1>
<p>
Loving can hurt, loving can hurt sometimes But it’s the only thing that I
know When it gets hard, you know it can get hard sometimes.
</p>
<p class="indent1">
Loving can hurt, loving can hurt sometimes But it’s the only thing that I
know When it gets hard, you know it can get hard sometimes. Loving can
hurt, loving can hurt sometimes But it’s the only thing that I know When
it gets hard, you know it can get hard sometimes. Loving can hurt, loving
can hurt sometimes But it’s the only thing that I know When it gets hard,
you know it can get hard sometimes. Loving can hurt, loving can hurt
sometimes But it’s the only thing that I know When it gets hard, you know
it can get hard sometimes. Loving can hurt, loving can hurt sometimes But
it’s the only thing that I know When it gets hard, you know it can get
hard sometimes. Loving can hurt, loving can hurt sometimes But it’s the
only thing that I know When it gets hard, you know it can get hard
sometimes. Loving can hurt, loving can hurt sometimes But it’s the only
thing that I know When it gets hard, you know it can get hard sometimes.
</p>
<p class="indent2">
Loving can hurt, loving can hurt sometimes But it’s the only thing that I
know When it gets hard, you know it can get hard sometimes. Loving can
hurt, loving can hurt sometimes But it’s the only thing that I know When
it gets hard, you know it can get hard sometimes. Loving can hurt, loving
can hurt sometimes But it’s the only thing that I know When it gets hard,
you know it can get hard sometimes. Loving can hurt, loving can hurt
sometimes But it’s the only thing that I know When it gets hard, you know
it can get hard sometimes. Loving can hurt, loving can hurt sometimes But
it’s the only thing that I know When it gets hard, you know it can get
hard sometimes. Loving can hurt, loving can hurt sometimes But it’s the
only thing that I know When it gets hard, you know it can get hard
sometimes. Loving can hurt, loving can hurt sometimes But it’s the only
thing that I know When it gets hard, you know it can get hard sometimes.
</p>
</body>
</html>
