플로팅은 CSS의 핵심 개념 중 하나입니다. 이 원리를 이해하지 못하면 CSS를 기반으로 웹사이트를 만들 수 없습니다. 플로팅은 흐르는 것으로 번역할 수 있으며, 이는 문제의 핵심에 도달합니다. 궁극적으로 플로팅은 요소가 다른 요소의 왼쪽이나 오른쪽에 배치되는 것을 의미합니다. (일반적으로 요소는 다른 요소 아래에 있습니다).
첫 번째 예시를 통해 이 측면을 명확히 이해할 수 있습니다.
<p><img src="bild.jpg" /> 이 세트에는 전단지, 배경 등에 사용할 수 있는 12개의 사용자 정의 도형이 포함되어 있습니다. 모양은 18, 21 및 24 줄무늬와 다양한 빔 폭으로 나뉩니다. 이러한 사전 설정은 레이아웃과 이미지에서 아름다운 효과를 내기 위한 좋은 기초입니다.</p>
여기에 단락이 정의되어 있습니다. 이 단락 안에는 이미지와 일반 텍스트가 있습니다.
결과를 보면 이미지가 텍스트 흐름에 있음을 알 수 있습니다.
이제 float 속성이 작동합니다.
img { float: left;}
다시 결과를 살펴보세요.
여기서는 이미지가 플로팅되었습니다. 텍스트가 이미지 주위로 흐릅니다.
float 속성에 왼쪽과 오른쪽 값을 할당하여 요소를 왼쪽(float: 왼쪽) 또는 오른쪽(float: 오른쪽)으로 "플로팅"하게 만들 수 있습니다.
이미지에 float: 오른쪽을 적용할 수도 있습니다.
이 경우 세 가지 일이 발생합니다:
- 그래픽이 일반 흐름에서 제거됩니다.
- 그래픽이 P 요소의 상단으로 이동합니다.
- 가능한 한 오른쪽으로 멀리 표시됩니다.
지금까지의 결과를 보면 이것이 아직 그다지 예쁘게 보이지 않는다는 것을 알 수 있습니다. 실제로 이미지와 주변 텍스트 사이의 간격이 누락되어 있습니다. 다음과 같이 구문을 조정합니다:
img { float: 왼쪽; margin-right: 20px; }
이미지에 20픽셀의 오른쪽 여백이 할당되었습니다. 그 결과 다음과 같은 보기가 생성됩니다:
여기에서 여백 간격을 약간 실험해 보세요.
플로팅 중지
이미지 예제로 돌아갑니다. 텍스트 단락을 추가하여 구문을 확장합니다.
<p>이 세트에는 전단지, 배경 등에 사용할 수 있는 12개의 사용자 정의 도형이 포함되어 있습니다. 도형은 18개, 21개, 24개의 줄무늬와 다양한 빔 폭으로 나뉩니다. 이러한 사전 설정은 레이아웃과 이미지에서 아름다운 효과를 위한 좋은 기초가 됩니다.</p> <p>이 세트에는 전단지, 배경 등에 사용할 수 있는 12개의 사용자 정의 모양이 포함되어 있습니다. 도형은 18개, 21개, 24개의 줄무늬와 다양한 빔 폭으로 나뉩니다. 이러한 사전 설정은 레이아웃과 이미지에서 아름다운 효과를 내기 위한 좋은 기초가 됩니다.
결과는 다음과 같습니다:
사실, 그래픽 주위에 흐르는 것은 첫 번째 단락만이 아닙니다. 두 번째 텍스트 단락에도 동일하게 적용됩니다. 이는 단순히 그래픽이 첫 번째 단락을 넘어 아래쪽으로 확장되기 때문입니다. 이해를 돕기 위해 그래픽이 포함된 단락에 배경색을 지정해 보겠습니다.
결과를 보면 그래픽이 실제로 단락을 넘어 아래쪽으로 확장되는 것을 볼 수 있습니다. 물론 이런 형태가 항상 바람직한 것은 아닙니다. 여기서 클리어 속성이 흥미로워집니다. 플로팅을 중지하는 데 사용할 수 있기 때문입니다. clear는 후속 요소가 실제로 플로팅된 요소의 옆이 아니라 그 아래에서 시작하도록 합니다. clear 속성의 값은 다음과 같습니다:
- 왼쪽 - 끝 플로트: 왼쪽
- right - 끝부분 float: 오른쪽
- both - 둘 다 끝 float: 오른쪽 및 float: 왼쪽
다음 예제에서는 두 번째 단락에 clear: left를 할당하여 float를 끝냅니다.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> img { float: left; margin-right: 20px; } </style> </head> <body> <p style="background-color:#CCFF66;"><img src="image.jpg" />이 세트에는 전단지, 배경 등에 사용할 수 있는 12개의 사용자 정의 도형이 포함되어 있습니다. 도형은 18개, 21개, 24개의 스트라이프와 다양한 빔 폭으로 나뉩니다. 이러한 사전 설정은 레이아웃과 이미지에서 아름다운 효과를 만들기 위한 좋은 기초가 됩니다.</p> <p style="clear:left;">이 세트에는 전단지, 배경 등에 사용할 수 있는 12가지 사용자 지정 모양이 포함되어 있습니다. 도형은 18개, 21개, 24개의 스트라이프와 다양한 빔 폭으로 나뉩니다. 이러한 사전 설정은 레이아웃과 이미지에서 아름다운 효과를 내기 위한 좋은 기초가 됩니다.</p> </body> </html>
표시된 구문을 사용하면 이제 두 번째 단락이 실제로 이미지 아래에 표시됩니다.
대부분의 경우 clear: left 또는 clear: right 대신 clear: both를 사용할 수 있습니다. 따라서 스타일시트에서 해당 클래스를 간단히 생성한 다음 필요에 따라 호출하는 것이 좋습니다.
.clearing { clear: both; }
이 클래스는 요소의 플로팅을 중지하고 싶을 때 언제든지 사용할 수 있습니다.
<p class="clearing">콘텐츠 ...</p>
플로팅이 좋은 이유
물론 플로팅은 이미지와 관련된 텍스트 흐름에만 필요한 것은 아닙니다. 사실 플로팅은 CSS 기반 웹사이트의 기본 개념을 형성합니다. 예를 들어 플로팅 덕분에 다중 열 레이아웃을 매우 쉽게 구현할 수 있습니다. 다음 예시를 살펴보세요:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> #navi { float:왼쪽; width:12em; background-color:#99FFFF; } #content { margin-left: 14em; background-color: #FF3333; } </style> </head> <body> <div id="navi"> <ul> <li>홈페이지</li> <li>연락처</li> <li>임프린트</li> </ul> </div> <div id="content"> 이 웹사이트의 콘텐츠입니다.
</div> </body> </ HTML>여기에 두 개의 열 레이아웃이 생성됩니다. 여기서 특별한 점은 열이 서로 나란히 있다는 것입니다.
그리고 이 병치는 플로팅 개념을 사용하여 실현됩니다. 플로팅 기반 웹사이트의 구조에 대한 자세한 정보는 이 시리즈의 나머지 부분에서 이어집니다.
