티스토리 뷰

코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML

태그(Tag)

더불어숲2 2020. 4. 9. 14:03
반응형

태그(Tag)

  • 태그는 HTML에서 정보를 전달하는 방식을 의미합니다.
  • HTML 언어를 사용하여 문서를 만드는데 있어 어디가 이미지고 어디가 텍스트인지 표시하는 것을 마크업이라고 하는데 마크업할 때 사용하는 약속된 표기법을 '태그(Tag)라고 합니다.
  • 태그는 웹 문서에 표시하려는 내용을 전달하는 언이이기 때문에 정확히 사용해야 합니다.
1. 태그는 열린 태그와 닫는 태그가 있습니다.
2. 닫는 태그에는 " / " 가 있어야 합니다.
3. 닫는 태그가 필요 없는 경우도 있습니다.(ex: <img>, <br> 등)
4. HTML5에서는 " / " 가 생략이 가능합니다.
5. 태그는 소문자로 씁니다.
6. 적당히 들여씁니다.
7. 태그는 속성과 함께 사용할 수 있습니다.
8. 포함 관계를 명확히 합니다.




TAG의 종류

태그 설명

<!-- -->

주석(comment)을 정의함.

<!DOCTYPE>

해당 문서(document)의 타입을 정의함.

<a>

다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함.

<abbr>

축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함.

<acronym>

머리글자로만 된 단어(acronym)를 정의함.

HTML5에서는 더 이상 지원하지 않으며, 대신 <abbr> 요소를 사용함.

<address>

문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함.

<applet>

문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램)을 정의함.

HTML5에서는 더 이상 지원하지 않으며, 대신 <embed> 요소나 <object> 요소를 사용함.

<area>

이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의함.

<article>

해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의함.

<aside>

페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의함.

<audio>

음악이나 오디오 스트림과 같은 사운드를 정의함.

<base>

해당 문서의 모든 상대 주소(relative URL)에 대한 기본 URL과 target 속성값을 정의함.

<basefont>

해당 문서의 모든 텍스트에 대한 색상, 크기 및 폰트의 기본값을 정의함.

HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.

<bdi>

주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의함.

<bdo>

자식 요소의 텍스트 방향성(text directionality)을 정의함.

<big>

글자 크기가 큰 텍스트를 정의함.

HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.

<blockquote>

다른 출처로부터 인용된 영역을 정의함.

<body>

해당 문서의 콘텐츠 영역을 정의함.

<br>

행 바꿈(line-break)을 정의함.

<button>

클릭할 수 있는 버튼을 정의함.

<canvas>

자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용함.

<caption>

테이블의 캡션(caption)을 정의함.

<center>

가운데로 정렬되는 텍스트를 정의함.

HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.

<cite>

예술 작품과 같은 창작물의 제목을 정의함.

<code>

컴퓨터 코드(code)의 일부분을 나타냄.

<col>

<colgroup> 요소에 속하는 각 열(column)의 속성을 정의함.

<colgroup>

테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용함.

<data>

특정 콘텐츠에 기계가 읽을 수 있는(machine-readable) 형태의 값(value)을 덧붙여 나타낼 때 사용함.

<datalist>

<input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의함.

<dd>

용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명(description) 부분을 정의함.

<del>

텍스트 한가운데 라인을 추가하여 문서에서 삭제된 텍스트를 표현함.

<details>

사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시함.

<dfn>

HTML에서 용어(term)의 정의를 나타냄.

<dialog>

대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의함.

<dir>

HTML 리스트(list)를 정의함.

HTML5에서는 더 이상 지원하지 않으며, 대신 <ul> 요소를 사용함.

<div>

HTML 문서에서 특정 영역이나 구획을 정의함.

<dl>

용어와 그에 대한 설명을 리스트 형식으로 정의함.

<dt>

용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어(term) 부분을 정의함.

<em>

강조된 텍스트를 표현함.

<embed>

외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너를 정의함.

<fieldset>

<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용함.

<figcaption>

<figure> 요소의 캡션(caption)을 정의함.

<figure>

삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의함.

<font>

