[TIL 02] HTML | HTML Tag

HEAD 태그

• <meta>

  헤더 내부에서 사용하는 태그로 메타 데이터로 html문서가 가지고 있는
  유용한 정보를 담아 두는 곳, 문서 정보를 검색엔진에 전달

<meta name/http-equiv :"속성명" content="속성내용">

• <title> </title>

  페이지의 제목을 나타내는 태그

<title>페이지 이름</title>

• <script> </script>

  페이지에서 스크립트를 사용하기 위해 사용
  head와 body 두 곳에서 사용가능

<script>
	alert(“hello!”);
</script>

• <link>

  문서를 외부의 문서와 연결하기 위해 사용
  css파일이나 웹 폰트 사용할 때 주로 사용

<link rel="관련속성" type="MIME" href="문서위치">

• <style> </style>

  태그의 스타일을 지정해주는 태그, css속성들을 HTML내에 직접 쓸 때 사용

Text 태그

• <h?> </h?>

  제목을 입력할 때 사용하는 태그. 폰트의 크기가 태그에 따라 정해져있음.
  h태그 뒤 숫자로 구분함.

<h1>내용</h1>
<h2>내용</h2>
<h3>내용</h3>
<h4>내용</h4>
<h5>내용</h5>
<h6>내용</h6>

• <br>

  문장을 줄 바꾸기(개행)할 때 사용

• <hr>

  페이지에 가로로 밑줄을 만들어 줄 때 사용

• <p> </p>

  한 개의 단락을 만들 때 사용
  자동으로 문장 개행 후 한 줄 공백을 줌

• <pre> </pre>

  입력한 그대로 출력할 때 사용
  띄어쓰기, 들여쓰기 줄 바꿈이 입력된 그대로 출력됨

• <strong> </strong> or <b> </b>

  문장에서 문자를 강조하여 굵게 표시할 경우에 사용

• <em> </em> or <i> </i>

  문자에 기울임을 주는 태그

• <blockquote> </blockquote>

  다른 사람의 글을 인용할 경우 사용
  자동 들여쓰기가 되어 다른 텍스트와 구별할 수 있음.

• <q> </q>

  인용할 경우 사용. 인용문구에 "" 가 표시됨.

• <mark> </mark>

  배경부분을 노랑색으로 되며 형광펜 표시가 된듯하게 출력

목록 태그

• <ul> </ul>

  순서가 필요하지 않은 목록 만들때 사용
  리스트 앞에 특정모양이 출력 (default : ·)
  해당 모양은 CSS를 이용하여 수정할 수 있음.
  list-style: none | disc | circle | square | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman

<ul>
  <li>내용1</li>
  <li>내용2</li>
  <li>내용3</li>
</ul>

• <ol> </ol>

  순서가 있는 목록 만들때 사용
  속성으로 순서 형식과 시작순서를 설정 가능

  • 속성
    • type : 순서형식을 정하는것 (a,A,1,i,I)
    • start : 시작순서

<ol type="설명문자" start="시작순서">
  <li>내용1</li>
  <li>내용2</li>
  <li>내용3</li>
</ol>

• <dl> </dl>

  용어나 문장에 대한 정의(definition) 리스트
  설정 자동으로 들여쓰기가 됨.

<dl>
<dt>정의제목</dt>
<dd>정의내용</dd>
<dd>정의내용</dd>
</dl>

Table 태그

• <table> </table>

  행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 함.
  • <tr> </tr> 한 개의 행(Row)를 만드는 태그
  • <td> </td> 한 개의 열을 만드는 태그

<!-- 1행 2열 테이블 -->
<table>
  <tr>
    <td>내용2</td>
    <td>내용3</td>
  </tr>
</table>

• Table 태그 속성

  1) border : <table>태그의 속성. 표의 테두리 두께를 지
  정

  <table border="두께"></table>

  2) colspan : <td>태그의 속성으로 지정한 열만큼 열 병합. 옆으로 3칸 합치고 싶다면 colspan: '3'
rowspan : <td>태그의 속성으로 지정한 행만큼 행을 병합. 아래로 3칸 합치고 싶다면 rowspan: '3'

<table>
  <tr>
    <td colspan='3'>내용1</td>
  </tr>
  <tr>
    <td>내용2</td>
    <td>내용3</td>
  </tr>
