[HTML] 기본 태그 총 정리

HTML의 기본적인 태그들에 대해 정리해 보았습니다.

전반적인 구조

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>문서 제목</title>
  </head>
  <body>
      <p>메인 콘텐츠</p>
  </body>
</html>

텍스트 요소

<제목, 단락>

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<p>첫 번째 줄의 단락</p>
<br>   <!--줄바꿈-->
<p>두 번째 줄의 단락</p>
<hr>   <!--수평 가로 구분선-->

<서식>

<b>굵은 글씨</b>
<strong>굵은 글씨</strong>
<i>이탤릭체</i>
<mark>하이라이팅</mark>
<del>삭제효과</del>
<ins>밑줄 긋기</ins>

<blockquote>인용구</blockquote>
<!--abbr태그 위에 마우스를 올리면 title속성에 명시해준 용어의 뜻이 나타납니다-->
<abbr title="As soon as possible">ASAP</abbr>
<address>
   우리집 주소<br>
   는 여기
</address>

기본 요소

<스타일>

<h1 style="background-color:white">
    배경색 흰색으로 변경
</h1>
<h1 style="color:red">
    글자색 빨간색으로 변경
</h1>
<h1 style="font-size:250%">
    글자 크기 250%로 변경
</h1>
<h1 style="text-align:center">
    문단 중앙 정렬
</h1>
<h1 style="background-color:white; color:red; font-size:250%; text-align:center">
    스타일링 한번에 적용
</h1>

<!--색상을 적용하는 3가지 방법-->
<h1 style="color:silver">색상 이름</h1>
<h1 style="color:rgb(0,128,128)">RGB 색상값</h1>
<h1 style="color:#FF0000">16진수 색상값</h1>

<body background="/examples/images/img_background_good.png">
     HTML 요소의 배경을 이미지(image)로 설정
</body>

<링크>

<!--링크와 target 속성-->
<h2><a href="/html/intro" target="_blank">새 창에서 오픈</a></h2>
<h2><a href="/html/intro" target="_self">현재 창에서 오픈</a></h2>

<!--링크의 상태-->
<style>
    a:link    { color: teal; }   <!--한 번도 방문한 적이 없는 상태-->
    a:visited { color: maroon; text-decoration: none }   <!--한 번이라도 방문한 적이 있는 상태-->
    a:hover   { color: yellow; text-decoration: none }  <!--마우스를 올려 놓았을 때-->
    a:active  { color: red; text-decoration: none }   <!--마우스를 누르고 있을 때-->
</style>

<!--name속성값을 이용해 같은 페이지 내 이동하고 싶은 곳으로 이동합니다-->
<a href="#bookmark"><p>제목 3으로 이동</p></a>
    ...
<h3><a name="bookmark"></a>제목 3</h3>

<이미지>

<img src="이미지 주소" alt="이미지가 없을 때 나타낼 대체문자열">

<!--이미지 크기 설정-->
<img src="주소" alt="html size" width="320" height="214">
<img src="주소" alt="style size" style="width:320px; height:214px">

<!--border속성으로 테두리 설정-->
<img src="주소" alt="이미지 테두리" style="border: 3px solid black">

<!--이미지에 링크 설정-->
<a href="/html/intro" target="_blank">
    <img src="example.png" alt="flag" style="width:320px; height:214px">
</a>

<!--이미지 맵-->
<!--img 태그의 usemap속성을 map태그의 name속성과 연결하면 이미지와 맵 사이의 관계가 설정됩니다-->
<!--이미지의 일부를 클릭하면 설정해 놓은 area에 따라 각기 다른 링크로 이동합니다-->
<img src="이미지파일" alt="버튼" usemap="#button" style="width:320px; height:240px" />
<map name="button">
    <area shape="rect" coords="90,60,180,130" alt="파랑"
        href="링크1">
    <area shape="rect" coords="210,200,70,130" alt="빨강"
        href="링크2">
</map>

<리스트>

<!--순서 없는 리스트-->
<ul>			<!--style="list-style-type: circle 또는 square"-->
    <li>사과</li>
    <li>포도</li>
</ul>

<!--순서 있는 리스트-->
<ol>			<!--style="list-style-type: upper-alpha 또는 lower-alpha"-->
    <li>사과</li>
    <li>포도</li>
</ol>

<!--정의 리스트. dt에는 용어 이름, dd에는 용어에 대한 정의-->
<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

<테이블>

tr태그로 테이블의 행을 구별하고 th로 컬럼 이름을 나타내며 td로 각각의 셀을 나누어 줍니다.

