<li> 메뉴에 적용 효용성에 관해서...

[PSQ]

사이트 메뉴부분에 <li> 태그를 CSS 와 함께 사용하는 사이트를 많이 보는데요...

<li>를 사용에서 메뉴를 작성하는 이유를 잘 모르겠습니다..
<li>를 이용하여 메뉴를 만들면
어떤 장점이 있는지 궁금합니다...

[she]

>>> pdf파일입니다.

[hyeonseok]

어떤 태그를 사용할 것인지를 결정하기 위해서는 어떠한 데이터를 표현하고자 하는 것인지 생각해 보면 됩니다.

메뉴의 경우, 각 메뉴 항목의 나열이라고 볼 수 있기 때문에 리스트를 나타내는 <ul>을 사용 하고 각 메뉴 항목은 <li>를 사용하는 것입니다.

[eouia]

현석님과 비슷한 의견인데 덧붙이자면,

"무슨 장점"이 있어서 li를 쓰는 것이 아니라, li를 써야 하므로 li를 쓰는 것뿐입니다. 마치 "맞춤법"에 무슨 장점이 있기에 "맞춤법"을 지켜냐라는 질문과 비슷하겠죠.
xhtml 1.1처럼 xml모듈추가가 가능하다면 <menu>,<menuitem> 같은 구조를 추가해서 쓸 수도 있겠지만 그렇게 까지는 하지 않는다면...
xhtml 1.0 이하에서는, 메뉴 항목들은 "순서없는 메뉴항목의 나열"이므로, 이러한 구조를 표현하라고 있는 <ul><li>를 사용합니다.

만약, 똑같은 메뉴라 하더라도, "순서있는 항목의 나열"(이러한 메뉴구조가 실제로 존재하는지의 문제는 차치하고)이라면 <ol><li>를 쓸 것이며,

항목의 선형 나열이 아닌 "2차원 매트릭스 구조"라면 <table>을 쓸 것이고,

"긴 문장 속에 링크로 표현되는 형태"라면 그냥 <a>를 붙이고 말겠죠.

메뉴라서 li를 쓰는 것이 아니라, 그 메뉴의 구조와 의미가 그렇기 때문에 li를 쓴 것입니다.

[PSQ]

메뉴를 텍스트 형태가 아닌 이미지로 만들고 링크를 한다면,

박스모델이 아닌 메뉴이므로
DIV를 사용해서 각 메뉴를 쪼개는 것보다..
Ul을 통해서 나누는게 적절한 방향인가요?


그리고 UL이 아닌 기존에 해왔던데로 Table로 쪼개는 형태는 어떤가요?

[hyeonseok]

메뉴를 텍스트 형태가 아닌 이미지로 만들고 링크를 한다면,

박스모델이 아닌 메뉴이므로
DIV를 사용해서 각 메뉴를 쪼개는 것보다..
Ul을 통해서 나누는게 적절한 방향인가요?

그리고 UL이 아닌 기존에 해왔던데로 Table로 쪼개는 형태는 어떤가요?

이미지든 텍스트든 크게 차이가 있는 것은 아닙니다. "박스모델이 아닌 메뉴"라는게 어떤 것을 말씀 하시는 것인지 잘 모르겠습니다. div나 ul이나 둘다 박스모델을 따르게 되어 있습니다. 제가 알고 있는 박스모델이라는 것은 CSS에서 block의 랜더링을 나타내는 것인데...

그리고 메뉴는 표형태의 데이터가 아니므로 <table>을 사용하는 것은 올바른 사용 방법이 아닙니다.

[빛알갱이]

메뉴를 텍스트 형태가 아닌 이미지로 만들고 링크를 한다면,

박스모델이 아닌 메뉴이므로
DIV를 사용해서 각 메뉴를 쪼개는 것보다..
Ul을 통해서 나누는게 적절한 방향인가요?


그리고 UL이 아닌 기존에 해왔던데로 Table로 쪼개는 형태는 어떤가요?

이미 앞선 답에서 언급된 바와 같이 어떤 HTML tag을 쓸 것인지는 표현 방식이 결정하는 게 아니라 (이미지냐 아니냐) 표현 대상이 되는 내용(순서가 그리 중요하지 않은 나열식 메뉴, 순서가 중요한 목차, "2차원적인 정보" 등)이 결정하는 것입니다. 이미지를 쓴다고 해도 당연히 alt로 대체 텍스트를 걸어 주어야 합니다. 이미지를 쓴다고 해서 의미 없는 DIV를 쓸 이유가 없습니다. 표현 방법을 규정하는 스타일을 걷어 내고, 그냥 HTML로만 보아도 내용 파악에 어려움이 없게 만드십시오.

[eouia]

텍스트건 이미지건 상관없습니다.
그것이 의미하는 것이 목록이냐 아니냐가 ul/ol/li의 사용여부를 결정합니다.

즉,
메뉴가 "링크가 걸린 이미지의 목록"이라면 ul/li를 쓰는게 맞습니다. 형태와 표현은 신경쓰지 마세요. 구조와 의미만 가지고 따져야 합니다.

Table로 메뉴를 구성하는 경우는 가로 n X 세로 m의 2차원 매트릭스형태로 배열되어야 하는 경우입니다. 예를 들어, "수강시간표 -> 해당 강좌안내" 같은 구조를 표현하는데 쓰면 좋겠지요.

사실, 이걸 "메뉴"라고 부를 수 있을까요? 링크의 2차원 매트릭스 배열일뿐.

허나, 도대체 "메뉴"란 뭐란 말입니까. 결국은 링크들이 어떤 구조로 모여있는가에 대한 추상화된 개념이지 않습니까. 따라서, 실제적으로 HTML로는 그 의미와 구조에 맞게 구체화해서 구현해야할 필요가 있습니다.
(HTML 4.01 이상에서 <menu>가 빠진 것은 여러 이유가 있습니다만, 이러한 문제도 꽤 되지 싶습니다.)

[PSQ]

이미지든 텍스트든 크게 차이가 있는 것은 아닙니다. "박스모델이 아닌 메뉴"라는게 어떤 것을 말씀 하시는 것인지 잘 모르겠습니다. div나 ul이나 둘다 박스모델을 따르게 되어 있습니다. 제가 알고 있는 박스모델이라는 것은 CSS에서 block의 랜더링을 나타내는 것인데...

그리고 메뉴는 표형태의 데이터가 아니므로 <table>을 사용하는 것은 올바른 사용 방법이 아닙니다.

제가 독학으로 PHP,CSS,HTML등을 배우다보니,,
웹표준의 중요성을 인지 한지 얼마 안되었고,
박스모델에 대한 개념을 잘못 잡고 있었습니다...
박스모델을 단순히 '페이지 전체적인 레이아웃을 구조화"로 이해하고 있었습니다.

<table> 혹은 의미 없는 <div>사용보다는 <ul> 사용이 적절할듯 하군요.
답글 달아주셔서 감사합니다.