목록태그 li

 

자주 사용하는 li 태그.
여러분은 혹시 메뉴, 목록 등에 br 이나 div, p 등을 응용해서 쓰면 될 걸, 왜 굳이 li를 써야 하는지 의문이 들 때가 있지 않았나요?

저는 들었습니다만...
하지만 다 이유가 있어서 쓰라고 하는 것이니 말을 잘 듣겠습니다.

그럼 li 태그를 쓰는 이유를 함께 알아볼까요?
아래의 목록을 봐주세요.

abc
123
가나다라마바사아자차

위 목록처럼 나오려면 글 쓰고 엔터 치고, 글 쓰고 또 엔터
이런식으로 줄 바꿈이 되어야겠습니다.
br, div, p 이 3가지 태그를 사용해서 만들어 보겠습니다.

- br -

abc<br />
123<br />
가나다라마바사아자차

- div -

<div>abc</div>
<div>123</div>
<div>가나다라마바사아자차</div>

- p -

<p>abc</p>
<p>123</p>
<p>가나다라마바사아자차</p>

결과물

abc
123
가나다라마바사아자차

저렇게 3가지 방법을 사용해도 화면에 보이는 결과물은 동일하게 보입니다.

헌데 말입니다.
브라우저를 축소해보시면 이게 좀 이상하게 보인다 싶을 거예요.

브라우저 축소했다 치고 아래를 봐주세요.

abc
123
가나다라마바사아자차

3개였던 목록이 늘어나 버렸습니다.
실은 목록이 늘어난게 아니고, 줄 바꿈으로 인해 구분이 모호해 진거죠.

그럼 li 태그를 사용해서 제대로 된 목록을 만들어 볼까요?

<ul>
	<li>abc</li>
	<li>123</li>
	<li>가나다라마바사아자차</li>
</ul>

결과는

• abc
• 123
• 가나다라마바사아자차

이제야 목록의 시작이 어딘지 확실해 졌습니다.
앞으로 목록을 만들때는 li를 써야 하겠습니다.

---

사실 br, div, p로도 약간의 스타일만 준다면 얼마든지 저렇게 만들 수는 있습니다.
그런데 검색로봇이 “아! 여긴 목록 이구나”라고 인식을 시켜줘야 되는데, 바로 그것이 li를 쓰는 이유입니다.

목록을 만들 때는 웹 표준을 준수해서 li를 사용 하는 게 좋습니다.
문서의 올바른 구조로 웹 접근성 향상은 물론이고, 무엇보다 검색 로봇이 좋아하니 검색엔진 최적화도 신경 써야 되겠습니다.

그런데 목록이 좀 예쁘지가 않네요.
다음에는 목록 꾸미는 방법을 알아봐야 하겠습니다.

여러분들 늘 행복하세요.