자주 사용하는 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를 사용 하는 게 좋습니다.
문서의 올바른 구조로 웹 접근성 향상은 물론이고, 무엇보다 검색 로봇이 좋아하니 검색엔진 최적화도 신경 써야 되겠습니다.
그런데 목록이 좀 예쁘지가 않네요.
다음에는 목록 꾸미는 방법을 알아봐야 하겠습니다.
여러분들 늘 행복하세요.
'공부' 카테고리의 다른 글
사이트맵, RSS 제출하기-티스토리 (0) | 2022.01.11 |
---|---|
티스토리 - 네이버 웹마스터 도구 연결 (0) | 2022.01.10 |
티스토리-구글서치콘솔 (Google Search Console) 연결 (0) | 2022.01.09 |
썸네일 크기 줄이고 본문 영역 넓게 쓰기-티스토리 오디세이 Odyssey 스킨 (0) | 2022.01.02 |
li 목록 꾸미기 list-style-type (0) | 2021.12.18 |