html/css 목록태그 ol,ul,dl 이것만 알아도 홈페이지 만든다!

목록태그 ol,ul,dl 이것만 알아도 홈페이지 만든다!

홈페이지, 웹사이트는 거의 대부분이 목록으로 이루어집니다.

CSS때문에 우리가 눈에 보이지 않는 태그들이 디자인되어 변형이 되어집니다. 그중에서 거의 대부분이 목록 태그로 이루어져 있습니다.

우리가 자주이용하는 N사 사이트의 CSS를 빼볼까요?

다음과 같은 텍스트로만 이루어진 목록이 쭉 보이게 됩니다. 그렇게 깔끔하고 정돈이 잘 된 사이트 같았지만 사실은 간단한 html 태그로 이루어진 사이트 인것입니다. N사 뿐만이 아니라 모든 사이트들이 동일한 구조를 갖고 있습니다.

OL - odered list

숫자나 알파벳 순서목록을 만듭니다.

UL - unodered list

순서가 필요없는 목록을 만듭니다. 보통 순서가 필요없는 목록 UL이 가장 많이 사용됩니다.

DL - definition list

용어를 설명하는 특히 사전에나오는 단어의 목록을만드는데 사용합니다.

이와같은 사용정의일뿐이고 사용하는데 있어서 꼭 이래야한다 는 없습니다. CSS를 읽어들이지 못할때에 필요한 것이기 때문이니까요.

<ul><ol>태그를 사용할때는 ul,ol이 부모라면 자식태그는 <li> list-item 의 약자입니다.

<ul>

 <li>이렇게 ul 태그 안에 위치해야합니다.</li>

</ul>

• 메일
• 카페
• 블로그
• 지식IN
• 쇼핑

<ul>

 <li>메일</li>

 <li>카페</li>

 <li>블로그</li>

 <li>지식IN</li>

 <li>쇼핑</li>

</ul>

li를 순서대로 그대로 나열하게되면 위 이미지와 똑같이 된것 보이시나요? 평균적으로 저는 ul태그를 제일 많이 사용했습니다. 어디서 어떻게 사용하던 ol,dl은 특정한 분류아니면 잘 안쓰게 되는 태그이기때문에 (물론 필요할땐 사용하는게 맞습니다) ul을 더 좋아합니다 >_<

<ol>

 <li>ol태그도 마찬가지로 안에 위치해야합니다.</li>

</ol>

실시간인기검색어

1. 라디오스타
2. 박찬*
3. 한끼줍쇼
4. 7일의왕비
5. 싱글와이프
6. 박찬*

<ol>

 <li>라디오스타</li>

 <li>박찬*</li>

 <li>한끼줍쇼</li>

 <li>7일의왕비</li>

 <li>싱글와이프</li>

 <li>박찬*</li>

</ol>

태그안에는 숫자를 넣지 않았지만 순서있는목록 ol이기때문에 리스트순서대로 숫자의표기가 됩니다. 순서있는 목록엔 ol을 꼭 사용해주세요!

dl 태그는 ol,ul과는 달리 자식태그가 2개 입니다. 

<dt> - 제목을 넣는데 사용합니다.

<dd> - 설명을 넣는데 사용합니다.

네이버

NHN에서 운영하는 검색사이트입니다

다음

다음 운영하는 검색사이트입니다

네이트

SK에서 운영하는 검색사이트입니다

<dl>

 <dt>네이버</dt><dd>NHN에서 운영하는 검색사이트입니다</dd>

 <dt>다음</dt><dd>다음 운영하는 검색사이트입니다</dd>

 <dt>네이트</dt><dd>SK에서 운영하는 검색사이트입니다</dd>

</dl>

제목 - 설명 이런식으로 됩니다. dd는 자동 들여쓰기라서 css조정이 필요합니다.

이와같은 목록 태그만 알고있으면 사이트의 순서를 정하여 쭉 태그를 써나간 후 css로 디자인하여 사이트의 마무리를 해주면 됩니다. 웹접근성에도 아주 편리하고 좋습니다.