2019. 4. 18. 16:50ㆍDevelop/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) |   | 공란 |
& | & | 엠퍼샌드 |
< | < | 보다 작은 |
= | - | 등호 |
> | > | 보다 큰 |
ⓒ | © | 저작권 표시 |
<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>
<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>