</table>

영역 태그

• <div> </div>

  block형식의 공간을 분할(수직으로 공간분할)

• <span> </span>

  inline형식의 공간을 분할(수평으로 공간분할)

  

• 시맨틱 태그(semantic)

  페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분
  페이지 구조를 쉽게 파악하고 좀더 정확한 정보를 검색할 수 있게 함

  • <header> </header> : 특정부분의 머리말로 주로 form, nav를 넣는다.
  • <nav> </nav> : 다른 사이트나 페이지로 이동하는 태그를 모아 놓은 태그(네이비게이션)
  • <section> </section> : 웹 문서에서 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을 때 사용. 주제별로 article을 묶어주는 태그
  • <article> </article> : 웹 페이지의 내용이 들어가는 영역. 이 태그영역은 다른 곳으로 배포하거나 재사용가능. article 태그가 사용된 컨텐츠는 배포할 수 있는 컨텐츠로 인식.
  • <aside> </aside> : 사이드 바. 본문 외의 기타내용을 담고있는 영역,
  • <footer> </footer> : 웹 페이지의 맨 아래쪽에 위치하며, 회사소개, 저작권, 연락처 등의 정보 표시

<header>
  <h1>제목</h1>
  <nav></nav>
</header>
<section>
  <article>내용</article>
  <article>컨텐츠 내용</article>
</section>
<footer>
	footer 내용
</footer>

이미지 태그

• <img />

  웹 페이지에 사진이나 그림을 삽입할때 사용하는 태그

  • 속성
    • src : 삽입할 이미지 경로를 지정하는 속성
    • alt : 이미지 설명해주는 텍스트 속성. 이미지가 출력이 안되면 표시됨
    • width, height : 이미지의 크기를 설정하는 속성

  <img src="경로" alt="설명 문구" wigth="넓이" height="길이" />

하이퍼링크 태그

• <a> </a>

  페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그. 외부사이트 혹은 문서내부에서 이동 가능
  • 속성
    • href : 링크한 페이지의 id값이나 사이트 주소 지정
    • target : 링크 페이지가 표시될 위치(새창, 현재창) 지정
    • download : 링크한 페이지를 표시하지 않고 다운로드
    • rel : 현재 페이지와의 관계 지정
    • hreflang : 링크한 페이지의 언어를 지정
    • type : 페이지의 파일유형 지정

<!-- 기본 작성법 -->
<a href="주소">
  링크 표시 문구
</a>
  
<!-- 내부에서 이동 -->
<a href="#span1">
  링크 표시 문구
</a>
...
<span id="span1"></span>
  
<!-- target 이용 -->
<a href="주소"
target="_blank(새창)" or _self(현재) or _parent(상위창) or _top(최상위창)>
</a>

폼태그

• <form> </form>

  사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그
  

• <fieldset></fieldset>, <legend></legend>

  폼 요소를 그룹으로 묶는 태그, 묶은 폼 요소에 명칭을 붙이는 태그

• <input>

  사용자로부터 data를 입력 받기 위한 태그
  • type
    • hidden, text, password, button, checkbox, radio, file, time, number, range

<form action="프로그램(페이지)" method="방식">
  <fieldset name="이름">
  <legend>명칭</legend>
    <input type .....>
	...
  </fieldset>
  <input type .....>
</form>

• <label> </label>

  <form>요소에 명칭을 붙이기 위한 태그

<label for="id명">명칭</label>
<input id="id명" type="타입">

• <select> </select>, <option> </option>

  여러값을 표현하는 태그
  • 속성
    • value : 옵션 선택시 넘겨지는 값
    • seleted : 기본으로 선택되어 보여지는 값

<select size="숫자" id="">
  <option value="값">표시내용1</option>
  <option value="값">표시내용2</option>
  <option value="값" selected>표시내용3</option>
</select>

• <datalist> </datalist>, <option> </option>

  여러값을 표현하는 태그
  • 속성
    • value : 옵션 선택시 넘겨지는 값
    • label : 표시되는 명칭

 <input type="text" id="" list="id1">
    <datalist id="id1">
        <option value="값1" label="명칭1">값1</option>
        <option value="값2" label="명칭2">값2</option>
    </datalist>