Css:) float

 우리는 css의 속성 display와 position에 대해서 이전시간에 알아보았다. 이제 엘리먼트들을 한쪽에 방향으로 (위치)배치시키는 역할을하는 float에 대해서 설명하도록 하겠다.

  - float
 우리는 display를 배우면서 엘리먼트들의 속성 값 들의 특징(어떻게 위치하는지)들에 대해 알게되었고 또한 position을 통해서 엘리먼트들을 원하는 곳에 위치시켰다.

 그렇다면, 이번엔 엘리먼트들을 "한쪽으로 나열해서 보기좋게 정렬 방법이 없을까?"라는 생각이 들었다면, 우리가 배운 position, display방식으로 충분히 가능하다.

 다음의 예제들을 살펴보자

 [ 예제 1 - position속성 값으로 정렬시키기 ]

 [Markup]

1. <div class="wrap">
2.     <div>div-1</div>
3.     <div>div-2</div>
4.     <div>div-3</div>
5.     <div>div-4</div>
6.     <div>div-5</div>
7. </div>

 [Css]

1. .wrap{
2.     font-size:2rem;
3.     position:relative;
4.     margin:0 auto;
5.     border:5px solid goldenrod;
6.     width:500px;
7.     height:100px;
8. }
9. .wrap > div{
10.     position:absolute;
11.     width:20%;
12.     height:100%;
13. }
14. .wrap > div:nth-child(1){
15.     background-color:red;
16. }
17. .wrap > div:nth-child(2){
18.     background-color:blue;
19.     left:20%;
20. }
21. .wrap > div:nth-child(3){
22.     background-color:green;
23.     left:40%;
24. }
25. .wrap > div:nth-child(4){
26.     background-color:gray;
27.     left:60%;
28. }
29. .wrap> div:nth-child(5){
30.     background-color:magenta;
31.     left:80%;
32. }

 [ 실행결과 ]


[ 예제 2 - display속성 값으로 정렬시키기 1]

[Markup]

1. <div class="wrap">
2.     <div>div-1</div><div>div-2</div>
3.     <div>div-3</div><div>div-4</div>
4.     <div>div-5</div>
5. </div>

[Css]

1. .wrap{
2.     font-size:2rem;
3.     position:relative;
4.     margin:0 auto;
5.     border:5px solid goldenrod;
6.     width:500px;
7.     height:100px;
8. }
9. .wrap > div{
10.     display:inline-block;
11.     width:20%;
12.     height:100%;
13. }
14. .wrap > div:nth-child(1){
15.     background-color:red;
16. }
17. .wrap > div:nth-child(2){
18.     background-color:blue;
19. }
20. .wrap > div:nth-child(3){
21.     background-color:green;
22. }
23. .wrap > div:nth-child(4){
24.     background-color:gray;
25. }
26. .wrap> div:nth-child(5){
27.     background-color:magenta;
28. }

 [ 실행결과 ]

: display:inline-block 특성은 Markup에서 엘리먼트들을 줄바꿈 / 띄어쓰기에도 영향을 받으므로 markup의 글자들을 한줄로 사용한다면 원하는 결과를 출력 할 수 있다.

[ 예제 2 - display속성 값으로 정렬시키기 2]

[Markup] / [Css는 위와 동일]

1. <div class="wrap">
2.     <div>div-1</div><div>div-2</div><div>div-3</div><div>div-4</div><div>div-5</div>
3. </div>

[실행결과]

: 우리가 원하는 wrap안에 div엘리먼트들이 왼쪽부터 차곡차곡 정리 되어있다. 하지만 디자인을 결정하는 Css뿐만아니라 Markup에서의 엘리먼트들의 간격또한 신경을 써야하므로 다소 불편하다.

 위의 예제들을 살펴보았는데, position의 경우 absolute로 엘리먼트들을 하나하나 위치를 계산 해야하는 번거로움이 있으며, display:inline-block의 특성상 markup에서 하나하나씩 붙여서 사용해야하는 번거로움이 있는데, 이러한 것에 신경쓰지 않고 한 쪽 방향으로 배치해 나아가는 즉, 우리는 시간을 더 절약할 수 있는, 더 편리한 방법을 찾을 방법이 필요로 하다.
 그것의 해결책인 바로 float이라는 녀석에 대하여 소개하겠다.

 float은 엘리먼트들의 위치를 한쪽방향으로 치우치도록 만들어 주고자 할때 사용이 되며, 주로 레이아웃들을 깔끔하게 맞춰서 정리하고자 할 때 사용이 된다.

 Css에서 중요하게 여기는 부분중 하나라고 생각한다. float의 사용으로 왼쪽, 오른쪽으로 사용자가 원하는방향으로 엘리먼트들이 알아서 배치해 나아간다는것은 매우 효율적이고 강력한 방법인것이 아닌가?

 float의 속성 값으로는 2개가 있다. 바로 left(왼쪽방향)와 right(오른쪽방향)의 방향이 있다. 말 그대로 float:left는 왼쪽방향으로 하나씩 엘리먼트들을 넣어주고 반대로 float:right는 엘리먼트들을 하나씩 오른쪽방향으로 차곡차곡 쌓아간다는 의미이다.

[실행결과]  [ float의 사용법 ]
 - float:left   = "엘리먼트들을 왼쪽부터 채워 넣어라"
 - float:right = "엘리먼트들을 오른쪽부터 채워 넣어라"

다음의 float의 사용을 살펴보자

[ 예제 - float의 사용 1 ]