CSS - <li 태그> dot 스타일 변경하기 + 들여쓰기

 

기본적인 리스트를 정렬중인 새발자

기초를 탄탄히 다지기 위해 열심히 포스팅을 정리해보았다.

<li 태그> 들을 사용해보았는데 오랜만에 사용해보니 부족한 것들이 눈에 들어왔다. 

그럼 <li 태그> 에 대해 좀 더 알아보러 가보자

 

 

---

CSS - <li 태그>  dot 스타일 변경하기 + 들여쓰기

 

일단 타이틀과 정렬이 맞지 않고, 하위메뉴들도 정렬이 안되있다. 그리고 dot 크기도 마음에 안든다.

    테스트 타이틀
1. 커피류
• 아메리카노
• 카페라떼
• 에스프레소
2. 테스트 입니다.
3. 테스트 입니다. 

 

 

아래와 같이 수정을 해보자.

     테스트 타이틀
    1. 커피류 
        • 아메리카노
        • 카페라떼
        • 에스프레소
    2. 테스트 입니다.
    3. 테스트 입니다. 

 

 

HTML

<ol className="list">
  <li>커피류</li>
  <ol className="sub-list">
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>에스프레소</li>
  </ol>
  <li>테스트 입니다.</li>
  <li>테스트 입니다.</li>
</ol>

 

CSS

  .list {
    list-style-position: inside; // 리스트 자체를 들여쓰기 해주고  
	
    > li {   // 상위목록의 li 태그
      list-style-type: number;
    }
    
    .sub-list {
      > li { // 하위목록의 li 태그
        list-style-type: none; // 마커를 none 으로 선택해서 보이지 않게 해주고
        text-indent: 5px;      // li 하위 태그들만 한번 더 들여쓰기 해주기

        &::before {	       // 가상선택자를 통해 li태그 앞에 dot 을 붙여준다.
          content: '•';   
         font-size: 108%;
          padding-right: 5px;
        }
      }
    }
  }