> For the complete documentation index, see [llms.txt](https://aoa.gitbook.io/skymimo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aoa.gitbook.io/skymimo/aoa-2018/tips/dl.md).

# 화면의 정렬을 위해 중복 태그를 사용하지 말 것

### 단순 병렬 배치용 리스트

국내 포털사이트의 지식백과 페이지이다.\
주제백과 바로가기의 하단 12개의 백과 종류를 병렬로 배치하기 위해 총 4개의 \<ul>을 사용하고 있다. 단순히 화면 배치를 위해 \<ul>을 의미없이 중복해서 사용하고 있는 것이다.

![](https://3414272834-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LL2w96d4fwoeh4NDyDr%2F-LShwupFff5_WejtDSn1%2F-LShxmjj7k2YS4KyAxu-%2Fimage.png?alt=media\&token=2eee5a83-1b02-49db-99df-500a4632a055)

### 주제백과의 리스트는 도대체 몇 개라는 걸까?

이처럼 화면 배치를 위해 \<ul>을 단순 반복하게 되면 스크린리더 사용자들은 전체가 몇 개의 리스트로 구성되어 있는지 페이지를 어떻게 탐색해야 하는지 알 수가 없게 된다.

![](https://3414272834-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LL2w96d4fwoeh4NDyDr%2F-LShwupFff5_WejtDSn1%2F-LShxoY6lZs_ki1vF1wl%2Fimage.png?alt=media\&token=d2b1c30f-79dd-4772-9aa8-b626cbcbaae3)

소스는 병렬 배치를 위해 \<ul>을 4개로 반복하여 사용하였으며, 위의 내용을 스크린리더로 읽어보자.

> heading level 3\
> 주제백과 바로가기\
> \
> list with 3 items\
> 건강백과\
> 동물백과\
> 음악백과\
> out of list\
> \
> list with 3 items \
> 수학/과학백과\
> 식물백과 \
> 밀리터리백과 \
> out of list \
> ...

### 리스트 구조는 시맨틱하게 사용하자.

스크린리더는 \<ul>을 만나면 \<li>의 개수를 읽고 스크린리더 사용자들은 리스트 구조와 탐색해야 하는 영역이 어디까지인지 이해하고 쉽게 운용할 수 있게 된다.

그렇기 때문에 한 개의 리스트는 한 개의 \<ul>로 사용해야 하며 이것은 \<dl> 정의형 리스트를 사용해야 할 때도 마찬가지이다.

#### <mark style="color:orange;">AOA동영상 강의</mark>

{% embed url="<https://youtu.be/5n5Im5YvoN0>" %}