○ float : 블록 레벨 요소의 배치 방향
우리가 많이 사용하는 태그 요소 중에서 <p>를 떠올려 보겠습니다. <p> 요소를 이용해 텍스트를 작성했는데, 이 문단 자체의 좌측 또는 우측에 이미지를 붙여서 표시해야 하는 경우가 있을 것입니다. 그런데, 우리가 배웠다시피 <p> 태그는 블록 레벨의 요소이기 때문에, 원칙적으로 바로 다음 줄에 이미지가 표시될 것입니다.
float 속성은 이런 경우에 사용하게 됩니다. float 속성을 활용하면 텍스트나 이미지의 주변에 요소들이 둘러싸는 형태로 배치가 가능해집니다.
float 속성은 단어의 뜻 그대로, 어떠한 HTML요소를 '왼쪽 구석' 또는 '오른쪽 구석'에 (강제로) 띄워놓는다는 의미로 사용됩니다. 워드 프로세서에서 간혹 텍스트와 이미지 배치를 결정하는 것을 본 적이 있으실 것입니다. 그러한 기능과 비슷하다고 생각하면 좋습니다.
선택자 {
float: left | right | none;
}
만일 어떠한 요소의 float 속성 값을 left로 지정하면 해당 요소를 문서의 왼쪽에 배치하게 되고, right로 지정하게 되면 문서의 오른쪽에 배치하게 됩니다. none은 기본 값이며 좌우 어디에도 배치되지 않습니다.
아래와 같이 이미지 하나를 배치하고, 바로 <p> 태그를 이용해 텍스트를 배치해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
float: left;
margin-right: 50px;
}
</style>
</head>
<body>
<img src="/images/jira.webp">
<p>test text here.test text here.</p>
</body>
</html>
float 속성을 사용하다 보면, 다음 요소에도 플로팅 속성이 전달됩니다. 그래서 특정 요소에서 프로팅을 명시적으로 해제하고 싶다면, clear라는 속성에 left | right | both를 지정하게 됩니다.
아래의 예제를 통해서 하나씩 살펴보겠습니다. 우선, 네 개의 div 박스를 만들고 색상만을 지정해 배치해 보겠습니다. 블록 레벨의 요소들이니 당연히 한 줄씩을 차지하겠죠.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
padding: 20px;
margin: 10px;
}
#box1 {
background: yellow;
}
#box2 {
background: blueviolet;
}
#box3 {
background: greenyellow;
}
#box4 {
background: red;
}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
</body>
</html>
이 상태에서, box1의 float 속성 값으로 left를 부여해 보겠습니다.
#box1 {
background: yellow;
float: left;
}
box1 요소가 left로 플로팅이 되면서 최소한의 영역만을 차지하고, 남은 공간에 box2가 이어서 배치되었습니다. 그런데 박스1의 배치가 다소 독특합니다. 아래의 표시된 영역은 박스1의 margin 영역입니다. 10px씩 할당되어 있습니다.
그럼 여기서 박스2에도 float를 left로 부여해 보겠습니다. 표시된 영역은 역시 박스2의 margin입니다. 10px씩 할당됩니다.
그럼 현재 박스 3과 박스 4의 관계는 어떨까요? 박스 3과 4는 margin이 10px로 설정되어 있기 때문에 그 거리만큼 떨어져 있습니다. 단, 여기에서 박스1과 박스2는 고려되지 않았습니다. 한 가지 관념적으로 이해해야 할 것은, 박스1 / 박스2 / 박스 3,4의 관계입니다.
박스1과 박스2는 사실 플로팅 - 즉, "둥둥 떠있는 상태"가 됩니다. 그래서 사실상 박스3는 박스1과 2를 신경쓰지 않고 그냥 자리를 차지하는 상태인 것입니다. 박스3과 박스4는 "떠 있는 요소들을 없는 셈 치는" 것처럼 동작하는 것입니다. 그래서 박스3과 박스4는 박스1, 2와 무관하게 자신들의 기본적인 마진 값 규칙을 지키고만 있습니다.
자, 그럼 다시 한번 개념을 짚어보겠습니다. 박스3나, 박스4가 clear라는 속성 값을 갖는다는 것은 무엇을 의미할까요? 쉽게 말해서, float 속성을 먹은 요소는 우리는 "없는 사람 취급"한다고 했습니다. 그런데 박스3나 박스4에게 clear 속성을 부여하게 되면 'float 속성으로 인해 둥둥 떠다니는 놈들을 똑같이 대해줘라'라는 의미가 됩니다.
자, 현재 상태에서 박스3에 clear: left 속성 값을 부여해 보겠습니다. 그럼 어떤 일이 벌어질까요?
박스3가 float의 left 속성 값을 무시하지 않기로 했습니다. 그래서 자리를 내주고 블록 레벨 요소로서 똑같이 동작하게 되었기 때문에 한 줄 내려와 자리를 잡게 되었습니다.
그럼 박스3의 clear 요소를 지우고 박스4에 clear: left 속성을 부여하면 어떻게 될까요?
원래 박스3와 박스4의 상하 배치에 있어서 10px(상하에서는 상쇄가 일어난다고 했습니다)의 거리를 두었습니다. 박스1, 2의 위치는 무시했고요. 그런데 박스4가 플로팅 되는 요소들을 무시하지 않게 되었습니다. 박스1과 2는 박스3보다 좀 더 하단에 위치하므로, 박스1과 박스2의 위치를 기준으로 10px이 떨어져 배치되는 것을 알 수 있습니다.
잘 이해가 가지 않는 부분도 많겠지만, 일단 이 요소들을 활용해 2단 / 3단 레이아웃을 실제로 만들어 보면서 진행해 보겠습니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 4. 레이아웃 설계(2) - float 3 : 3단 레이아웃 (0) | 2023.04.20 |
|---|---|
| [CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃 (0) | 2023.04.18 |
| [CSS] 4. 레이아웃 설계(1) - display (0) | 2023.04.14 |
| [CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 2 (0) | 2023.04.13 |
| [CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 1 (0) | 2023.04.12 |