텍스트의 폰트, 색상 그리고 크기를 정의함.

HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.

<footer>

문서나 특정 섹션의 푸터(footer)를 정의함.

<form>

사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의함.

<frame>

<frameset> 요소에 포함되는 하나의 프레임(frame)을 정의함.

HTML5에서는 더 이상 지원하지 않음.
<frameset>

문서의 레이아웃을 구성하기 위해 사용되는 프레임(frame)들의 집합을 정의함.

HTML5에서는 더 이상 지원하지 않음.

<h1> ~ <h6>

HTML 문서에서 제목(headings)을 정의함.

<head>

해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함.

<header>

문서나 특정 섹션의 헤더(header)를 정의함.

<hr>

콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의함.

<html>

HTML 문서의 루트 요소(root element)를 정의함.

<i>

기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의함.

<iframe>

인라인 프레임(inline frame)을 정의함.

<img>

이미지(image)를 정의함.

<input>

사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의함.

<ins>

텍스트 아래쪽에 라인을 추가하여 문서에 추가된 텍스트를 표현함.

<kbd>

키보드 입력을 나타냄.

<label>

사용자 인터페이스(UI) 요소의 라벨(label)을 정의함.

<legend>

<fieldset> 요소의 캡션(caption)을 정의함.

<li>

HTML 리스트(list)에 포함되는 아이템(item)을 정의함.

<link>

해당 문서와 외부 소스(external resource) 사이의 관계를 정의함.

<main>

해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의함.

<map>

클라이언트 사이드 이미지맵(client-side image-map)을 정의함.

<mark>

형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의함.

<meta>

해당 문서에 대한 정보인 메타데이터(metadata)를 정의함.

<meter>

분수 값이나 범위(gauge) 내에서 특정 스칼라 값이 어느 정도인지를 표현함.

<nav>

다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의함.

<noframes>

프레임(frame) 기능을 사용하지 않도록 설정했거나, 프레임 기능을 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함. 

HTML5에서는 더 이상 지원하지 않음.

<noscript>

클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함.

<object>

외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체(embedded object)를 정의함.

<ol>

순서가 있는 HTML 리스트(list)를 정의함.

<optgroup>

옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 옵션들의 그룹을 정의함.

<option>

옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의함.

<output>

스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타냄.

<p>

문단(paragraph)을 정의함.

<param>

<object> 요소에 의해 호출되는 플러그인의 매개변수(parameter)를 정의함.

<picture>

<img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의함.

<pre>

미리 정의된 형식(preformatted)의 텍스트를 정의함.

<progress>

작업의 진행률을 나타냄.

<q>

짧은 인용구를 정의함.

<rp>

루비 주석을 지원하지 않는 브라우저를 위한 대체 내용을 정의함.

<rt>

루비 주석에서 발음이나 설명을 나타내는 윗첨자를 정의함.

<ruby>

해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석(ruby annotation)을 정의함.

<s>

텍스트 한가운데 라인을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현함.

<samp>

컴퓨터 프로그램의 샘플 또는 인용 출력(output)을 나타냄.

<script>

자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함.

<section>

HTML 문서에 포함된 독립적인 섹션(section)을 정의함.

<select>

옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의함.

<small>

글자 크기가 작은 텍스트를 정의함.

<source>

<audio> 요소나 <video> 요소에서 사용할 수 있는 다중 미디어 자원(multiple media resources)을 정의함.

<span>

HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용함.

<strike>

텍스트 한가운데 라인을 추가할 때 사용함.

HTML5에서는 더 이상 지원하지 않으며, 대신 <del> 요소나 <s> 요소를 사용함.

<strong>

해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조함.

<style>

해당 HTML 문서의 스타일 정보를 정의함.

<sub>

아랫첨자(subscript) 텍스트를 표현함.

<summary>

<details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의함.

<sup>

윗첨자(superscript) 텍스트를 표현함.

<svg>

SVG 그래픽을 위한 컨테이너를 정의함.

<table>

데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의함.

<tbody>

테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용함.

<td>

테이블에서 하나의 셀(cell)을 정의함.

<template>

