css - 요소의 수평화 3가지 기법

CSS는 원리를 제대로 모르면 이게 왜 이렇게 되는지 헤매면서 많은 시간을 허비하게 되는것같다.

 

그래서 기초가 중요하고 항상 WHY? 라는 질문을 던져보아야 한다고 느낀다.

 

이번주제는 요소의 수평화이다. 먼저 예제를 보면서 이해하길 바란다.

 

html

<div class="container">  
    <div class ="item">A</div>  
    <div class ="item">B</div>  
    <div class ="item">C</div>  
</div>

css

.container{
    border: 2px solid red;
}
.container .item{
    width: 100px;
    height: 100px;
    border: 2px solid;
    border-radius : 10px;
}

 

결과.

A

B

C

 

div 태그의 default 값이 block이기에 특별히 다른요소로 지정해주지 않는이상

block으로 정의되어 있기에, 위에서부터 아래로 쌓인다.

 

HTML에서는 기본적으로 inline 요소와 block요소가 있고 서로 다른특성을 가진다.

 

.container{
    border: 2px solid red;
}
.container .item{
    width: 100px;
    height: 100px;
    border: 2px solid;
    border-radius : 10px;
    display:inline-block;
}

 

결과. 

A

B

C

 

block : 수직으로 쌓이며 가로값과 세로값을 가질수 있다.

inline : 수평으로 쌓이지만 가로값과 세로값을 가질수가 없다.

inline-block : 수평으로 쌓이면서 가로값과 세로값을 가질수 있다.

 

그런데 가만히 보면 완전히 붙어있지 않다. 인라인블럭의 경우 기본베이스가 인라인이기때문에

인라인 요소의 특성상

<div class ="item">A</div><div class ="item">B</div>  

 

와

<div class ="item">A</div>

<div class ="item">B</div>  

를 다르게 인식해 띄어쓰기가 있다고 인식한다.

 

요소사이에 공백이 생기기때문에 제대로 수평화가 되지않는다.

 

아래는 제대로 수평화를 시키는 3가지 기법들이다.

방법 1)

<div class="container">  
    <div class ="item">A</div>  
    <div class ="item">B</div>  
    <div class ="item">C</div>  
</div>

 

 

.container{
    border: 2px solid red;
    font-size: 0;
}
.container .item{
    width: 100px;
    height: 100px;
    border: 2px solid;
    border-radius : 10px;
    display:inline-block;
    font-size: 16px;
}

 

.container 의 font-size를 0으로 하여 공백을 제거한다. 

대신 글자도 안보이기에 요소안의 글자를 보이도록 font-size:16px 식으로 재정의

일종의 편법과도 같다.

 

 

결과. 

A

B

C

 

방법2)

 

.container{
  border: 2px solid red;
}
.container .item{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius : 10px;
  float:left;
}

block요소로 둔다음에 float : left 로 붙여버린다.

 

 

결과. 

A

B

C

 

 

 

 

 

하지만 이런 문제가 발생한다.

이유 -> float은 요소를 공중에 부유시키면서 container가 요소를 포함시키지 못하는 문제가 생긴다.

 

 

<div class="container clearfix">  
    <div class ="item">A</div>  
    <div class ="item">B</div>  
    <div class ="item">C</div>  
</div>

clearfix를 만들어 contatiner에 적용시킨다.

 

 

.clearfix::after{
   content:"";
   display:block;
   clear:both;
}

.container{
    border: 2px solid red;
}

.container .item{
    width: 100px;
    height: 100px;
    border: 2px solid;
    border-radius : 10px;
    float:left;
}

 

 

결과. 

A

B

C

 

1,2 방법들은 CSS에 flex가 존재하지 않기전에 사용되었을만한 방법들이다.

 

방법3) Flex 사용

 

.container{
  border: 2px solid red;
  display:flex;
}
.container .item{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius : 10px;
}

 

그냥 container에  display :flex; 만 추가하면 된다.

Flex는 요소의 크기가 불분명하거나 동적인 경우에도 , 각 요소를 정렬 할 수 있는 효율적인 방법을 제공한다

 

 

 

※ Flex 사용시 주의사항.

 

Flex는  items를 감싸는 부모요소인 Container와 함께 생각해야한다.

Container와 items에 적용하는 속성이 구분되어있다.

 

Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있고

items에는 order, flex, align-self 등의 속성을 사용할 수 있다.