본문 바로가기
웹 공부/2. HTML5

HTML - 리스트 태그 중 - ul태그, ol태그, li태그 - 텍스트 표시 (4)

by 긴냥이 2017. 5. 12.
반응형


HTML - 리스트 태그 중 - ul태그, ol태그, li태그 

텍스트 표시 (4)




오늘은 HTML - 헤딩 태그 , 텍스트 서식 , hr 태그 및 주석 처리에

대해서 알아 보도록 하겠습니다.


태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)



먼저 HTML에서 리스트 태그란?

리스트 태그는 말 그대로 항목을 나열하는데 사용하는 태그이며

이 태그 안에는 텍스트 말고도 이미지, 비디오, 링크를 넣을 수도 있으며

태그에 따라 번호가 있는 리스트가 있고 

태그에 따라 번호가 없는 리스트도 있고

태그에 따라 정의 리스트라는 것도 있습니다.



이 내용은 하나씩 설명 하면서

아래로 글을 적어 보도록 하겠습니다.




1. 번호 있는 리스트 <ol> <li> 태그




위 사진은 번호 있는 리스트를 사용한 모습 입니다.

번호 있는 리스트를 사용시 ol태그로 시작하며 각 리스트 항목은 li 태그로 시작 합니다.

이 다음은 번호 없는 리스트를 사용해 보겠습니다.





2. 번호 없는 리스트 <ul> <li> 태그 




위 사진은 번호 없는 리스트를 사용한 모습 입니다.

번호 없는 리스트 사용시 ul태그로 시작하며 각 리스트 항목은 

위와 동일한 li 태그로 시작 합니다.




3. 정의 리스트 <dl> <dt> <dd> 태그




위 사진은 정의 리스트를 사용한 모습 입니다.

정의 리스트란 위 사진을 보시면 아시겠지만 항목들과 함께 항목의 정의가

표시되는 리스트 태그이며 사용법은 위와 동일하게 <dl> 태그 생성 후

<dt> 태그로 항목을 나타내고

<dd> 태그로 항목에 대한 설명을 추가 합니다.







여기까지 HTML - 리스트 태그 사용법에 관련되어 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보는게 더 이해하기 쉽습니다.


이상 HTML - 리스트 태그 중 - ul태그, ol태그, li태그 - 텍스트 표시 (4)에 

관련된 포스팅을 마치도록 하겠습니다.



반응형

댓글