추가되거나 복사될 수 있는 HTML 요소들을 정의함.

<textarea>

사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의함.

<tfoot>

테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용함.

<th>

테이블에서 제목이 되는 헤더 셀(header cell)들을 정의함.

<thead>

테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용함.

<time>

사람이 읽을 수 있는(human-readable) 형태의 날짜와 시간 데이터를 정의함.

<title>

해당 문서의 제목(title)을 정의함.

<tr>

테이블에서 셀들로 이루어진 하나의 행(row)을 정의함.

<track>

<audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(track)을 정의함.

<tt>

텔레타이프 텍스트(teletype text)를 나타냄.

HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.

<u>

철자가 틀린 단어나 중국어의 고유 명사처럼 문체상 일반적인 텍스트와는 달라야만 하는 텍스트를 표현함.

<ul>

순서가 없는 HTML 리스트(list)를 정의함.

<var>

변수(variable)를 정의함.

<video>

무비 클립(movie clip)이나 비디오 스트림(video stream)과 같은 비디오를 정의함.

<wbr>

단어 중간에서 행바꿈될 수 있는(line-break) 위치를 정의함.

<div>

div 태그는 문서의 섹션을 만들거나 영역을 만들때 사용합니다.

<p>

p 태그는 문단을 쓸 때 사용합니다.

  • p태그와 p태그 사이에는 한 줄의 행간이 표현됩니다.

<ul>

ul 태그는 순서가 없는 목록을 정의합니다.

<li>

li 태그는 목록의 항목을 정의합니다.

  • li태그는 ul 태그, ol태그, menu 태그와 같이 사용합니다.
  • li태그 안에는 다른 목록을 중첩으로 사용할 수 있습니다.

<a>

a 태그는 하이퍼 링크를 정의합니다.

  • 하이퍼 링크란 현재 페이지에서 다른 페이지로 이동을 말합니다.
  • 방문하지 않은 링크는 밑줄과 파란색으로 표시됩니다.
  • 방문한 링크는 밑줄과 보라색으로 표시됩니다.
  • 활성화된 링크는 밑줄과 빨간색으로 표시됩니다.
  • HTML5에서는 a 태그는 블록 요소를 포함할 수 있습니다.

<img>

img 태그는 이미지를 정의합니다.

  • img 태그는 src 속성과 alt 속성은 필수적으로 설정합니다.
  • img 태그는 인라인구조이며, border, border-radius, padding, margin, width, height 속성값을 설정할 수 있습니다.

<pre>

pre 태그는 미리 작성된 텍스트를 있는 그대로 표시해 줍니다.

  • pre태그는 블록 형태로 사용될 수 있습니다.
  • pre태그는 여러 줄의 코드를 그대로 출력하고자 할 때 code, samp, kbd, var등을 둘러싼 형태로 사용합니다.

<code>

code 태그는 컴퓨터나 프로그래밍 코드 일부를 그대로 표시할때 사용합니다.

<br>

br 태그는 강제 줄바꿈을 할때 사용합니다.

  • br태그는 Line Break를 의미하며 우리말로 강제 줄바꿈이라고 할수 있습니다.

<hr>

hr 태그는 화면에 가로로 선(구분선, 수평선)을 긋는 태그입니다.

  • hr태그는 단락의 구분을 할 때 가장 많이 사용합니다.
  • hr태그는 문자의 밑줄을 넣을 때도 사용 가능하며 때때로 세로로 선을 넣을 수도 있습니다.
  • hr태그는 줄바꿈 효과도 있어 br태그나 p태그와 같이 사용할 필요가 없으며 br태그나 p태그처럼 단독으로 사용합니다.

<meta>

meta 태그는 웹 문서에 대한 여러가지 정보를 제공합니다.

메타 데이터 설명
charset 웹 페이지 언어 설정
author 웹 페이지 만든 사람
description 웹 페이지에 대한 설명
keywords 웹 페이지에 대한 키워드
apllication name 웹 페이지에 관련된 웹 응용 프로그램 이름
generator 웹 페이지 만든 소프트웨어의 이름 
<!-- Html5 언어 설정 -->   
<meta charset="UTF-8">

