CSS 정렬 (1) float 수평 정렬의 방법과 예제

CSS 요소 정렬에 대해 이야기 나눠보도록 할게요. 정렬 PART는 꽤 많은 비중으로 정리해 보겠습니다. 정렬은 여러 가지 방법이 있는데요 그중에서도 float 함수인 수평 정렬에 대해서 이야기 나눠보겠습니다.

서론

1. float 요소들
2. 요소 (1) none 기본 값의 요소 띄움 없음.
3. 요소 (2) left 왼쪽으로 띄우기
4. 요소 (3) right 오른쪽으로 띄우기
5. 요소 (4) claer 텍스트에 float으로 정렬된 값을 해제시킬 때 사용하는 명령어

div에 예제를 위한 기본 값 설정하기

 

   <div class="picture1"></div>

    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.<br/>

   

   <div class="text1"></div>

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    <hr/>

    <div class="picture2"></div>

    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.<br/>

   

<div class="text2"></div>

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

본론

1. float의 left와 right

flat의 사용법은 사실 간단합니다. 클래스를 불러와서 그 아래에 '이미지'가 어느 위치에 포함시킬 것인지 작성해주면 되는데요. 만약 클래스 안에 위치한 float을 배치하고 싶으시다면,. 클래스명 > img(float: left)와 같이 사용해 주면 됩니다.

   

    .picture1{

            float: left 혹은 right;

        }

 

 

l

eft으로 설정한다면 첫 번째의 사진과 같이 설정이되고, right으로 설정을 한다면 두 번째의 사진과 같이 설정이 됩니다.

left을 적용시켰을 때 이미지

 

right를 적용시켰을 때 이미지

2. clean

텍스트에 float 좌우 정렬이 되어있다면, 해제시킬때 clean을 사용한다. clean을 사용하여, left를 작성해 주게 된다면, 왼쪽 정렬을 해제합니다.

   

    .text1 {

            clear: left;

        }