<!--기본적으로 테두리가 표시되지 않기 때문에 이렇게 테두리를 표시해 줍니다-->
<!--border-collapse: collapse로 테이블의 테두리들을 한 줄로 표시할 수 있습니다-->
<style>
    table, th, td {	border: 1px solid black; border-collapse: collapse }
</style>

<!--caption으로 테이블의 제목을 붙일 수 있습니다-->
<table style="width:100%">
<caption>상품 종류</caption>
<tr>
    <th>시계</th>
    <th>코트</th>
    <th>신발</th>		
</tr>
<tr>
    <td>고급시계</td>
    <td>롱코트</td>		
    <td>운동화</td>
</tr>
<tr>
    <td>저급시계</td>
    <td>숏코트</td>		
    <td>슬리퍼</td>
</tr>
</table>

공간 분할

<블록, 인라인>

block : display 속성값이 block인 요소는 언제나 새로운 줄에서 시작하며, 해당 라인 전체를 차지합니다.
inline : display 속성값이 inline인 요소는 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지합니다.

<!--block : <p>, <div>, <h>, <ul>, <ol>, <form>요소 등이 있으며, 대표적으로 <div>가 사용됩니다-->
<div>
    <h1>제목</h1>
    <p>내용</p>
</div>

<!--<span>, <a>, <img>요소 등이 있으며, 텍스트의 특정 부분을 묶는 데 <span>가 자주 사용됩니다-->
<span>텍스트의 일부분</span>

<프레임>

iframe 요소를 이용하면 해당 웹 페이지 안에 또 다른 하나의 웹 페이지를 삽입할 수 있습니다.

<!--border속성으로 테두리 설정 가능-->
<iframe src="주소" style="width:100%; height:300px; border: 3px dashed grey">
</iframe>

<!--iframe 내부 요소 페이지 변경하기-->
<!--a태그의 target속성과 iframe태그의 name속성을 연결하면 링크를 통해 iframe 내부 요소를 변경할 수 있습니다-->
<iframe src="주소1" name="frame_target" style="width:100%; height:400px;"></iframe>
    <a href="주소2" target="frame_target">다른 사이트로 가기 =></a>

입력 양식

<폼>

사용자로부터 입력을 받을 수 있는 요소입니다.

<form action="처리할페이지주소" method="요소전달방식(get또는post)">
    <input type="text" name="search"><br>    <!--텍스트 입력-->
    <input type="password" name="password"><br>    <!--비밀번호 입력-->
    
    <!--라디오 버튼-->
    <!--여러 옵션들 중 하나의 옵션만 입력받을 수 있고, name속성을 통일시켜줘야 합니다-->
    <!--checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있습니다-->
    <input type="radio" name="coding" value="html" checked> HTML <br>
    <input type="radio" name="coding" value="css"> CSS <br>
    <input type="radio" name="coding" value="javascript"> JS <br>
    
    <!--체크 박스-->
    <!--여러 옵션들을 입력받을 수 있고, name속성을 통일시켜줘야 합니다-->
    <!--disabled속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있습니다-->
    <input type="checkbox" name="coding" value="html" checked> HTML <br>
    <input type="checkbox" name="coding" value="css"> CSS <br>
    <input type="checkbox" name="coding" value="javascript"> JS <br>
    
    <!--파일 선택-->
    <!--accept속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있습니다-->
    <input type="file" name="upload_file" accept="image/*">
    
    <!--선택 입력-->
    <!--여러 개의 옵션이 드롭다운 리스트로 되어 있으며, 그중 하나의 option을 입력받습니다-->
    <!--selected속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있습니다-->
    <select name="fruit">
        <option value="apple"> 사과
        <option value="orange" selected> 포도
        <option value="strawberry"> 딸기
    </select>
    
    <textarea name="message" rows="5" cols="30"></textarea>    <!--문장 입력-->
    <button type="button" onclick="alert('버튼을 클릭하셨군요!')">버튼</button>    <!--버튼-->
    <input type="submit" value="전송">    <!--전송 버튼-->
</form>

<필드셋>

form 요소와 관련된 데이터들을 하나의 구분선 안에 묶어주며, fieldset 요소 안에서만 사용할 수 있는 legend 요소는 fieldset 요소의 제목을 나타냅니다.

<form action="처리할페이지주소">
    <fieldset>
        <legend>입력 양식</legend>
        이름 : <br>
        <input type="text" name="username"><br>
        이메일 : <br>
        <input type="text" name="email"><br><br>
        <input type="submit" value="전송">
    </fieldset>
</form>

<!--value속성은 input요소의 입력 필드에 나타나는 초깃값을 설정합니다-->
<input type="text" name="department" value="개발팀">

