Bootstrap Contents / text

- text-alignment

text-left	좌측 정렬
text-center	중앙 정렬
text-right	우측 정렬
text-justify	좌우 배분 정렬

<div class="container">

        <h1 class="display-1 text-center">Text Alignments</h1>

        <br>

        <p class="text-left">Left aligned text on all viewport sizes.</p>

        <p class="text-center">Center aligned text on all viewport sizes.</p>

        <p class="text-right">Right aligned text on all viewport sizes.</p>

        <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

        <br>

        <p class="text-sm-right">Right aligned text on SM or wider.</p>  //break point, 디바이스의 크기에 따라 

        <p class="text-md-right">Right aligned text on MD or wider.</p>  //정렬됨

        <p class="text-lg-right">Right aligned text on LG or wider.</p>

        <p class="text-xl-right">Right aligned text on XL or wider.</p>

</div>

- float

-> 어울림과 같은 개념 

-> 글과 이미지가 섞인 페이지를 편집할 때 이미지를 좌측에 넣고 글자들은 그 이미지와 겹치지 않게 잘 어울리게 배치되게 하는 것

 

<div class="container">

        <h1 class="display-1 text-center">Floats</h1>

        <br>

        <div>

            <p class="float-left">Float left</p>

        </div>

        <br><br>

        <div>

            <p class="float-right">Float right</p>

        </div>

        <br><br>

        <div>

            <p class="float-none">Don't float</p>

        </div>

</div>

 

 * text-right , left, center 들은 p 태그가 블록 디스플레이를 그대로 유지한다는 것

 * float-right left는 블록 디스플레이 인데도 사이즈가 줄어들어 다른 엘리먼트와 어울리게 그러나 겹치지 않게 해줌

 

- vertical alignment

-> 본문 내에 다른 크기의 글자 폰트 들에 있어서 작은 사이즈의 글자 들의 수직 위치를 맞출 때 사용

<div class="container">

        <h1 class="display-1 text-center">Vertical Alignments</h1>

        <br>

        <p class="h1">Lorem, ipsum dolor. <span class="align-baseline">baseline</span></p>

        <p class="h1" style="line-height:100px;">Lorem, ipsum dolor. <span class="align-top">top</span></p> <!--span 태그의 윗부분과 부모 엘리먼트인 p 태그의 윗부분 또는 자식 엘리먼트가 있다면 자식 엘리먼트의 폰트 위부분들을 전체 라인으로 일치 시킨 결과-->

        <p class="h1">Lorem, ipsum dolor. <span class="align-middle">middle</span></p> 

        <p class="h1">Lorem, ipsum dolor. <span class="align-bottom">bottom</span></p> 

        <p class="h1" style="line-height:100px;">Lorem, ipsum dolor. <span class="align-text-top">text-top</span></p> <!--해당 엘리먼트의 위쪽을 부모 엘리먼트의 폰트의 위부분에 일치-->

        <p class="h1">Lorem, ipsum dolor. <span class="align-text-bottom">text-bottom</span></p> 

    </div>