CSS-문단(paragraph) 관련 스타일

1. text- align : 문단 정렬. 블록 요소에만 적용되는 속성

속성 값	설명
left	왼쪽 정렬
center	가운데 정렬
right	오른쪽 정렬
justify	양쪽 정렬

2. vertical-align : 이미지나 폼 요소 정렬. img, input, select, label, 테이블의 tr, td 등에 사용

속성 값	설명
top	위쪽 정렬
middle	세로 중앙 정렬
bottom	아래쪽 정렬

3. text-indent : 문자의 첫머리를 들여쓰기 해주는 속성. 블록요소에만 적용.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align</title>
    <style>
        .align{width: 600px; height: 400px; padding: 0 5px 5px; border: 1px solid #000;}
        .align p:nth-child(1){text-align: left;}
        .align p:nth-child(2){text-align: center;}
        .align p:nth-child(3){text-align: right;}
        .align p:nth-child(4){text-align: justify;}
        .align p:nth-child(5){text-indent: 10px;}
        img{width: 250px;}
        .valign img{vertical-align: middle}
    </style>
</head>
<body>
   <div class="align">
        <p>왼쪽으로! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint architecto, eveniet dolorem quos perspiciatis optio vero soluta voluptatibus omnis repellat libero eaque at ipsam saepe quas alias, voluptatem ullam itaque?</p>
        <p>중앙으로! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint architecto, eveniet dolorem quos perspiciatis optio vero soluta voluptatibus omnis repellat libero eaque at ipsam saepe quas alias, voluptatem ullam itaque?</p>
        <p>오른쪽으로! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint architecto, eveniet dolorem quos perspiciatis optio vero soluta voluptatibus omnis repellat libero eaque at ipsam saepe quas alias, voluptatem ullam itaque?</p>
        <p>~양쪽으로~ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint architecto, eveniet dolorem quos perspiciatis optio vero soluta voluptatibus omnis repellat libero eaque at ipsam saepe quas alias, voluptatem ullam itaque?</p>
        <p>들여쓰기! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint architecto, eveniet dolorem quos perspiciatis optio vero soluta voluptatibus omnis repellat libero eaque at ipsam saepe quas alias, voluptatem ullam itaque?</p>
    </div>
       
        <p class="valign">강아지 네마리 <img src="img/dog.jpg" alt="dog"></p>
        
</body>
</html>

4. word-wrap : 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의.

단어를 어느 정도는 고려하여 개행

word-wrap: break-word;

5. word-break : 부모 영역을 벗어난 텍스트의 처리 방법을 정의.

속성 값	설명
nomal	기본값
break-all	글자가 넘치면 줄바꿈
keep-all	단어를 끊어 줄바꿈하지 않음

word-break: break-all;은 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행

제일 이상적인 방법 : 단어도 유지되고 부모 영역을 벗어난 텍스트도 없게 처리

{ word-break: keep-all; word-wrap: break-wrod; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>word-wrap, break</title>
    <style>
        .word p{width: 150px; border: 1px solid #000;}
        .word1{word-wrap: break-word;}
        .word2{word-break: normal;}
        .word3{word-break: break-all;}
        .word4{word-break: keep-all;}
        .word5{word-break: keep-all; word-wrap: break-word;}
    </style>
</head>
<body>
    <h2>기본값</h2>
    <p>Loremipsum dolorsitamet, consecteturadipisicingelit.</p>
    <h2>word-wrap</h2>
    <p class="word1">Loremipsum dolorsitamet, consecteturadipisicingelit.</p>
    <h2>word-break: nomal</h2>
    <p class="word2">Loremipsum dolorsitamet, consecteturadipisicingelit.</p>
    <h2>word-break: break-all</h2>
    <p class="word3">Loremipsum dolorsitamet, consecteturadipisicingelit.</p>
    <h2>word-break: keep-all</h2>
    <p class="word4">Loremipsum dolorsitamet, consecteturadipisicingelit.</p>
    <h2>word-wrap ＆ word-break: keep-all</h2>
    <p class="word5">Loremipsum dolorsitamet, consecteturadipisicingelit.</p>
</body>
</html>

word-wrap, break