<!-- Html4 언어 설정 -->   
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<!-- 웹 문서에 대한 제작자 설정 -->              
<meta name="author"  content="webstoryboy">   

<!-- 웹 문서에 대한 설명 -->
<meta name="description"  content="이 사이트는 무슨무슨 사이트입니다.">   

<!-- 웹 문서에 대한 키워드 설정 -->      
<meta name="keyword"  content="키워드, 키워드, 키워드">   

<!-- 웹 문서에 대한 웹 응용 프로그램 이름 -->        
<meta name="application-name"  content="응용 프로그램 이름">  

<!-- 웹 문서에 대한 소프트웨어 이름 -->        
<meta name="generator"  content="소프트웨어 이름">

<table>

table 태그는 표를 만드는 태그입니다 .

table은 각각 셀로 만드는데 header cell과 standard cell로 나누어집니다. th를 header cell이라 부르며 나머지를 standard cell로 부릅니다.

table의 구성요소 설명
table 테이블을 만드는 태그
th 테이블의 헤더부분을 만드는 태그
tr 테이블의 행을 만드는 태그
td 테이블의 열을 만드는 태그
colspan 가로 합병(열 합병)
rowspan 세로 합병(행 합병)

<stong>

stong 태그는 글자를 굵게 표시하며 텍스트를 강조할 때 사용합니다.

  • stong태그는 핵심이 되는 중요 키워드에 폰트 스타일을 두껍게 하여 강조합니다.
  • stong태그는 주로 제목, 문단 등에 사용합니다. 문장의 의미를 바꾸지 않습니다.

<em>

em 태그는 emphasized text 즉 특정 텍스트를 강조하고자 할 때 사용합니다.

  • em태그는 텍스트를 기울이게 해주는 이탤릭 효과를 주어 해당 텍스트를 강조합니다.
  • em태그는 강조의 위치에 따라 문장의 의미를 바꿉니다.

<title>

title 태그는 문서의 제목을 넣는 태그입니다.

  • title 태그는 말 그대로 문서의 제목을 나타내주며 본문에는 나타나지 않습니다.
  • title태그는 <head>영역에만 들어갈 수 있습니다.

<link>

link 태그는 다른 리소스와의 연결을 위해 사용합니다.

  • link 태그는 주로 외부 스타일시트나 대체문서 또는 작성자 지정하기 위해 사용합니다.
  • link 태그는 href, rel 속성은 반드시 존재해야 합니다.
link 태그의 구성요소 설명
href 링크의 목적지를 나타냅니다
media 어떤 매체에 적용되는지 나타냅니다.
rel 링크된 대상의 관계를 나타냅니다.
type MIME 타입을 나타냅니다.

<h1>

h1태그는 섹션, 문단의 제목을 나타냅니다.

  • h1 / h2/ h3/ h4/ h5/ h6 6개가 존재하며 적을 수록 글자의 크기가 커집니다.

<colgroup>

colgroup 태그는 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용합니다.

  • 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 유용하게 사용할 수 있습니다.
  • <colgroup> 요소 내부에 <col> 요소를 포함하여 열마다 각각 다른 스타일을 적용할 수도 있습니다.
  • <colgroup> 요소는 <table> 요소의 자식 요소로, 모든 caption 요소보다 뒤에 위치해야 하며 모든 thead, tbody, tfoot, tr 요소보다는 앞에 위치해야 합니다.

<div>

div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다.

  • div는 웹페이지에서 논리적 구분을 정의하는 태그입니다.
  • div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다.
  • 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다.

<span>

span 태그는 div 태그처럼 특별한 기능을 갖고있지 않고 CSS와 함께 쓰입니다.

  • div 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있습니다.
    이 둘의 차이를 쉽게 설명하자면, div는 줄 바꿈이 되지만, span은 줄 바꿈이 되지 않다는 점입니다.

<form>

form 태그는 서버에 정보를 제출하기 위한 대화형 컨트롤을 포함한 문서의 구획을 나타냅니다.

