CSS float 속성은 요소를 float하는 방법을 지정한다.
CSS clear 속성은 지워진 요소 옆과 어느 쪽에 뜰 수 있는 요소를 지정한다.
CSS float 속성
float 속성은 컨테이너에서 텍스트에 왼쪽으로 이미지를 띄우는 것과 같이 콘텐츠를 배치하고 포맷하는 데 사용된다.
float 속성은 다음 값 중 하나를 가질 수 있습니다:
- left - 요소가 컨테이너 왼쪽으로 이동한다
- right - 요소가 컨테이너 오른쪽으로 이동한다
- none - 요소가 플로팅되지 않는다(텍스트에서 발생한 위치에만 표시됨). 기본값이다
- inherit - 요소는 부모의 부동 값을 상속합니다
가장 간단하게 사용할 수 있는 것은 플로팅 속성을 사용하여 텍스트를 이미지 주위에 둘러쌀 수 있습니다.
CSS float:right 예제
다음 예제에서는 텍스트에서 이미지를 오른쪽으로 이동하도록 지정한다:
| <!DOCTYPE html> <html> <head> <style> img { float: right; } </style> </head> <body> <h2>Float Right</h2> <p>이 예에서 이미지는 단락에서 오른쪽으로 이동하고 단락의 텍스트는 이미지를 감쌀 것입니다.</p> <p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;"> 처음 유럽에 소개된 것은 크리스토퍼 콜럼버스가 스페인으로 가져 왔을 때이다.(1493년) 당시 스페인 왕실과 귀족들이 이를 나눠 먹어보고 너무나 달고 맛있다며 유럽에서 재배를 시도했으나 유럽의 기후에서는 파인애플이 자라지 않았기에 실패. 대서양을 건너 배로 수송하는 수 밖에 없었으며, 당연히 엄청난 고가품이었다. 남미에서 유럽까지 운송하기 위해서는 더운 적도를 지나야 했고, 시간도 아주 오래 걸렸기 때문에 배에 파인애플을 한가득 싣고 항해해도 유럽에 도착할 때쯤이면 다 썩어버리고 한두 개 정도만 멀쩡했다고 한다. 즉, 파인애플 한 개를 위해 배 한 척을 띄워 남미까지 갔다 와야하는 상황이었던 것. 게다가 풍랑을 만나 침몰하거나, 해적에 약탈당하거나 운이 없어 조난당하는 배들도 많던 시절이기 때문에 파인애플의 가격은 실로 상상을 초월했다. 때문에 이 당시 파인애플은 왕족이나 귀족들조차도 엄청난 가격 때문에 함부로 먹을 엄두를 내지 못하는 진귀한 과일이었다. 어쩌다가 파인애플을 하나 구하면 먹는 것이 아니라 파티가 열리는 홀 중앙에 놓아둬서 재력을 과시하는 장식품으로 사용했으며, 그렇게 장식용으로 계속 쓰다가 썩기 시작해야 겨우 먹을 수 있었다고 한다..</p> </body> |
img 요소에 float:right를 설정하면 이미지는 오른쪽에 위치하게 되고 글자는 왼쪽에 배치하게 되며 위의 코드를 실행한 결과는 아래 그림과 같다.
CSS float:left 예제
다음 예제에서는 텍스트에서 이미지를 왼쪽으로 띄우도록 지정한다:
| <!DOCTYPE html> <html> <head> <style> img { float: left; } </style> </head> <body> <h2>Float Left</h2> <p>이 예에서 이미지는 단락에서 오른쪽으로 이동하고 단락의 텍스트는 이미지를 감쌀 것입니다.</p> <p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;"> 처음 유럽에 소개된 것은 크리스토퍼 콜럼버스가 스페인으로 가져 왔을 때이다.(1493년) 당시 스페인 왕실과 귀족들이 이를 나눠 먹어보고 너무나 달고 맛있다며 유럽에서 재배를 시도했으나 유럽의 기후에서는 파인애플이 자라지 않았기에 실패. 대서양을 건너 배로 수송하는 수 밖에 없었으며, 당연히 엄청난 고가품이었다. 남미에서 유럽까지 운송하기 위해서는 더운 적도를 지나야 했고, 시간도 아주 오래 걸렸기 때문에 배에 파인애플을 한가득 싣고 항해해도 유럽에 도착할 때쯤이면 다 썩어버리고 한두 개 정도만 멀쩡했다고 한다. 즉, 파인애플 한 개를 위해 배 한 척을 띄워 남미까지 갔다 와야하는 상황이었던 것. 게다가 풍랑을 만나 침몰하거나, 해적에 약탈당하거나 운이 없어 조난당하는 배들도 많던 시절이기 때문에 파인애플의 가격은 실로 상상을 초월했다. 때문에 이 당시 파인애플은 왕족이나 귀족들조차도 엄청난 가격 때문에 함부로 먹을 엄두를 내지 못하는 진귀한 과일이었다. 어쩌다가 파인애플을 하나 구하면 먹는 것이 아니라 파티가 열리는 홀 중앙에 놓아둬서 재력을 과시하는 장식품으로 사용했으며, 그렇게 장식용으로 계속 쓰다가 썩기 시작해야 겨우 먹을 수 있었다고 한다..</p> </body> </html> |
img 요소에 float:left를 설정하면 이미지는 왼쪽에 위치하게 되고 글자는 오른쪽에 배치하게 되며 위의 코드를 실행한 결과는 아래 그림과 같다.
CSS float:none 예제
다음 예제에서 이미지는 텍스트에서 발생하는 바로 그 위치에 표시됩니다(float: none;):
| <!DOCTYPE html> <html> <head> <style> img { float: none; } </style> </head> <body> <h2>Float None</h2> <p>이 예에서 이미지는 단락에서 오른쪽으로 이동하고 단락의 텍스트는 이미지를 감쌀 것입니다.</p> <p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;"> 처음 유럽에 소개된 것은 크리스토퍼 콜럼버스가 스페인으로 가져 왔을 때이다.(1493년) 당시 스페인 왕실과 귀족들이 이를 나눠 먹어보고 너무나 달고 맛있다며 유럽에서 재배를 시도했으나 유럽의 기후에서는 파인애플이 자라지 않았기에 실패. 대서양을 건너 배로 수송하는 수 밖에 없었으며, 당연히 엄청난 고가품이었다. 남미에서 유럽까지 운송하기 위해서는 더운 적도를 지나야 했고, 시간도 아주 오래 걸렸기 때문에 배에 파인애플을 한가득 싣고 항해해도 유럽에 도착할 때쯤이면 다 썩어버리고 한두 개 정도만 멀쩡했다고 한다. 즉, 파인애플 한 개를 위해 배 한 척을 띄워 남미까지 갔다 와야하는 상황이었던 것. 게다가 풍랑을 만나 침몰하거나, 해적에 약탈당하거나 운이 없어 조난당하는 배들도 많던 시절이기 때문에 파인애플의 가격은 실로 상상을 초월했다. 때문에 이 당시 파인애플은 왕족이나 귀족들조차도 엄청난 가격 때문에 함부로 먹을 엄두를 내지 못하는 진귀한 과일이었다. 어쩌다가 파인애플을 하나 구하면 먹는 것이 아니라 파티가 열리는 홀 중앙에 놓아둬서 재력을 과시하는 장식품으로 사용했으며, 그렇게 장식용으로 계속 쓰다가 썩기 시작해야 겨우 먹을 수 있었다고 한다..</p> </body> </html> |
img 요소에 float:none를 설정하면 이미지 다음에 텍스트는 바로 옆에 위치하게 되며 위의 코드를 실행한 결과는 아래 그림과 같다.
CSS float 속성 양 옆에 위치
일반적으로 div 요소는 서로 위에 표시된다. 그러나 float: left를 사용하면 요소를 옆에 띄울 수 있다:
| <!DOCTYPE html> <html> <head> <style> div { float: left; padding: 15px; } .div1 { background: red; } .div2 { background: yellow; } .div3 { background: green; } </style> </head> <body> <h2>Float Next To Each Other</h2> <p>이 예에서는 3개의 디브가 서로 옆에 떠 있을 것입니다.</p> <div class="div1">Div 1</div> <div class="div2">Div 2</div> <div class="div3">Div 3</div> </body> </html> |
위의 코드에서 float:left가 없으면 결과가 아래 그림과 같다.
그런데 위의 코드에 div 요소에 float:left를 두면 div요소가 왼쪽 옆에 위치하며 아래 그림과 같다.
이상으로 float를 통해 요소들을 배치하는 것에 대해서 알아보았다.
글자와 그림을 float에 left, right, none 등의 속성값을 실습하며 그림이 어떻게 배치되는지 알게 되었으며
div 요소를 옆으로 배치하는데 float을 활용하는 실습을 해보았다.
무엇이든 꼭 손으로, 눈으로, 머리로 실습하기를 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS float 예제 (0) | 2023.08.25 |
|---|---|
| CSS clear, clearfix 속성 (0) | 2023.08.24 |
| CSS overflow 속성 (0) | 2023.08.22 |
| CSS z-index 속성 (0) | 2023.08.21 |
| CSS position 속성 (0) | 2023.08.20 |
댓글