카테고리 없음

CSS HTML 요소 가로로 배치하기 (float , overflow,box-sizing & inline-block)

혜닝혜루 2022. 11. 28. 17:58
728x90
반응형

 

얘네는 div인데 특별하게 이름을 만들어 놓은애들임 

 

section - 아티클보다 조금더 큰 의미

article  - section보다 조금더 작은 의미

 

그럼?

 

section 안에 ~ article을 넣어서 사용해야지 라는 직관적인 의미를 둘 수있다.

  <section>
    <article>article </article>
    <article>article </article>
    <article>article </article>
  </section>

div 블럭요소니까 당연히 세로배치가 될것, 이걸 가로배치로  한다면?

 

1. float 와 overflow를 사용해 배치

2. display : inline -block을 배치

 

실습을 통해 알아보자

 

 

블럭의 요소는 세로 배치가 된다 밑의 그림처럼 말이죠?

첫번째

float : left 와 overflow: hidden

 section {
      border: 5px solid black;
      width: 600px;
      overflow: hidden;
    }
    section article{
      background-color: gold;
      width: 200px;
      height: 100px;
      float: left;
    }

블럭요소에 float :left 를 주면 가로로 배치가 가능하다.

단점 : 1px 이라도 틀리면 안된다 .. 세번째 아티클이 내려갈 것이다.

그래서 가로 너비와 픽셀을 맞춰야 한다.

두번째 : display : inline-block 배치 방법은 1px 은 그렇게 중요하지 않다.

 

 section {
     
     border: 5px solid black; 
    }
    section article{
     background-color: gold;
     width: 200px;
     height: 100px;
     border: 1px solid red;
     display: inline-block;
    
    }

display : inline - block 요소를 주면?

이렇게 가로배치가 잘된다.

 

✔근데 왜 display : inline 이 아니라  인라인 블록으로 하죠?

 

이유는 : inline으로 할경우 가로배치는 되나 높이 너비값이 설정이 되지 않는다

그게 인라인 요소의 특징이기 때문이다.. 그래서 가로배치 + 높이너비 값을 주려면 인라인+블록 요소를 해야한다.

 

✔ 저 노란 박스를 가운데로 주려면?

  section {
     
     border: 5px solid black; 
     text-align: center;
    }

부모값인 section에게 text-align : center 을  해주면 가운데로 가게 된다.

 

✔자식값(article) 에게 margin : auto는 왜 안되나요?

 

이유는 block 요소만 margin : auto 값을 받기 때문이다. 해당값은 인라인-블록으로 했기 때문에 적용이 되지 않는다.

 

 

요약

 

 

1 . float 를 사용해서 가로배치하는 경우 1px 이라도 여유공간이 없게 설정하고 싶을경우 사용하기

2.  여유공간이 있어도 된다 싶을때는  display - inline-block을 쓰자.

728x90