폼 속성을 이용하여 전송할 때 어디로 보내야 하는지 그리고 어떤 방법으로 보낼지 정합니다. 폼 속성은 다음과 같습니다.

  • action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다. 폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL
  • name : 폼을 식별하기 위한 이름을 지정합니다.
  • accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.
  • method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET 또는 POST)
  • autocomplete : 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타냅니다. 이 속성은 on 또는 off 두가지 값중 하나를 같습니다.
  • accept-charset : 서버가 받아들일 문자 인코딩의 형식을 지정합니다. 기본값은 특수 문자열 UNKNOWN이고 이 경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩입니다.
  • novalidate : 이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타냅니다.
  • target : 폼 요청을 전송한후 응답을 어떻게 받을것인지 지정합니다.

<fieldset>

fieldset 태그는 form 양식에서 관계된 요소들끼리 묶어주며, 관계 요소 주위에 박스를 그립니다.

  • fieldset 요소는 폼 요소들을 그룹화 하는데 사용하며, 해당 그룹의 이름은 legend 요소로 지어 집니다.
  • legend 요소는 fieldset의 첫번째 자식으로 사용해야 하며, 인라인 요소를 포함할 수 있습니다. 또한, fieldset 요소는 자식으로 fieldset 요소를 중첩할 수 도 있습니다.

<legend>

legend 태그는 fieldset 요소를 이용하여 그룹화한 범위의 캡션을 지정할 수 있습니다.

  • legend 요소sms fieldset 요소의 제목(LEGEND)을 표시합니다. fieldset 요소를 이용하여 여러 개의 컨트롤들을 묶었으면 이 묶음이 어떤 성격 또는 용도인지 알려줄 필요가 있으며, 이때 legend 요소를 사용합니다.
  • legend 태그와 fieldset 태그의 차이점이라면 fieldset은 기능적인 측면에서 동일 그룹을 컨트롤할 수 있다는 부분이라면.... legend 태그는 시각적으로 어떤 그룹인지 나타낼 수 있습니다.

<caption>

caption 태그는 테이블의 제목을 표현하기 위해 사용합니다.

  • table 요소는 단 하나 caption 요소만을 명시할 수 있으며, caption 요소는 언제나 table 요소 바로 다음에 위치해야 합니다.
  • caption 요소의 콘텐츠는 테이블 바로 위쪽에 가운데 정렬되어 표시되지만, CSS의 text-align이나 caption-side 속성을 사용하여 캡션의 위치나 정렬 방법 등을 변경할 수 있습니다.

<label>

label 태그는 폼의 양식에 이름 붙이는 태그입니다.

  • 주요 속성은 for 이고 label의 for의 값과 양식의 id의 값이 같으면 연결됩니다.
  • label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다
  • input 등 양식을 label로 감싸면, id와 for가 없이도 같은 결과를 얻을 수 있습니다.

<button>

button 태그는 누를 수 있는 단추로써, 누르거나 눌렀다 놓았을 때 이벤트를 발생시키도록 하는게 주된 목적으로 사용합니다.

  • URI를 연결하지 않고 단순하게 사용자 인터페이스만를 ‘조작‘하기 위한 버튼으로서 <button type="button"> 엘리먼트로 마크업 합니다.
  • type을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 합니다.
  • button 태그는 type 속성으로 표시하는데 그냥 버튼과 submit, reset이 있습니다. submit은 폼의 전송기능을 담당하고, reset은 폼을 초기화하는데 사용됩니다.
  • button 태그는 디자인적인 관점에서 input 요소와 달리 매우 자유로워서 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있고, <button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다.

<input>

input 태그는 사용자가 데이터를 입력할 수 있는 입력 영역을 지정하는 태그입니다.

  • form 요소 안에 사용되며 input은 닫는 태그가 없습니다.
  • label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다
  • input 등 양식을 label로 감싸면, id와 for가 없이도 같은 결과를 얻을 수 있습니다.
