[CSS] list 고르게 정렬하기

그림과 같이 리스트 간격을 동일하게 주되, 간격마다 bar를 일정 간격으로 놓는 css 을 알아보자. 

1의 태그 : span

2의 태그 : span

3의 태그 : div

사실 어떠한 태그든 의미 없다. 

1의 클래스 : 없음

2의 클래스 : .vertical-bar

3의 클래스 : .index-top

html

<h2 class="index-top">

<span>1</span>

<span class="vertical-bar"></span>

<span><a href="#">1</a></span>

<span class="vertical-bar"></span>

<span>1</span>

<span class="vertical-bar"></span>

<span>1</span>

</h2>

css

/* list */

.index-top {

display: flex;

align-items: center;

overflow: hidden;

padding: 3.34% 0 2.34% 0;

text-align: center;

}

.index-top span {

float: left;

margin: 0 auto;

padding: 0 5%;

font-size: 2.3rem;

line-height: 3.8rem;

font-weight: 700;

color: #000;

}

.vertical-bar {

display: inline-block;

width: 2px;

height: 14px;

margin: 0 !important;

padding: 0 !important;

background: url('../img/bg_bar05.gif') no-repeat;

background-size: contain;

}

margin에서는 background-image 가 잡히지 않기 때문에 아예 따로 background-image를 별도의 태그로 빼준다. 

동일하게 간격을 맞추되, bar를 삽입해야하는 경우 유용하게 쓰일 것이다. 

각각의 1 에 width 값을 설정하지 않는 것이 중요하다!

**width 값을 설정하지 않을 경우 특정 디바이스에서 가로폭이 줄어들어 글자가 무너지는 현상이 발생할 수 있다. 

<a>태그의 스타일에 width 값을 적용하면 해결된다.