[ 코딩 ] css float으로 왼쪽 오른쪽 정렬하기

 

[ 코딩 ] css float 왼쪽 오른쪽 정렬하기

 

float 속성 알아보기

 

 

float은 태그를 왼쪽으로 또는 오른쪽으로 정렬해주는 기능을 가지고있다.

 

 

float: left; 왼쪽 정렬

float: right: 오른쪽 정렬

 

 

float은 이미지로 확인하는 게 이해하기가 쉽다.

 

 

 

아래는 float 왼쪽 정렬 전 후 이미지다.

 

 

 

float을 사용하기 전에는 수직으로 쭉 나열되어 있는 노란색 하늘색 보라색 박스들이

float:left;를 적용했더니 가로로 위치가 변한 걸 볼 수 있다. 

 

 

그럼 코드를 작성해서 확인해보자.

 

 

먼저 html 코드를 작성해 준다.

 

 

body 태그 안에 div 아이디(#)wrap으로 div class(.)box1, .box2, .box3을 묶어줬다. 

 

 

head 태그 안에 style 태그를 적어서 아이디(#)wrap과 클래스(.)box1, .box2, .box3을 간단하게 디자인했다.

 

 

#wrap은 너비 500px에 두께가 2픽셀인 검정색 테두리를 만들어줬고, 

 

 

클래스(.)box1, .box2, .box2는 너비 100픽셀을 주고 높이도 100픽셀을 줬다. 

.box1은 주황색을 배경색으로 넣어줬고, 

.box2는 하늘색을, .box3은 보라색을 배경색으로 넣어줬다. 

 

 

실행시키면 주황색부터 차례대로 왼쪽테두리에 붙어서 아래쪽으로 나열되는 걸 확인할 수 있다. 

 

 

이제 

 

 

float 속성을 적용해보자.

 

 

 

아이디선택자 wrap 안에 있는 모든 div(.box1, .box2, .box3)에 float: left; 속성을 주면, 

위 이미지와 같이 가로로 나란히 정렬된다.

 

 

 

 

 

 

float : right; 로 정렬을 해주면 ? 

 

 

 

사진을 반대로 돌린것처럼 정렬이 된다. 

 

 

실습을 통해서 익히면 기억에 오래남는다.

 

 

 

그런데 위 이미지를 보면 #wrap으로 지정한 width:500px; 안에는 잘 들어가 있는데, 

높이를 지정해주지 않았더니 자리를 제대로 못잡고 있는 걸 볼 수 있다. 

 

 

검정색 테두리 안에 박스가 제대로 들어가야 되는데

못들어가 있다는 건 자리가 제대로 못 잡혔다는 거다. 

 

 

저 상태로 두면 나중에 문제가 될 수 있다. 

 

 

그러면 높이를 주지 않아도 클래스선택자인 box1,box2,box3을

#wrap 안에 제대로 위치시키려면?

 

 

 

overflow: hidden; 을 적어주자.

 

 

 

float을 준 선택자의 상위 선택자에 (부모태그에) 

overflow: hidden; 을 주면 높이가 자동으로 박스크기에 맞게 잡히는 걸 볼 수 있다. 

 

 

 

비교 이미지 : 검정색 테두리에 집중하자. 

 

 

부모 태그에 (#wrap) overflow : hidden;을 적용했더니

.box1, .box2, .box3 클래스 선택자가 예쁘게 자리잡은 걸 볼 수 있다. 

 

 

보통 border는 위치가 잘 잡혔는지 확인하고 삭제해 준다. 

 

 

 

이제 여기다 여백을 넣어주고 크기에 알맞게 잘 배치해주면

아래 이미지처럼 만들 수 있다. 

 

 

 

 

위 이미지처럼 float를 이용해서 자리를 잡을 수 있다. 

margin을 이용해서 .box 사이사이에 여백을 주고, 

#wrap의 너비와 박스사이의 간격을 계산해서 원하는 위치에 자리를 잡아주자.

 

 

응용은 다음편에.

 

 

 

마지막으로 float 입력할 때 규칙을 알아보자.

 

 

우선 위에서 했던 예제처럼 자식에 float이 있는 경우 

부모에 자리잡을 수 있도록 overflow: hidden;을 줘야 한다. 

 

 

만약 height가 부모에 적용되어 있다면 overflow: hidden; 속성을 넣어주지 않아도 된다.

마찬가지로 부모에 position 속성이 적용되어 있다면 overflow: hidden; 속성을 넣지 않아도 된다. 

 

 

또 먼저 입력된 영역에 float이 적용되어 있으면 다음에 오는 영역에도 영향이 간다. 

영향이 없도록 하려면 float을 적용하려는 속성에 clear 속성을 적어주면 된다. (clear:both; 전체 고정 해제)

 

 

 

쉬운거 같으면서도 막상 적용하려면 헷갈리고 제대로 적용이 안되는게 float이다.

많이 사용하고 많이 실습을 해봐야지 그제서야 float이 뭔지 좀 알게 되는 것 같다. 

 

코딩은 역시 실습이 답인 것 같다.