속성 설명
type 입력유형 설정
name 서버로 전달되는 이름(사용자 지정)
value input tag 초기값
pattem 사용자가 정의한 패턴의 값만 입력할 수 있도록 설정
required form양식 제출전 반드시 값이 있어야 함을 경고
readonly 읽기전용
placeholder 입력힌트
antocomplete 자동으로 입력완성, 속성값을 on으로 설정시 사용자의 입력 값을 자동으로 저장하여
다음에 입력할때 기존의 입력값을 바탕으로 자동완성기능이 실행됨
min / max 최소값 / 최대값
step min/max와 함께 자주 사용됨. 예를들어 step을 5로 설정할경우 5단위로 값이 변한다.
maxlength 최대길이
disabled disabled='disabled'방식으로 사용(input을 배활성화 시킨다)
onclick 클릭시 이벤트 발생
onchange 변동사항 발생시 이벤트 발생

<address>

address 태그는 HTML 문서에서 주소를 입력할 때 사용하는 태그입니다.

  • body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다.
  • article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다.
  • 기본 모양은 기울임꼴입니다.

<section>

section 태그는 일반적으로 문서의 콘텐츠 영역을 의미합니다.

  • 콘텐츠와 관련된 한 가지 주제 영역을 의미합니다.
  • section 요소는 문장이나 스타일링 요소가 아니기 때문에 편의나 영역을 위함이면 div 태그가 좋습니다.
  • section 요소는 제목이 없는 경우 섹션이라고 할 수 없기 때문에 제목을 제공해야 합니다.
  • section 요소는 일반적인 영역의 주제가 아니라면 구체적인 요소(article, aside, nav)를 대신 사용하는 것이 더 적절합니다.

<nav>

nav 태그는 웹 페이지 내에서 이동할 수 있는 네비게이션 링크 그룹입니다.

  • nav는 문서의 핵심적인 페이지의 메뉴 및 서브 메뉴를 사용합니다. 문서에서 주로 한 번만 사용합니다.
  • 문서에서 주로 한 번만 사용합니다.
  • 문서 안에 링크가 포함된 콘텐츠는 nav를 사용하지 않습니다.
  • nav는 핵심적인 네비게이션에 사용해야 하므로 푸터 내에 링크 그룹의 사용은 적절하지 않습니다.

<main>

main 태그는 웹문서의 주요 콘텐츠 영역을 나타낼 때 사용합니다.

  • main 태그는 웹 페이지에서 한번만 사용할 수 있으며, 접근성과 검색 영역 노출을 향상시킵니다.
  • article, aside, footer, header, nav의 하위 요소로 사용할 수 없습니다.

<aside>

aside 태그는 웹 문서의 메인 콘텐츠와 관련된 사이트 콘텐츠 영역을 나타냅니다.

  • 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 그룹화할 때 사용합니다.

<header>

header 태그는 웹 문서의 헤더 영역을 나타냅니다.

  • header 태그는 웹 페이지에 대한 소개, 네비게이션 영역, 테이블 영역, 검색 영역, 로고 영역을 포함하는 영역입니다.
  • header 태그에는 제목 태그가 포함될 수 있으며, 필수 조건은 아닙니다.
  • header는 섹션 콘텐츠가 아닌 그룹화하기 위한 요소이므로 section 요소를 포함 할 수 없습니다.

<footer>

footer 태그는 웹 문서의 푸터 영역을 나타냅니다.

  • footer 태그는 저작권 정보, 회사 정보, 관련 링크, 주소, 바닥글, 사이트 정보 등을 포함하는 콘텐츠 영역입니다.
  • footer는 섹션 콘텐츠가 아닌 그룹을 나타내는 요소이며, section, article, aside 등을 포함할 수 있습니다.
  •  

<article>

article 태그는 웹 문서의 독립적인 항목을 나타내는 콘텐츠를 의미합니다.

  • article 태그는 포럼, 신문기사, 잡지, 블로그 항목, 게시판 글 등의 독립적인 항목을 나타냅니다.
  • section은 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 콘텐츠입니다.
  • section 요소 안에는 article 요소를 쓸 수 있으며, article 요소안에도 section 요소를 쓸 수 있습니다.

<script>

script 태그는 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용합니다.

script 요소는 스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니다. 하지만 src 속성이 명시된 script 요소에는 스크립트 코드를 직접 명시해서는 안 됩니다.

