최근에는 flexbie box layout 이라는 grid layout을 이용하여 간편한 위치 조정이 가능하지만,
브라우저별 지원의 한계가 있기 때문에 아직 float 속성을 이용한 레이아웃을 더 많이 사용하고 있다.
1.float
요소를 문서 위에 떠있게 만든다. (부유하다)
특징
- 'block'을 무시함.
- 형제 구조로 이루어져있음.
- 해당 요소들의 높이 값이 맞아야만 미디어쿼리 적용 시 제대로 동작함.
속성값
1) (부모 요소의)왼쪽으로 배치
float: left2) (부모 요소의)오른쪽으로 배치
float: right3) 좌우 어느쪽으로도 배치 X
float: none4) 부모의 float 값을 상속받음
float: inheritfloat 예시
<style>
.image{
float: left;
width: 100px;
height: 100px;
}
</style>
<body>
<div>
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" alt="float">
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum quo necessitatibus placeat quae quos provident quaerat accusantium optio unde. Incidunt eligendi delectus doloremque ullam autem sunt asperiores dolor, hic perferendis!</p>
</d_텍스트_iv>
2. clear : float 해제하기
- float와 짝꿍
- float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되기 때문에 float 속성을 더 이상 사용하지 않고 싶을 때 clear: both를 사용한다.
1) 속성값
(1) clear: both / 오,왼 모두 취소
clear: both(2) clear: left / 왼쪽을 취소
clear: left(3) clear: right / 오른쪽을 취소
clear: right(4) clear: none / clear 속성을 적용시키지 않음
clear: none예시
<style>
.image{
float: right;
width: 100px;
height: 100px;
}
.image2 {
clear: both;
}
</style>
<body>
<div>
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" alt="float">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" alt="float">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" alt="float">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" alt="float">
<img class="image2" width="100" height="100" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg" alt="float">float를 해제당한 5번째 고양이
etc
- float를 해제하는 다른 방법
overflow: hiddenㄴ 영역을 벗어난 부분을 갑춰주는 의미이기도 하지만, floate된 요소의 부모 영역의 높이가 없어짐
- 같은 요소에서 margin: 0 auto 와 float는 동시에 적용이 안 된다.
ㄴ 1)태그로 부모를 감싼 후에 margin 0 auto를 주거나
ㄴ 2) float: left, margin-left로 너비를 잡아줘야 함
Developer로의 여정