<!--placeholder속성은 input 요소에 입력되어야 할 값에 대한 힌트를 제공합니다-->
<input type="text" name="username" placeholder="홍길동">

<!--readonly속성은 사용자가 입력 필드를 볼 수는 있으나 수정할 수는 없도록 설정합니다-->
<!--disabled와는 달리 전송버튼을 누르면 서버로 전송됩니다-->
<input type="text" name="department" value="개발팀" readonly>

<!--maxlength속성은 입력 필드에 입력할 수 있는 문자의 최대 길이를 설정합니다-->
<input type="text" name="student_name" value="홍길동" maxlength="10">

<!--입력 필드에 보여지는 문자의 최대 개수를 설정합니다-->
<input type="text" name="student_name" value="홍길동" size="30">

<기타 input요소의 타입>

<!--숫자 입력. 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생깁니다-->
<input type="number" name="favnum" min="1" max="9">
<!--입력 범위 지정. 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해줍니다-->
0 <input type="range" name="favnum" min="1" max="9"> 9

<input type="color" name="favcolor" value="#CC6600">    <!--색상 입력-->

<input type="date" name="theday" min="1977-01-01" max="2020-12-31">    <!--날짜 입력-->
<input type="time" name="birthtime">    <!--시간 입력-->
<input type="datetime-local" name="starttime">    <!--날짜와 시간 입력-->

<input type="month" name="birthmonth">    <!--연도와 월 입력-->
<input type="week" name="nthweek">    <!--연도와 주 입력-->
 
<input type="email" name="email">    <!--이메일 입력-->
<input type="url" name="url">    <!--url주소 입력-->
<input type="tel" name="tel">    <!--전화번호 입력-->
<input type="search" name="keyword">    <!--검색어 입력-->

의미 요소(sementic elements)

의미 요소란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.

<header></header>
<nav></nav>
<main>
    <article>독립된 기사1</article>
    <article>독립된 기사2</article>
</main>
<section>
	<article>독립된 기사3</article>
</section>
<aside>
    <figure>
        <img src="이미지주소">
        <figcaption>그림에 대한 설명</figcaption>
    </figure>
</aside>
<footer></fotter>

<header> : 문서에 대한 헤더를 정의합니다. 헤더란 도입부에 해당하는 콘텐츠를 가지고 있는 부분을 의미합니다.
<nav> : 문서 사이를 탐색할 수 있는 링크의 집합을 정의합니다.
<main> : 문서의 메인 콘텐츠를 정의합니다.
<section> : 문서에서 섹션 부분을 정의합니다. 섹션이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미합니다.
<article> : 문서에서 독립적인 하나의 기사 부분을 정의합니다. article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 합니다.
<aside> : 문서에서 페이지 부분 이외의 콘텐츠를 정의합니다.
<figure> : 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠를 정의합니다.
<figcaption> : figure요소를 위한 캡션을 정의합니다.

멀티미디어

<비디오>

웹 브라우저는 여러 개의 source태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다.

<video style="width:576; height:360" controls>
    <source src="파일 주소" type="video/mp4">
    <source src="파일 주소" type="video/ogg">
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

controls 속성은 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다.

controls autoplay : 웹 페이지가 로드될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정합니다.
controls loop : 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생합니다.

<오디오>

오디오도 비디오랑 마찬가지로 구조가 동일하고, 같은 controls속성을 가집니다.

<audio controls autoplay>
    <source src="파일 주소" type="audio/ogg">
    <source src="파일 주소" type="audio/mp3">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

참고 자료

코딩의 시작, TCP School : http://tcpschool.com/html/intro
w3schools : https://www.w3schools.com/html/html5_semantic_elements.asp

'프론트엔드 > HTML&CSS' 카테고리의 다른 글

[CSS] CSS 중급 (2) (0)	2021.10.27
[CSS] CSS 중급 (1) (0)	2021.10.23
[CSS] CSS 기초 (0)	2021.10.20

성장하는 개발 일기

[HTML] 기본 태그 총 정리

전반적인 구조

텍스트 요소

기본 요소

공간 분할

입력 양식

의미 요소(sementic elements)

멀티미디어

참고 자료

'프론트엔드 > HTML&CSS' 카테고리의 다른 글

티스토리툴바

[HTML] 기본 태그 총 정리

전반적인 구조

텍스트 요소

기본 요소

공간 분할

입력 양식

의미 요소(sementic elements)

멀티미디어

참고 자료

'프론트엔드 > HTML&CSS' 카테고리의 다른 글

관련글

티스토리툴바