HTML5-CSS/text-align.html at master · ViGilanteAF/HTML5-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>텍스트 정렬</title>
    <style>
      .align-left {
        text-align: left;
        text-justify: inter-word;
        text-indent: 15px;
        line-height: 30px;
      }
      .align-right {
        text-align: right;
        text-justify: distribute;
        text-indent: 15%;
        line-height: 2;
      }
      .align-center {
        text-align: center;
        text-justify: none;
        text-indent: 30px;
        line-height: 200%;
      }
      .align-justify {
        text-align: justify;
        text-justify: auto;
        text-indent: 30%;
        line-height: 0.7;
      }
    </style>
  </head>
  <body>
    <p class="align-left">
      Integer elementum massa at nulla placerat varius. Suspendisse in libero
      risus, in interdum massa. Vertivulum 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. Vertivulum 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. Vertivulum 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. Vertivulum ac leo vitae metus faucibus gravida
      ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
    </p>
  </body>
</html>