Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

float의 기본 개념 본문

css

float의 기본 개념

제뉴어리맨 2022. 6. 5. 16:33

float 속성이란

웹브라우저상의 기본 흐름에서 벗어나

요소를 왼쪽 혹은 오른쪽으로 띄워 주는 속성이다.

 

사용 예시를 살펴보자.

 

  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</title>

</head>
<body>
  <img src="images/tree.png">
   <p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
   <p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
   <p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>

위에 코드 결과는 어떻게 되겠는가

<img> 요소는 인라인레벨 이고

<p> 요소 블록레벨이다.

이미지를 그려내고 다음 내용을 출력하려고 보니

<p>태그는 블록 레벨이므로 한줄을 다 차지한다.

그러므로 아래와 같이 결과가 출력 될것이다.

 

 

  • 결과화면

그런데 이때 이미지 옆으로 텍스트 내용을 출력하고 싶다면?

그냥 블록레벨인 <p>태그를 사용하지 않고 텍스트를 입력하면 되지 않나 싶을것이다.

그럼 그렇게 해보도록하자

 

  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</title>

</head>
<body>
  <img src="images/tree.png">
   Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.
   Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.
   Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.
</body>
</html>

 

  • 결과화면

위와 같이 출력된다.

우리가 바라던 결과가 아니다.

왜냐하면 이미지를 출력하고 웹브라우저의 출력상 이미지의 우 하단에서부터 다음 내용을 출력하기 때문이다.

(정확하진 않지만 문서작성시 커서와 같은 개념인것 같다..)

그럼 이미지의 우 상단에서부터 텍스트가 쭉 출력되는 모습을 만들기 위해서 어떻게 해야할까?

 

이럴때 사용하는것이 float 속성이다.

위에 코드에서 <head>부분에 

  <style>
  img {
      float:left;  /* 왼쪽에 떠 있게 */
      margin-right:40px; /* 이미지와 텍스트간의 여백을 위해 */
    }
  </style>
 
만 추가해주면 된다.
 
  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</title>
  <style>
  img {
      float:left;  /* 왼쪽에 떠 있게 */
      margin-right:40px; /* 이미지와 텍스트간의 여백을 위해 */
    }
  </style>
</head>
<body>
  <img src="images/tree.png">
   Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.
   Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.
   Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.
</body>
</html>

 

  • 결과화면

원하던 결과의 모습이다.

하지만 텍스들이 단락 구분도 되어 있지 않으므로 보기에 좋지 않다.

그럼 최초의 코드처럼 각 텍스트들에 <p> 태그들을 추가하자.

 

  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</title>
  <style>
  img {
      float:left;  /* 왼쪽에 떠 있게 */
      margin-right:40px; /* 이미지와 텍스트간의 여백을 위해 */
    }
  </style>
</head>
<body>
  <img src="images/tree.png">
   <p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
   <p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
   <p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>

 

  • 결과 화면

 

이제 문서다운 문서가 된것같다.

 

  • 결론

float이 적용된 요소는 float이 적용되지 않은 일반 요소들보다 한꺼플 위에 띄워져 있다고 생각하면 될것이다. (마치 레이어 개념으로) 그래서 일반적인 요소들의 출력 흐름과는 별개로 left로 바짝 붙여 띄워놓고 그렇지 않은 일반 요소들은 일반적인 흐름으로 출력하되 float이 적용된 뽈록 띄워져 있는 요소를 피해 출력이 된다.

(float 요소는 일반적인 흐름에서 별개이므로 일반요소들은 최상단에서 그냥 출력)  

(요소의 컨텐츠들은 피해서 출력이 되지만, 백그라운드는 띄워져 있는 요소의 밑으로 정상적으로 그려진다.) 

그것의 반증으로 <p> 태그에 background-color 스타일을 적용한다면?

 

  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</title>
  <style>
  img {
      float:left;  /* 왼쪽에 떠 있게 */
      margin-right:40px; /* 이미지와 텍스트간의 여백을 위해 */
    }

    p{
      background-color: aqua;
    }
  </style>
</head>
<body>
  <img src="images/tree.png">
   <p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
   <p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
   <p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>

 

  • 결과화면

결과화면을 보면 알 수 있듯이 이미지는 위에 띄워진 상태이므로 백그라운드 컬러는 이미지에 밑으로 그대로 적용된다고 이해하면 되겠다.

 

 

해당 예제의 출처는

"한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석" 입니다.

'css' 카테고리의 다른 글

이미지 위에 텍스트 출력, 텍스트 위에 이미지 출력  (0) 2022.06.06
float 과 clear 의 개념  (0) 2022.06.05
[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)  (0) 2022.06.05
div 영역 안에 div를 가로로 나열하여 배치하고 가운데 정렬하기  (0) 2022.06.04
[CSS] display - block과 inline 그리고 inline-block  (0) 2022.06.04
'css' Related Articles more