min's devlog

[CSS] Float(세로상자에서 가로상자로) 본문

til/Front

[CSS] Float(세로상자에서 가로상자로)

값진 2022. 5. 30. 14:03

Float(플로트)

  - float 속성은 웹페이지의 레이아웃을 작성할 때 사용하는 태그

  - float를 직역하면 '띄우다' 라는 뜻으로, 해당 HTML요소를 주변 요소들과 자연스럽게 어우러지도록 띄울 때 사용한다.

 

 

상자 생성

같은 역할을 하는 태그가 2개 이상이어서 편하게 이용하기 위해 <div id='list'>로 묶어준 코드

    <style>
        .box {
            width: 50px;
            height: 50px;
        }

        #box1 {
            background-color: red;
        }

        #box2 {
            background-color: orange;
        }
        
        #box3 {
            background-color: yellow;
        }

        #box4 {
            background-color: green;
        }

        #box5 {
            background-color: blue;
        }

    </style>
<body>
    <div id='list'>
        <div id="box1" class="box">A</div>
        <div id="box2" class="box">B</div>
        <div id="box3" class="box">C</div>
        <div id="box4" class="box">D</div>
        <div id="box5" class="box">E</div>
    </div>
</body>

 

세로상자 생성

 

가로 상자로 바꾸기

  • 인라인으로 바꾸기

       - 인라인은 너비와 높이를 지정할 수 없어 가로로 쪼그라드는 것 처럼 보임

       - (display : inline-block;) 을 사용하면 너비와 높이 지정이 가능하지만, 공백이 남아있다. 이때는 fontsize(글자크기)를

          0으로 두면 공백이 없는 가로상자가 된다.

 

   

  • float사용 (clear)

       - .box { } 안에 float: left; 를 추가한다.

       - 상자가 하나씩 쌓이는 원리로, 파란색 상자가 마지막으로 쌓이고 뒤에 다른 내용들이 나머지 공간을 채워준다.

         이 때 상자 주위로 다른 내용들이 오지 않게 하려면? clear 속성을 사용한다. clear는 취소한다는 뜻으로 다른 내용들이

         주변을 덮는 것(float)을 취소한다. clear 속성 사용으로 상자 이후의 내용이 말려올라가지 않고 상자만 한 줄로 나온다.

        #list::after {
            content: '';
            display: block;
            clear: both;
        }
  

        #list {
            width: 700px;
        }
        /*브라우저 크기를 작게 조절하면 부모보다 크기가 커져서 상자가 줄바꿈된다.
        상자를 고정시키는 코드*/

 

 

* 정리

  - float : HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정

  - clear : float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정

'til > Front' 카테고리의 다른 글

[Html/CSS] 클론코딩  (0) 2022.05.31
[CSS] 선택자(selector)  (0) 2022.05.31
[CSS] 포지션(position)  (0) 2022.05.30
[CSS] reset, normalize  (0) 2022.05.30
[CSS] Block,Inline  (0) 2022.05.27
'til/Front' Related Articles more
Comments