ul 태그, 순서가 필요 없는 목록을 만들 때 쓰는 기본 문법
<ul> 태그는 Unordered List의 줄임말로, 순서에 특별한 의미가 없는 목록을 나타낼 때 사용합니다. 항목 하나하나를 나열하되 앞뒤 순서가 바뀌어도 내용이 달라지지 않는 경우가 여기에 해당합니다. 이 태그만 단독으로 쓰이지 않고, 각 항목을 정의하는 <li> 태그와 짝을 이루어 목록을 완성합니다. 반대로 순서 자체가 의미를 갖는 목록이라면 <ol> 태그를 써야 하고, <ul>은 그 자리에 들어가지 않습니다.
목록을 만들 때 기억할 기본 조건은 다음과 같습니다.
<ul>은 순서가 없는 목록,<ol>은 순서가 있는 목록을 의미합니다.<li>는 목록 내 개별 항목을 나타내며,<ul>이나<ol>안에 들어갑니다.<ul>은<li>와 함께 사용해 목록을 만듭니다.- 목록의 모양은 CSS로 꾸미는 것이 권장됩니다.
<ul>태그는 HTML의 전역 속성과 이벤트 속성도 지원합니다.
순서가 있는 목록이 필요한 대표적인 예로 할 일 목록을 들 수 있습니다. 해야 할 일의 순서가 정해져 있다면 <ol>이 맞고, 단순히 항목을 묶어 보여주는 것이라면 <ul>이 맞습니다. 이 구분만 명확히 해도 목록 마크업에서 흔히 생기는 혼동은 줄어듭니다.
ul과 ol, 언제 무엇을 골라야 할까
두 태그는 겉으로 보이는 모양이 비슷해 보이지만 목록이 담고 있는 의미가 다릅니다. 순서를 바꿨을 때 내용이 달라지는지를 기준으로 판단하면 선택이 어렵지 않습니다.
| 항목 | ul | ol |
|---|---|---|
| 원래 이름 | Unordered List | Ordered List |
| 순서 의미 | 없음 | 있음 |
| 대표 용도 | 단순 항목 나열 | 할 일 목록 |
| 짝 태그 | li | li |
브라우저는 <ul> 요소를 기본값으로 표시하며, 이 기본 표시값은 브라우저마다 정해져 있습니다. 다만 그 기본 모양에 의존하기보다 CSS로 직접 스타일을 지정하는 편이 권장됩니다. 목록 기호의 모양이나 간격은 디자인 요구에 따라 달라질 수 있기 때문입니다.
li 태그와 함께 쓸 때 지켜야 할 구조
<ul> 안에는 항목을 뜻하는 <li>가 들어가고, <li> 하나가 목록의 한 줄을 담당합니다. <ul>만 쓰고 <li>를 빼먹으면 목록 항목이 성립하지 않으므로, 두 태그는 항상 세트로 생각해야 합니다. <li>는 <ul>이나 <ol> 안에서만 항목으로 동작한다는 점도 함께 기억해 둘 만합니다.
실제로 목록을 작성할 때는 다음 순서를 따르면 구조가 흐트러지지 않습니다.
- 목록 전체를 감쌀
<ul>태그를 엽니다. - 나열할 항목마다
<li>태그를 열고 내용을 적습니다. - 각 항목의
<li>태그를 닫습니다. - 마지막에
<ul>태그를 닫아 목록 전체를 마무리합니다.
이 순서대로 작성하면 브라우저가 목록의 시작과 끝, 그리고 항목의 경계를 정확히 인식합니다. 항목이 늘어나도 <li>를 추가하는 방식으로 대응하면 되므로 구조가 단순하게 유지됩니다.
목록 기호 모양은 CSS로 정한다
<ul>의 기본 표시값은 브라우저마다 정해져 있지만, 목록 기호를 어떤 모양으로 보여줄지는 CSS가 담당합니다. 태그 자체는 목록이라는 의미를 전달하고, 겉모습은 스타일 영역에서 다루는 것이 기본적인 역할 분담입니다. 이 구분을 지키면 나중에 디자인을 바꿀 때 마크업을 건드리지 않아도 됩니다.
태그별 설명 자료에서도 목록의 모양은 CSS로 꾸미는 것을 권장하고 있으며, <ul> 태그가 전역 속성과 이벤트 속성을 지원한다는 점도 확인됩니다. 즉 목록의 의미 구조는 HTML이, 시각적 표현은 CSS가 맡는다는 원칙이 <ul>에도 그대로 적용됩니다.
실무에서 자주 헷갈리는 지점
목록을 다루다 보면 태그 선택보다 주변 요소와의 관계에서 문제가 생기는 경우가 많습니다. 대표적으로 줄바꿈 처리와 태그의 존치 여부를 들 수 있습니다.
자동 개행이 일어나는 상황에서는 태그 앞뒤에 위치한 단어가 서로 분리될 수 있습니다. 원래는 개행을 방지하는 처리가 필요한 경우가 있으며, 목록 항목 안에 긴 단어나 문장이 들어갈 때 이런 문제가 드러나기도 합니다. 한편 HTML5 규격에서 제외된 태그가 있는 반면 <ul> 태그는 존치되어 있다는 점도 확인됩니다. 목록 마크업을 오래 유지해야 하는 문서라면 이런 규격 변화도 참고할 만합니다.
Q. ul 태그는 li 없이 써도 되나요?
목록 항목을 정의하는 <li>와 함께 사용하는 것이 기본입니다. <ul>은 목록 전체를 감싸는 역할이고, 실제 항목은 <li>가 담당합니다.
Q. 순서가 있는 목록에도 ul을 써도 되나요?
순서에 의미가 있는 목록이라면 <ol>을 쓰는 것이 맞습니다. <ul>은 순서에 특별한 의미가 없는 목록을 나타낼 때 사용합니다.
Q. 목록 기호 모양은 어디서 바꾸나요?
태그 자체가 아니라 CSS로 스타일을 지정하는 방식이 권장됩니다. <ul>은 목록이라는 의미를 담당하고, 겉모습은 스타일에서 다룹니다.
Q. ul 태그는 어떤 속성을 지원하나요?
<ul> 태그는 HTML의 전역 속성과 이벤트 속성을 지원합니다.