※ 다음 공부내용은 주로 "실용예제로 배우는 웹표준<에이콘>"으로 공부하면서 작성된 내용입니다.

1.리스트

  + 목록을 html로 코딩하기 위해 주로 사용하는 방법 설명

 <분류목록 마크업 방법 예>

   방법1. <br /> 태그 사용

좋은 이야기<br />

일상으로의 초대<br />

영화와 여행<br />

아름다운 영상<br />

 

[특징] 코딩은 간편하나, 추후 수정시 에로사항이 커진다.

          목록을 구분할 시 각각 스타일 입히기가 불가능하다.

          글꼴 크기만 키워도 너무 긴 문장의 경우 줄바뀜이 나타나 보일 수 있다.

           (예) 휴대폰,PDA 를 통해 문서를 볼 경우 이와 같은 현상이 많이 나타난다.

  방법2. 불릿(글머릿기호) 활용

<li>좋은 이야기</li>

<li>일상으로의 초대</li>

<li>영화와 여행</li>

<li>아름다운 영상</li>

 

※ 유효성검증

     W3C의 XHTML 1.0 명세서에 보면, 모든 태그는 반드시 닫아야 한다!

 [특징] 줄을 바꾸기 위해 <br />태그 없이 목록을 구성하는 각 항목들이 각각의 줄에 표시.

          <ul>태그가 없어서 특정 리스트에 대한 스타일 입히기가 어려움.

          그러나 항목 전체가 하나의 리스트라는 엘리먼트가 없다.

          그리고 <ul>부모태그가 없어서 어떤 브라우저에서는 제대로 나타나지 않는다.

          <의미론적인 관점에서도 중요 = 데이터의 특성에 맞게 구조를 만드는 것>

    방법3.잘 감싸기

<ul>

    <li>좋은 이야기</li>

    <li>일상으로의 초대</li>

    <li>영화와 여행</li>

    <li>아름다운 영상</li>

</ul>

 

[특징]

          유효성검증 성공!   +   의미론적 표현과 구조 제공!

          부분의 브라우저에서 각 항목마다 불릿이 올바로 표시됨.

          대부분의 브라우저에서 줄이 바뀌면 들여쓰기가 적용됨.

          CSS 이용해 쉽게 독립적으로 스타일을 입힐 수 있음.