HTML 태그 정리

2019. 4. 18. 16:50Develop/Html & CSS

<head> 안에 들어가는 태그

 

<meta>

문서의 키워드, 제목, 요약을 나타내는 태그로 활용

 

<title>

문서의 제목을 나타내는 태그로 활용

<title>NAVER</title>

 

<link>

CSS 파일을 연결할 때 사용하는 태그

<link href="/style.css" rel="stylesheet" type="text/css"/>

 

<style>

html 문서안에서 css를 그대로 사용할 때 사용하는 태그

<style type="text/css">
	h1{margin:0; padding:0;}
</style>

 

<stript>

js를 불러오는 태그

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<body> 안에 들어가는 태그

 

제목 태그 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<h1>Html</h1>
<h2>Html</h2>
<h3>Html</h3>
<h4>Html</h4>
<h5>Html</h5>
<h6>Html</h6>

Html

Html

Html

Html

Html
Html

 

<p>

문단 태그로 텍스트를 감싸는 태그

<p>문단 태그입니다</p>

 

<pre>

형식화된 텍스트를 나타내는 태그

띄어쓰기, 들여쓰기, 줄바꿈 등이 그대로 표시됨

<pre>
pre 태그입니다.
	pre 태그입니다.
</pre>
pre 태그입니다.
	pre 태그입니다.

 

<br>

줄 바꿈 태그

br태그입니다.<br>
br태그입니다.<br/>

br태그입니다.
br태그입니다.

 

<hr>

수평선을 그리는 태그

<hr>

 

<strong>

강조 태그로 글자를 굵게 표시해 줌

<p>스트롱<strong>태그</strong>입니다.</p>

스트롱태그입니다.

 

<em>

강조 태그로 글자를 기울게 표시해 줌

<p>이엠<em>태그</em>입니다.</p>

이엠태그입니다.

 

<a>

하이퍼링크 태그

<a href="www.naver.com">네이버 바로가기</a>

 

<img>

이미지 출력 태그

<img src="/images/ex.jpg">

 

<ul>, <ol>, <li>

목록 태그

<ul>
	<li>항목1</li>
    <li>항목2</li>
</ul>

 

<ol>
	<li>항목1</li>
    <li>항목2</li>
</ol>

 

<div>

레이아웃 태그

html5 부터 <header>, <article>, <footer>, <nav>, <aside> 등을 사용함.

<div class"wrap">전체 레이아웃</div>

 

특수 문자

표현 문자 문자표현 문자 설명
스페이스(space) &nbsp 공란
& &amp; 엠퍼샌드
< &lt; 보다 작은
= - 등호
> &gt; 보다 큰
&copy; 저작권 표시

<table>

표를 만드는 태그

행은 <tr> 셀은 <td>로 나타냄

<table summary="광운대학교 컴공과 성적표">
	<caption>이 테이블은 성적표입니다.</caption>
    
    <tr>
    	<th>이름</th>
        <th>성적</th>
    </tr>
    <tr>
    	<td>홍길동</td>
        <td>A</td>
    </tr>
    <tr>
    	<td>김길동</td>
        <td>B</td>
    </tr>
    
</table>

 

이 테이블은 성적표입니다.
이름 성적
홍길동 A
김길동 B

 

<form>

action과 method  속성을 가지고 있다.

 

<input>

타입에 따라 다양하게 나타나게 된다.

<form>
	<input type="text" value="text> <br>
    <input type="password" value="password"> <br>
    <input type="button" value="button"> <br>
    <input type="submit" value="submit"> <br>
    <input type="date"> <br>
    <input type="radio" value="radio">radio <br>
    <input type="checkbox" value="checkbox">checkbox <br>
    <input type="file"> <br>
    <input type="search" value="search"> <br>
    <input type="hidden" value="hidden"> <br>
</form>





radio
checkbox


 

<textarea>

긴 내용을 입력하는 플레이스 홀더 태그

<textarea name="contents" cols="40" rows="10">여기에 글을 입력</textarea>

 

<select>

셀렉트 박스를 출력해주는 태그

<select name="score">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>