본문 바로가기
Front-end

[HTML/CSS] ul li에 이미지 사용할 경우 list-style 들여쓰기 맞추기

by 셀킴 2023. 4. 18.
728x90
  • ul li 구조로 마크업을 하면 li의 텍스트가 여러줄이 되도 들여쓰기가 (지금 이 문단처럼) 자동으로 들어간다. list-item의 마커 타입이 disc,square 등 꽤나 다양하다고 해도 한계가 있기 때문에 보통은 ul {list-style: none;}으로 초기화 시키고 커스텀 이미지를 li 태그 안에 사용할 때가 많다. 이 경우 아래 이미지의 파란선처럼 텍스트 들여쓰기가 맞지않다. 

들여쓰기 안맞음

한줄이면 상관없지만 여러줄이면 들여쓰기가 맞지않아 거슬린다.

특히 기관 홈페이지 작업하면 십중팔구는 들여쓰기 맞춰달라고 요청이 들어온다.

 

ul의 list-style에 url을 이용하여 마커를 이미지로 변경할 수도 있지만

사이즈나 위치 등 자유로운 수정이 어렵다.

 

 

그래서 이렇게 li 태그 안에 img를 넣어 사용하게 된다.

바로 이 경우 들여쓰기 맞지않게 되는데 이 것을 해결할 방법이 display:flex;이다.

ul의 li는 원래 display:list-item;인데 이 li를 display:flex;로 바꿔준다.

다만 flex 속성을 고려하여, li안에 여러 요소가 들어가는 경우에는 마크업을 크게 img랑 div로 나누어야 할 것이다.

 

또는

li {display:table-row;}

li:before {display:table-cell;}로 사용하는 방법도 있으나,

(출처: https://www.w3docs.com/snippets/css/how-to-add-indentation-for-the-second-line-of-an-ordered-list.html)

굳이 CSS 길어질 필요없이 flex가 제일 깔끔하지않나 생각한다.

 

혹은 margin과 text-indent를 사용할 수도 있다.

출처: https://silvawebdesigns.com/css-indenting-second-line-li-list-items/

 

ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
}

하지만 수치를 사용하는 건 반응형 대응이 복잡해지기않나? 굳이 이 방법을 사용할 필요가 있을까

 

더 좋은 방법이 있는지 모르겠으나

나는 flex 속성을 사용하고 있다.

 

 

See the Pen list item multi line text indent when using img marker by sel (@wimmwell) on CodePen.

728x90