li을 2 columms으로 출력하기

요즘 css에서는 table을 권장하지 않는단다.. (아마 사이즈 문제 때문이 아닐까 싶긴한데.)

찾아봤는데 li을 이용할까 했는데, li을 한줄로 쭉 나오는 방법 밖에 없어 보였다.

검색해보니 역시나 방법은 있다.

HTML CODE

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
</ul>

다음은 CSS

CSS

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

이렇게 주면 결과 값이

A      E

B      F

C      G

D

이런식으로 나온다.