[css] ul, ol 태그 공부 (+: custom- ul 만들기)

용도

---

ul과 ol은 문단의 시작점(li 태그)에 1,2,3....n, 혹은 ● 같은 리스트 스타일(marker)을 적용할 수 있는 태그이다.

 

원리

---

ul과 ol의 marker은 list-style이라는 shorthand 설정으로 한번에 설정가능하고, 이는 list-style-type, list-style-image, list-style-position으로 구성된다. 이 중에서 list-style-type, list-style-image은 marker의 형태를 결정하고 list-style-position은 들여쓰기 모드를 결정한다.

 

display:list-item

li에 marker를 표출하기 위한 display 설정

 

 

list-style-type

 marker의 형태를 string 형태로 적용한다.

미리 준비된 프리셋으로 숫자(demical), 검은 공(disc) 등이 있는데,

원한다면 문자열을 직접 지정할 수 있다.

ul.custom-ul {
  list-style: "- ";
}

 

list-style-image

marker에 이미지를 넣을 때 사용한다.

만약 해당 이미지를 찾지 못한 경우에는 list-style-type으로 대체된다.

 

list-style-position

marker의 들여쓰기 형태를 결정한다. outside와 inside 값이 존재하는데,

outside  | li박스 모델 바깥에서 marker가 형성된다. 따라서 문단이 줄바꿈 시 자동으로 들여쓰기가 된다.

왼쪽: outside 모드, 오른쪽: inside 모드

 

 

심화

---

• 문자열에 공백을 넣을 경우, 연속공백의 처리 방식은 list-style-position에 따라 달라진다. 
  • inside에서는 연속공백이 단일공백으로 처리된다.
  • outside에서는 연속공백이 구현된다.
• reset-css 같은걸로 브라우저 기본 스타일시트를 초기화하는 경우, ul에 적용된 중요한 css 속성도 초기화된다. 이를 다시 구현하려면 개인적으로는 다음 같이 한다

ul.hyphen-ul {
  /* 원하는 스타일 */
  list-style: "-";

  margin-block-start: 1em;

  /*  list-style-position: outside 일 때, marker가 box 바깥으로 나가는 것 방지*/
  margin-inline-start: 1em;

  /*  marker와 text 간 여백*/
  padding-inline-start: 0.5em;

  list-style-position: outside;
}

 

중첩 list 

list에서 한 li의 하위 li를 중첩해야하는 경우, 들여쓰기를 추가해야할 때가 있다.

그럴때는 아래 css를 추가한다.

li {
  display: list-item;
  text-align: -webkit-match-parent;
  margin-block-start: 1em;
  
  /* 중첩된  list 구조에서 depth를 표현하기 위함 */
  margin-inline-start: 1em;
  padding-inline-start: 0.5em;
}

 

예시 html

<ul>
        <li >
          hello Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Reiciendis consequatur amet, fugit officiis ex eaque minima quibusdam,
          sit adipisci in veritatis, iste nisi quisquam voluptatem veniam nihil
          laudantium excepturi praesentium.
          
    <!-- 중첩된 리스트 -->
          <li >
            hello Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Reiciendis consequatur amet, fugit officiis ex eaque minima
            quibusdam, sit adipisci in veritatis, iste nisi quisquam voluptatem
            veniam nihil laudantium excepturi praesentium.
          </li>
        </li>
      </ul>

깊이가 구현된 모습

 

 

custom-ul

---

앞서 말했듯, ul의 marker은 list-style-type으로 커스터마이징이 가능하지만, 연속되는 marker를 지정하기에는 한계가 있다. 가령, 1,2,3.. 같은 숫자 마커는 demical로 가능하지만, 1), 2). 3) ... 이나 가), 나), 다)... 같은 것들을 표현할 때는 어렵다.

해당 리스트 스타일을 class로 미리 프리셋을 만들 수는 있지만 1부터 n까지 얼마나 많은 숫자가 들어갈지 모를 때는 한계가 있다.

 

그럴 때 html 단에서 marker를 바로 주입하는 방법을 고민해보자.

 

inline  style 사용하기

inline으로 style 속성에서 list-style을 바로 넣으면 어떨까?

확인 결과 : html과 React의 JSX에서 가능했다.

• JSX에서 이 방식을 쓸 때는 주의사항이 있다. 문자열로 삽입할 때 따옴표가 같이 들어가야 인식이 된다.

 function App() {
  return (
    <div id="app">
      <ul >
        <li
          // 인라인 스타일로 marker 디자인 삽입//
          style={{ backgroundColor: "red", listStyle: `"+"` }}
        >
          hello 
        </li>
      </ul>
    </div>
  );
}

 

styled-component를 사용하는 경우

만약 styled-component 라이브러리와 react를 함께 사용한다면 위 방식과 비슷한 방식으로 해결가능하다.

      <CustomLi $listStyle=${`"가)"`}>
            hello Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Reiciendis consequatur amet, fugit officiis ex eaque minima
            quibusdam, sit adipisci in veritatis, iste nisi quisquam voluptatem
            veniam nihil laudantium excepturi praesentium.
          </CustomLi>
          
const CustomLi =styled.li`
list-style:${props=>props?.listStyle }
`

 

 

custom - ui tag 만들기

li의 marker와 유사한 기능을 하는 것을 ::before로 만들거나

아예 ui로 만들 수도 있다.

단, 이 방법은 워드나 한글 등 문서 파일로 파싱할 때 원하는 형태로 나오지 않을 수 있으니 주의해야 한다.

 <ul className="custom-ul">
 
        <li className="custom-ul__li">
          <div className="custom-ul__li-icon-layout">
            <p className="custom-ul__li-icon">가)</p>
          </div>
          <p className="custom-ul__li-content">
            hello Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Reiciendis consequatur amet, fugit officiis ex eaque minima
            quibusdam, sit adipisci in veritatis, iste nisi quisquam voluptatem
            veniam nihil laudantium excepturi praesentium.
 
 <!--중첩 li -->
 <li className="custom-ul__li">
              <div className="custom-ul__li-icon-layout">
                <p className="custom-ul__li-icon">가)</p>
              </div>
              <p className="custom-ul__li-content">
                hello Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Reiciendis consequatur amet, fugit officiis ex eaque minima
                quibusdam, sit adipisci in veritatis, iste nisi quisquam
                voluptatem veniam nihil laudantium excepturi praesentium.
              </p>
            </li>
          </p>
        </li>
      </ul>

 

.custom-ul__li {
  display: flex;
  list-style: none;
  margin-block-start: 1em;
  text-align: -webkit-match-parent;
}
.custom-ul__li-content {
  padding-inline-start: 0.5em;
}

 

 

여기서 다루지 않은 것들

---

::marker 같은 속성들