[코딩 공부_38] li 간격 없애는 방법 3가지

코드를 작성하다보면 많이 쓰게 되는 태그가 바로 "li"이다

리스트를 나열할때 자주 사용하는 태그인데 가로로 배열해서 간격을 동일하게 주고 싶어서 시도를 해보면 내가 생각했던 대로 되지 않던 경우가 많았다

그래서 오늘은 태그 사이의 간격을 적절히 떨어뜨리는 방법에 대해 알아보고자 한다!

---

내가 구현하고 싶은 화면은 아래와 같다 

(아이콘을 가로로 배열하고 태그 사이의 간격을 동일하게 주기)

1. 아이콘 나열하기

            <ul>
                <a href="#"><li><i class="xi-home xi-2x"></i></li></a>
                <a href="#"><li><i class="xi-search xi-2x"></i></li></a>
                <a href="#"><li><i class="xi-plus-circle-o xi-2x"></i></li></a>
                <a href="#"><li><i class="xi-heart-o xi-2x"></i></li></a>
            </ul>

 

먼저 html에 ul li태그로 아이콘을 둘러싼다

** 이때, ul로 묶어주게 되면 ● 모양으로 리스트를 구분하게 되는데 reset.css 파일을 만들어 "li {list-style: none;}"을 주게 되면 ● 모양 없이 리스트가 나열된다

* a 태그의 하이퍼링크 표시 없애는 방법 : a {text-decoration: none;} / a {color : inherit;}

* 아이콘 : (xpressengine.github.io/XEIcon/index.html) 참고

 

2. 가로로 나열하기

footer {
    height: 100%;
}
footer ul {
    height: 100%;
}
footer ul li {
    display: inline-block;
    background: tomato;
}
footer ul li i {
    line-height: 50px;
}

css에 display를 inline-block으로 만들어줘서 텍스트 블럭을 만들어주면 한줄에 나열이 가능해진다 

여기서 문제는 사이사이의 여백이 생겼다는 것이다 사이사이의 여백을 없애주어야 한다

 

---

*** 이 여백을 없애주는 방법은 총 3가지가 있다

1) fontsize를 0주기

footer ul {
    font-size: 0;
}
footer ul li {
    font-size: 1rem;
}

ul 태그에 폰트 사이즈를 0주고, li 태그에 1rem(16px)을 주면 여백없이 나열이 된다

 

 

2) indent 없애기

<ul>
                <a href="#"><li><i class="xi-home xi-2x"></i></li></a><a href="#"><li><i class="xi-search xi-2x"></i></li></a><a href="#"><li><i class="xi-plus-circle-o xi-2x"></i></li></a><a href="#"><li><i class="xi-heart-o xi-2x"></i></li></a>
</ul>

띄어쓰지 않고 다 붙여서 html코드를 작성해주면 여백없이 나열이 된다

 

 

3) margin-right을 -로 주기 

footer ul li {
    display: inline-block;
    background: tomato;
    margin-right: -3px;
}

margin-right를 -n px 주게 되면 붙지만 수치에 따라 너무 딱 붙을 수도 있어서 잘 사용하지 않는 방법이다 

---

3. width값과 center 주기

footer ul li {
    width: 25%;
    text-align: center;
    height: 100%
}

width값은 리스트의 갯수에 따라 다르게 조절해준다 25% * 4 = 100% 이기때문에 25%를 주었다

즉, 100%/갯수 = width % 으로 설정하면 한줄에 꽉 채워서 리스트를 나열 할 수 있다

(inline-block이기 때문에 text-align : center를 주면 중앙정렬이 된다)