목차
float 예제 - 요소 나란히 옆으로 배치 float 정의 float 구문 float 예제 - 왼쪽정렬 (= 좌측정렬) float 예제 - 오른쪽정렬 (= 우측정렬) float 예제 - 양쪽정렬 (= 하나는 왼쪽, 하나는 오른쪽) float 예제 - 적용 안 되는 경우 float 예제 - 텍스트와 이미지 나란히 float 예제 - 반응형 이미지 2개 나란히
float 예제 - 요소 나란히 옆으로 배치
[float:right 경우]
<style>
img {float: right;}
</style>
<p><img src="https://source.unsplash.com/random" alt="테스트" style="width:170px;height:170px;margin-left:15px;">
홈짱닷컴 Homzzang.com</p>
결과보기
[float:left 경우]
<style>
img {float: left;}
</style>
<p><img src="https://source.unsplash.com/random" alt="테스트" style="width:170px;height:170px;margin-left:15px;">
홈짱닷컴 Homzzang.com</p>
결과보기
[float:none 경우]
<style>
img {float: none;}
</style>
<p><img src="https://source.unsplash.com/random" alt="테스트" style="width:170px;height:170px;margin-left:15px;">
홈짱닷컴 Homzzang.com</p>
결과보기
float 정의
inline (인라인) 요소 경우엔 부모 요소의 text-align 속성 이용해 정렬
1.
기본값: none 적용대상: 모든 요소 (단, display:none 가진 요소엔 적용 X) 상속여부: X 애니효과: X CSS버전: CSS1 JS구문: object .style.cssFloat ="left"
2.
position 속성의 속성값이 absolute 일 경우 float 속성은 무시됨.
3.
한 줄 에 나란히 쓸 내용끼리는 모두 float 속성의 속성값을 left 또는 right 선언해줘야 함.
줄바꿈을 위해서는 clear 속성 이용하거나 clearfix핵 이용.
4.
float 속성은 크게 아래 3가지 경우에 주로 사용.
갤러리 게시판에서 이미지 옆으로 정렬.
네비게이션 메뉴 수평 정렬. (cf. display :inline 속성)
홈페이지 전체 골격 (=레이아웃} (cf. clear 속성)
<dt> 와 <dl> 요소를 옆으로 나란히 정렬.5. ★
float 속성을 이용할 땐, 반드시 body 태그에 margin 과 padding 의 속성값을 0 으로 줘야 크로스 브라우징 됨. ( 왜냐하면, 익스8과 그 이하 브라우저 경우엔 기본적으로 17px 정도의 margin과 padding 값이 주어지기 때문.)
body {margin: 0; padding: 0;} 6.
float 속성을 이용할 땐,
항상 DTD를 선언 하고 사용하는 게 좋음 .
(예) <!DOCTYPE html>
7.
float 속성은 해당 요소와 그 하위 요소의 속성을 display:inline-block 속성화 시킴. 따라서, 별도로 display:inline-block 붙일 필요 없음. 8. ★
float:right 속성 붙은 요소는 float:left 속성 붙은 요소하고만 나란히 정렬됨 . 설사, 다른 요소가 inline 또는 inline-block 속성의 요소일지라도 줄 바꿈 됨. 이 점은 아주 중요하니 반드시 명심할 것 !! 예제 보기 단, float:left 붙은 요소는 display:inline-block 요소와 나란히 정렬됨.
9.
float:left (또는, float:right) 붙은 <span> 요소와 안 붙은 <span> 요소는 아주 미세하게 높이 차이가 발생하니 반드시 모든 요소에 float 붙일 것 !! 예제 보기 10. ★
float:left 와 float:right 경우, 어느 게 먼저 정의되는가는 중요하지 않음. 나란히 위치시키고자 하는 것에 다 붙이면 됨. 단, 부모 요소 너비 좁을 경우 나중 위치한 요소가 밑으로 내려감. 결과보기 ,
결과보기 box-sizing 속성 참고
https://homzzang.com/b/css-225
11.
float 지정된 요소는 반드시 width 함께 지정해줘야 브라우저마다 동일하게 출력 .
12. MDN float 예제보기
float 구문
selector { float:none|left|right|inline-start|inline-end|initial|inherit ;}
[속성값]
none - 사용 X (기본값) left - 왼쪽에 띄움 right - 오른쪽에 띄움 inline-start - 포함 블락의 시작 부분에 띄움. (ltr 경우 왼쪽, rtl 경우 오른쪽)inline-end - 포함 블락의 끝 부분에 띄움. (ltr 경우 오른쪽, rtl 경우 왼쪽)initial - 이 속성의 기본값 사용. inherit - 부모요소의 속성값 상속.
속성값에 center 또는 middle 값은 없음. 블럭요소의 중앙정렬은 해당 요소에 margin:0 auto 이용.
float 예제 - 왼쪽정렬 (= 좌측정렬)
<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 { float:left; widh:100px ; padding-left:5px;} p.p2 { float:left; widh:100px ; padding-left:30px;}
</style>
<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
float 예제 - 오른쪽정렬 (= 우측정렬)
<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 {float:right; widh:100px; padding-right:5px;} p.p2 {float:right; widh:100px; padding-right:30px;}
</style>
<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
float 예제 - 양쪽정렬 (= 하나는 왼쪽, 하나는 오른쪽)
div {width:100%; height:50px; border:1px solid red;}
p.p1 { float:left; widh:100px ; padding-left:5px;} p.p2 { float:right; widh:100px ; padding-right:30px;}
</style>
<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
결과보기
float 예제 - 적용 안 되는 경우
아래처럼,
기준점의 float 속성값을 none으로 할 경우, 한 줄에 나란히 정렬 안 됨.
예제1 - 한 요소에만 float 속성 지정 경우, 나란히 정렬 X
<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 {padding-left:5px;}p.p2 { float:left; widh:100px ; padding-left:30px;}
</style>
<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
예제2 - 한 요소에 float:none 적용 시, 나란히 정렬 X
<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 { float:none; widh:100px ; padding-left:5px;} p.p2 { float:left; widh:100px ; padding-left:30px;}
</style>
<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
float 예제 - 텍스트와 이미지 나란히
이 경우, 이미지 태그가 텍스트보다 먼저 와야 하며,
글자와 이미지 사이의 간격은 margin 속성을 이용.
<style type="text/css">
div {widht:200px; height:300px; background:yellow;}
img { float:left ; margin-right:30px;}
</style>
<div>
<a href=http://www.homzzang.com target=blank><img src=" https://i.imgur.com/WfW5mBC.png" border=0> 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com)
</a>
</div>
결과보기
float 예제 - 반응형 이미지 2개 나란히
<style>
#Hz {
width:100%;
}
#Hz img {
float:left;
display:block;
max-width:49%;
width:49%;
height:auto;
}
#Hz img :last-child {
float:right;
display:block;
}
clear:both;
}
</style>
<div id="Hz">
<img src=" https://source.unsplash.com/random">
<img src=" https://source.unsplash.com/random"> <div class="clearfix"></div>
</div>
결과보기
