float - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • float
    learn
    learn
    13 위치 정렬
    float

    float는 뜨다, 띄우다는 뜻을 가지고 있으며, float 프로퍼티는 말 그대로 요소를 어떻게 띄울지 결정합니다. 좀 더 자세히 설명하면 float 프로퍼티는 요소를 디자인 흐름에서 벗어나게 한 뒤, 사용자가 지정한 방향에 배치하도록 하는 프로퍼티입니다.

    그런데 왜 요소를 띄울까요? 문서 작성 프로그램에서 위와 같이 사진과 본문 사이의 배치를 조정하여 사진과 글이 함께 보여지도록 문서를 작성한 경험이 있을겁니다. 웹에서도 이와 동일하게 배치할 수 있습니다. 바로 float로 말이죠. 아래의 코드를 한 번 실행시켜 봅시다. 이미지가 먼저 출력되고 그 다음 줄에 .text가 출력됩니다.

    이제 이미지에 float:left를 추가하여 이미지를 왼쪽으로 띄워 봅니다. 확인했다면 오른쪽으로도 띄워 보세요.

    float를 써보니 왜 float인지 이해가 됐을 겁니다. borderfloat가 어떻게 동작하는지 잘 보기 위해 추가했다는 점 참고하시기 바랍니다.

    위 이미지를 보면 float가 없을 때와 다르게 이미지의 파란 선과 노란 선이 같은 점에서 시작하고, 이는 마치 이미지 주위를 .text가 감싸는 것처럼 보일 겁니다. 마치 떠 있는 것 같죠.

    float:right를 해도 이미지가 떠있는 듯 합니다. float의 목적을 생각하고 필요한 상황에서 적절히 사용하시길 바랍니다.

    learn
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)