[Trouble Shootings #5] CSS - list style 및 인덴트

HTML - CSS 를 이용하여

 

list style을 들여쓰기 방식의 리스트 아이템 형태로 만들고 싶을 때가 있습니다.

 

왜냐하면 그냥 디자인만 입히게 되면 indent가 올바르게 먹지 않고

 

다음 줄의 맨 앞에 붙어서 나오기 때문입니다.

 

이를 해결하기 위해서는 li 태그에 css로 text-indent를 적당히 -20px 정도 주고

 

padding-left를 20px 주면 됩니다.

 

그러면 올바르게 인덴트가 잘 됩니다.

 

ex) - 안녕하세요
      안녕하세요 (X)

 

       - 안녕하세요
          안녕하세요 (O)

 

그리고 추가적으로 li 태그의 depth를 늘리고 싶을 때가 있습니다.

 

그럴 때는 list-style-position: inside; 로 처리하시면 됩니다.

 

ex) - 안녕하세요

         - 안녕하세요

---