반응형

html을 배우면서 뭔가를 만들어지는 것이 신기하기도 하지만, 한편으로는 태그 하나 혹은 단어 하나만 틀려도 실행이 안돼서  짜증 나는 일이 많이 생길 것 같네요!

오늘은 태그 중에서 목록을 나타내는 태그! <ul>,<ol>,<dl>,<li>태그들이 어떻게 다른지 배웠습니다! 간단하고 재미있네요.. 아직은..ㅎ 

 

목록을 나타내는 태그 <ul>,<ol>,<dl>,<li>태그


<Ul></Ul>: 'Unoerdered List'의 약자로 순서가 없는 목록 태그입니다. 글머리 기호를 붙여서 목록을 만드는 태그!

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

<Dl></Dl>: 'definition List'의 약자로 정의 목록을 만드는 태그입니다. 어떤 용어의 정의를 나열하는 태그!

<Li></Li>: 'List Item"의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그입니다. 목록의 내용이 되는 실질적인 태그!


<ul> 태그

<ul>태그.html

글머리 기호를 붙여서 목록을 만드는 형식, <ul> 태그를 사용하면 ●의 모양으로 지정됩니다.

- <ul> 태그의 type을 변경: 아래의 type을 ""에 설정!

<ul type=""></ul>

  • disc: ●

  • circle: ○

  • square: ■

- <li> 태그의  type을 변경: 아래의 type을 ""에 설정!

<li type=""></li>

  • disc: ●

  • circle: ○

  • square: ■

<ol> 태그

<ol>태그.html

순서가 있는 목록을 만드는 형식으로 type 지정이 없을 경우 1,2,3...으로 지정됩니다.

- <ol> 태그의 type을 변경: 아래의 type을 ""에 설정!

<ol type=""></ol>

  • 1: 숫자 (1,2,3...)

  • A: 알파벳 대문자 (A, B, C...)

  • a: 알파벳 소문자 (a, b, c...)

  • i: 로마 숫자 (ⅰⅱⅲ...)

  • I: 로마숫자 (ⅠⅡⅢ...)

*start: <ol> 태그에 사용하며 시작 값을 임의로 지정할 때 사용합니다!

 

- <li> 태그의 type을 변경: 아래의 type을 ""에 설정!

<li type=""></li>

  • 1: 숫자 (1,2,3...)

  • A: 알파벳 대문자 (A, B, C...)

  • a: 알파벳 소문자 (a, b, c...)

  • i: 로마 숫자 (ⅰⅱⅲ...)

  • I: 로마숫자 (ⅠⅡⅢ...)

* value: <li> 태그에 사용하며 해당 항목부터 순서 값을 변경할 때 사용!

<dl> 태그

용어에 대한 정의 목록을 만드는 태그!

  • <dt></dt>: 'Definintion term'의 약자로 용어의 제목을 나타내는 태그입니다. (줄 바꿈 기능이 있습니다.)

  • <dd></dd>: 'Definintion description'의 약자로 용어에 대한 설명을 나타내는 태그입니다. (줄바꿈 기능이 있습니다.)

반응형
반응형


<doctype html>
<html lang="ko">    ← 언어는 한국어로 하겠다!
<head>   
<title>html 기초</title>
<meta charset="utf-8">      언어를 utf-8로 지정
<style>   ← 글자모양, 스타일 등을 바꾸는 영역
</style>
</head>
<body>
본문내용
</body>
</html>



  • 모든 태그는 열고 닫기를 해야지 됩니다! <html>로 열었으면, </html>로 닫아 주어야합니다!
  • 줄을 맞춰서 깔끔하게 정리하려면 스페이스 바가 아닌 탭 키를 이용하여 띄워줍니다. 
  • 저장은 제목.html로 저장해야 합니다!


반응형

+ Recent posts