반응형

html에서 <header> 태그는 본문에서 사용하는 태그입니다.

<header>라고 하여서 <head>태그에 들어가는 것이 아니고 본문인 <body> 태그에 들어간다고 합니다!

<header> 태그

  • <h숫자> 본문 내용 </h숫자>

  • <h1>~<h6>까지 사이즈가 있습니다.

  • 본문 내용에 들어가는 글자는 진하게 표시됩니다.

  • 줄 바꿈 기능이 있습니다.

header태그.html

사이즈를 조정하여 가장 큰 제목은 <h1> 태그 그 밑의 제목은 <h2> 태그 등으로 조정하여 사용합니다.

본문 내용은 <p></p> 태그를 사용하여 입력합니다.

header.html의 결과는 이렇습니다.

작은 숫자일수록 폰트의 크기는 커지고 '자동 줄 바꿈' 그리고 '진하게'가 자동으로 입력되어 있습니다.


Font 태그

font 태그는 사이즈를 지정했지만, 조금 더 키우거나 줄이는 경우 그리고 글자색, , 글자체 등을 조정하는 태그입니다.

ex) <font size="1"></font>

  • color: 글자의 색

  • size: 글자의 크기

  • face: 글자체

Font태그.html

글자의 font 크기, 글자체, 글자의 색을 변경할 때  이용합니다.

위에서 <h> 태그와 달리 숫자가 작으면 글자의 크기도 작습니다. 

*<br> 태그는 줄 바꿈 태그입니다.

font태그 결과입니다. 글자의 크기가 size에 따라 달라지고, 글자의 색이 color에 따라 달라지고, 글자체가 face에 따라서 달라집니다! 

반응형
반응형

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