참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있으며 이렇게 정의된 자바스크립트는 일반적으로 이미지 조정, 폼(form)에 대한 검증, 콘텐츠의 동적 변경 등에 사용됩니다.

  • async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안 스크립트가 실행됨.
  • async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.
  • async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.

<i>

i 태그는 특별한 이유로 평범한 글자와 구분하기 위해 사용됩니다.

HTML4에서 i 태그는 이탤릭체로 표현하기 위해 사용하였지만, HTML5에서 i 태그는 기술적인 구문, 언어, 사상, 생각 등에서 다른 텍스트와 구분하기 위해 사용합니다.

  • 다음 비교 태그에 적합한 의미가 없을 때 사용합니다.
  • 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b< 태그를 사용합니다.
  • 글씨를 강조하고 싶다면 <em> 태그를 사용합니다.
  • 글씨의 중요성을 강조하고 싶다면 <strong> 태그를 사용합니다.
  • 글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark< 태그를 사용합니다.
  • 글씨의 전문적인 용어를 정의할 때는 <dfn> 태그를 사용합니다.
  • 글씨를 위첨자로 표현하고 싶다면 <sup> 태그를 사용합니다.
  • 글씨를 아래첨자로 표현하고 싶다면 <sub> 태그를 사용합니다.
  • 글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u>태그를 사용합니다.

<viewport fit cover>

viewport-fit은 삽입된 동작을 제어할 수 있는 기존 voewport 메타 태그의 확장이며 viewport-fitiOS 11에서 사용할 수 있습니다.

  • viewport-fitis의 기본값은 auto 위의 자동 삽입 동작을 초래합니다. 해당 동작을 비활성화하고 화면을 전체 크기로 레이아웃하려면 페이지를 viewport-fit cover로 설정할 수 있습니다.
  • viewport fit cover는 중요 내용이 포함된 요소에 패딩을 선택적으로 적용하여 화면의 모양에 의해 가려지지 않도록 하는 것입니다. 이렇게 하면 모서리 센서 하우징 및 홈화면에 액세스하기 위한 표시기를 피하기 위해 동적으로 조정하면서 iphone X의 화면 공간을 최대한 활용하는 페이지가 생성됩니다.
  • iphone X 의 전체 너비의 가로 방향 탐색 막대가 있는 페이지에서 노치(컷아웃) 영역을 커버할 때 사용합니다.

viewport-fit cover 사용전 이미지

viewport-fit cover 사용후 이미지

<picture>

picture 태그는 img 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용합니다.

  • picture 요소는 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다.
  • picture 요소는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다.
  • picture 요소는 0개 이상의 source 요소와 하나의 img 요소로 구성됩니다.
  • 브라우저는 source 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 source 요소를 사용하고, 나머지 source 요소들은 무시합니다. 이 때 img 요소는 picture 요소의 자식 요소 중에서 가장 마지막에 위치해야 합니다. 이러한 img 요소는 picture 요소를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 source 요소가 모두 조건을 만족하지 못 할 경우 사용됩니다.

<time>

time 태그는 일반 텍스트에다가 날짜와 시간정보라는 것을 알려주는 태그역할을 합니다.

  • 웹표준을 지향하고 있는 HTML5를 지원하는 브라우저들은 이 time 태그를 통해서 텍스트가 날짜나 혹은 시간이라는 것을 알게 됩니다.
  • time 태그를 이용하면 날짜 정보, 시각 정보 혹은 날짜 정보와 시각 정보를 표현하였을 때 브라우저나 검색 엔진 및 장애인이 사용하는 보조 기술에 해당 데이터가 일시를 나타낸다는 것을 정확하게 알려줄 수 있습니다.
  • <time datetime="YYYY-MM-DDThh:mm:ssZ"> 형태로 표현합니다.

<meta name="Referrer" content="origin">

referrer는 문서에서 전송된 요청에 첨부된 HTTP 헤더의 참조자(Referer)를 제어합니다

속성에 대한 content 속성의 값

