HTML 정의형 목록 태그 dl dt dd 사용 방법
오늘 배운 내용은 정의형 목록 태그에 대해서 입니다. 사실 이 부분은 쓰임새가 크게 많지는 않지만, 그래도 알아두면 유용하게 사용할 수 있을 것 같습니다. 출력되는 텍스트는 비슷해도, 안에 쓰이는 태그가 다른데, 그 이유는 바로 검색엔진 때문이라고 예전 시간에 말씀드린바 있습니다. 그러므로 겉으로 보여지는게 아닌, 태그가 어떻게 쓰여지는지에 대해 알아두시면 무척이나 요긴할 것입니다.
지금까지 배운 내용 중, 목록형 요소 (태그) 는 ol과 ul 이 있었습니다. 이들의 특징은 안에 li 태그가 반드시 들어온다는 것이었는데, 정의형 목록 요소도 마찬가지 입니다. dl 안쪽에 dt와 dd만 요소로 사용할 수 있습니다.
dt 태그는 인라인 요소이며 또 다른 인라인 요소와 텍스트만 사용 가능하며, dd는 블록 요소여서 인라인 요소와 블록요소 모두 사용이 가능합니다. 추가로 목록이 있고 없는 ol 혹은 ul이 올 수 있습니다.
위의 마크업을 잘 봐주시기 바립니다. 스크린샷 된 부분은 당연히 본문 body 안쪽의 내용 입니다. 이렇게 구성하면 웹상에서 어떻게 보여지는지 확인해 보겠습니다.
그렇습니다. 이렇게 출력 됩니다. 특징은 dd 태그가 들여쓰기가 된다는 점 입니다.
dl, dt, dd 태그 요소들의 기본 형태입니다. 잘 기억해 두시기 바랍니다.
출력하면 이런 형태가 됩니다.
그대로 응용하겠습니다. 사실 여기에서 더 이상의 설명은 무의미하여... 그냥 예시들만 확인해 보도록 하겠습니다. 언제나 그렇듯 웹편집 프로그램은 브라켓을 사용했습니다.
네. 이렇게 정상 출력 됩니다.
그대로 응용!
요렇게 출력 됩니다. 정의형 목록은 특별히 설명드릴것이 없고, 그냥 알고만 계시면 될 것 같아요. 끝.
"친절한효자손 취미생활" 을 검색!
