HTML - 목록을 만드는 태그






    이전글 :


    HTML이란? - http://server-talk.tistory.com/1 


    HTML - 기본 구조의 HTML 문서 만들기 - http://server-talk.tistory.com/101 

    HTML - 문법과 주의사항 - http://server-talk.tistory.com/102





     HTML - 목록을 만드는 태그



    목록을 만드는 태그 <ul> <ol> <li> 태그 사용합니다.




    <ul> 태그 : Unoerdered List의 약자로 순서가 없는 목록, 글머리 기호를 붙혀서 목록을 만드는 형식입니다.


    <ol> 태그 : Ordered List의 약자로 순서가 있는 목록, 번호 형식으로 순서를 매겨 목록을 만드는 형식입니다.


    <dl> 태그 : Dfinition List의 약자로 정의의 목록을 만드는 형식, 어떤 용어의 정의를 나열하는 형식입니다.


    <li> 태그 : List Item의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그 , 목록의 내용이 되는 실질적인 태<>그이며 들여쓰기 및 줄바꿈 기능이 있고 type 속성으로 다양한 기호를 사용할 수 있다.






     HTML - <ul> 태그




    <ul>속성 : 글머리 기호를 붙혀서 목록을 만드는 형식

    ul 태그의 type 속성 : 전체 항목에 대한 type을 설정합니다.

    disc : ●   circle : ○  square : ■


    <li>속성

    li 태그의 type 속성 : 해당 항목에 대한 type을 설정합니다.

    disc : ●   circle : ○  square : ■


    예제)

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>First create html document</title>
    	</head>
    
    	<body>
    
    	<body>
    		<li>ul 태그</li>
    
    			<ul>
    
    				<li type="square">글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				
    			</ul>
    	</body>
    
    </html>	





     HTML - <ol> 태그




    <ol>속성 : 순서가 있는 목록을 만드는 형식

     

    ol 태그의 type 속성 : 전체 항목에 대한 type을 설정합니다.

    1 : 숫자   A : 아파벳 대문자   a : 알파벳 소문자   i : 로마숫자 i ii iii   ㅣ : I II III


    <li>속성

     

    li 태그의 type 속성 : 해당 항목에 대한 type을 설정합니다.

    1 : 숫자   A : 아파벳 대문자   a : 알파벳 소문자   i : 로마숫자 i ii iii   ㅣ : I II III



    예제)

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>First create html document</title>
    	</head>
    
    	<body>
    
    	<body>
    		<li>ul 태그</li>
    
    			<ol type="A">
    
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				
    			</ol>
    
    			<ol type="1">
    
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				<li >글머리 기호를 붙혀서 목록을 만드는 형식</li>
    				
    			</ol>
    
    	</body>
    
    </html>	





     HTML - <dl> 태그




    <dl>속성 : 용어에 대한 정의 목록을 만드는 형식

     

    dt : definintion term 의 약자로 용어의 제목을 나타내는 태그이다. 줄바꿈 기능이 있다.


    dd : definintion description의 약자로 용어에 대한 설명을 나타내는 태그이다. 줄바꿈 기능이 있다.



    예제)

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>First create html document</title>
    	</head>
    
    	<body>
    
    	<body>
    
    		<dl>
    
    			<dt>HTML 자주 사용하는 태그</dt>
    			<dd>dl 태그<br>
    			용어의 대한 정의 목록을 만드는 형식<br>
    			dt태그는 줄바꿈 기능이 있다.</dd>
    			
    		</dl>
    
    	</body>
    
    </html>	



    Posted by 서버이야기