속성 설명
origin 문서의 origin을 전송합니다.
no-referrer HTTP Referrer header를 전송하지 않습니다.
no-referrer-when-downgrade 현재 페이지와 동일한 수준의 안전도를 가진(https→https) URLs의 참조자로 origin을 전송하나, 더 낮은 안전도 수준(https→http)의 URLs에 대한 참조자는 전송하지 않습니다. 이 값은 기본값입니다.
origin-when-crossorigin 동일한 origin의 요청에 대해서는 (매개변수가 제거된) 전체 URL을 전송하나 그렇지 않은 경우에 대해서는 origin만 전송합니다.
same-origin 동일 사이트 origin(same-site origins)의 요청에는 참조자를 전송하지만, cross-origin 요청에는 참조자 정보를 담지 않습니다.
strict-origin 목적지(destination)의 안전도 수준이 현재와 동일하거나 더 높은 수준인 경우(HTTPS-> HTTPS)에만 참조자로 문서의 origin을 전송하고 목적지의 안전도 수준이 더 낮은 경우(HTTPS->HTTP)에는 전송하지 않습니다.
strict-origin-when-cross-origin 동일한 origin의 요청이 수행될 때 전체 URL을 전송하되 목적지(destination)의 안전도 수준이 현재와 동일하거나 더 높은 수준인 경우(HTTPS-> HTTPS)에만 origin을 전송하고 목적지의 안전도 수준이 더 낮은 경우(HTTPS->HTTP)에는 헤더를 전송하지 않습니다.
unsafe-URL ame-origin 또는 cross-origin 요청에 대해 (매개변수가 제거된) 전체 URL을 전송합니다.

<meta name="referrer" contents="always">

 

  • 어떤 브라우저는 향후에는 없어질(deprecated) always, default 그리고 never 값을 참조자로 지원합니다.
  • 의 값을 document.write 또는 appendChild으로 설정하여 동적으로 삽입할 경우, 참조자의 작동을 예측할 수 없습니다.
  • 여러 정책이 서로 충돌할 경우에는 무참조자(no-referer) 정책이 적용됩니다.

<meta name="robots" content="index,nofollow">

index는 로봇이 본페이지 방문을 허용하는지, follow는 로봇이 본페이지의 링크세테이션을 기준으로 방문을 허용하는지 기준입니다.

meta name="robots"의 content 속성과 설명

속성 설명
all 색인 생성이나 게재에 대한 제한이 없습니다. 참고: 이 명령어는 기본값이므로 명시적으로 표시해도 아무 효과가 없습니다.
noindex 검색결과에 페이지를 표시하지 않으며 검색결과에 '저장된 페이지' 링크를 표시하지 않습니다.
nofollow 이 페이지의 링크를 따라가지 않습니다.
none noindex, nofollow와 같음
noarchive 검색결과에 '저장된 페이지' 링크를 표시하지 않습니다.
nosnippet 이 페이지에 대한 검색결과에 스니펫을 표시하지 않습니다.
noodp 이 페이지에 대해 표시된 제목이나 스니펫에 오픈 디렉토리 프로젝트(Open Directory project)의 메타데이터를 사용하지 않습니다.
notranslate 검색결과에 페이지의 번역을 제공하지 않습니다.
noimageindex 이 페이지의 이미지에 대한 색인을 생성하지 않습니다.
unavailable_after: [RFC-850 date/time] 지정된 날짜/시간 이후에 검색결과에 이 페이지를 표시하지 않습니다. 날짜/시간은 RFC 850 형식으로 지정해야 합니다.

반대로 인덱싱을 허용하기 위해서는 meta를 제거하거나( 기본값이 index, follow입니다.)

<meta name="robots" content="index" />
<meta name="robots" content="follow" />

< meta name="format-detection" content="telephone=no">

아이폰이나 아이패드나 혹은 블래베리라거나 자동적으로 전화번호나 이메일 주소를 감지하고 링크가 되어버리는 경우가 있는데, 이럴 경우 설정한 스타일이 먹지 않는다. 이럴 경우 meta 태그를 이용합니다.

 

(참고) TCP School

반응형

UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML

댓글
© 2019 Eun's