[HTML] 기본적인 태그들 정리

제목(Heading)

h1의 폰트 사이즈가 가장 크다.

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

<body>
	기본 문자 크기(16px)<br/>
	줄바꿈은 <b>자동</b>으로 되지 않는다.<br/>
	줄바꿈 <i>br태그</i> <br/>
	공백문자 또한             자동으로 되지 않는다.
	space는 1글자만 적용된다.	<br/>
	space는 ㅇ&nbsp;&nbsp;&nbsp;&nbsp;ㅇ 이렇게 사용
</body>

<br> : 줄바꿈

<hr> : 수평 가로 구분선

<b> , <strong>: 굵게

(strong은 텍스트를 굵게 해주면서 중요한 내용이라는 의미 포함)

<i>, <em> : 이탤릭체

(em은 이탤릭체로 변환하면서 중요한 내용이라는 의미 포함)

<del> : 텍스트 중앙에 가로줄

<ins> : 밑줄

엔티티(entity)

  : 공백

&It; : <

> : >

& : &

" : "

' : '

× : ×

÷ : ÷

<p> : 짧은 단락

띄어쓰기( ), 줄바꿈(<br>) 영향X

<pre>

안에 작성한 텍스트는 서식 그대로 표현됨 -> 띄어쓰기, 줄바꿈 모두 적용

 : 주석

comment를 작성하고 ctrl + space하면 자동 변환됨, 중첩 불가능

<a> : 텍스트, 단락, 이미지 등 다양한 요소에 사용할 수 있음

<a href="주소"> : 하이퍼링크

target : 링크를 어디에서 열지 명시

_blank : 새 창에서 오픈

_self : 현제 프레임에서 오픈(default)

<a href="http://www.naver.com">네이버</a>
<a href="http://www.naver.com" target="_blank">네이버</a>

html도 연결 가능

<a href="../파일명.html">이동</a>

title = "text" : 마우스 오버시 풍선 도움말 출력

객체 또는 a 태그 내에 작성 가능

<img/> : 이미지

src속성 : 이미지 경로와 파일명을 표시
width : 폭(px, %)
height : 높이(px, %)
alt : 이미지가 없을 때 대체문자로 나오는 글자
title : 객체에 마우스 오버시 나오는 풍선 도움말(a태그 안에 작성해도 됨)

<img src="../img/coco.jpg" width="200" height=250" alt="이미지가 표시되는 곳" title = "코코"/>

<id값 이용한 페이지 책갈피>

name으로도 기능 구현 가능

<!-- id를 의미하는 # 넘버사인 -->
1.<a href="#s1">html이란?</a><br/>
2.<a href="#s2">css란?</a><br/>
3.<a href="#s3">javascript란?</a><br/>
4.<a href="#s4">jquery란?</a>

1. <a id="s1">html이란?</a>
<p>문단태그</p><p>문단태그</p><p>문단태그</p><p>문단태그</p><p>문단태그</p><p>문단태그</p>
2. <a id="s2">css란?</a>
<p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p><p>cascading style sheet</p>
3. <a id="s3">javascript란?</a>
<p>자바스크립트</p><p>자바스크립트</p><p>자바스크립트</p><p>자바스크립트</p><p>자바스크립트</p><p>자바스크립트</p>
4. <a id="s4">jquery란?</a>
<p>javascript 라이브러리</p><p>javascript 라이브러리</p><p>javascript 라이브러리</p><p>javascript 라이브러리</p>

html이란? 텍스트를 누르면 해당하는 위치로 감

<!-- 파일의 특성에 따라 실행 or 다운로드됨 download 넣어주면 다운로드 된다.-->
<a href="../etc/파일1.png" download>이미지 파일</a>
<a href="../etc/파일2.txt">txt 파일</a>
<a href="../etc/파일3.pdf">pdf 파일</a>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<h1>목록태그(ul(순서 없는 목록 태그), ol(순서 있는 목록 태그))</h1>
<pre>
	type 속성 : disk(채워진 원),  circle(빈 원), square(채워진 사각형)
</pre>
<ul type="square">
	<li>자바</li>
	<li>html</li>
	<li>javascript</li>
	<li>jquery</li>
</ul>
<pre>
	type 속성 : 1, a, A, i, I
</pre>
<ol type="a">
	<li>자바</li>
	<li>html</li>
	<li>javascript</li>
	<li>jquery</li>
</ol>
</body>
</html>

'Frontend > HTML | CSS' 카테고리의 다른 글

네이트 로그인 페이지 목업 (0)	2022.02.06
[HTML] div (0)	2022.02.05
[HTML] form (0)	2022.02.04
[HTML] map, audio, movie 태그 (0)	2022.02.04
[HTML] table, iframe 태그 (0)	2022.02.03

Coding diary

[HTML] 기본적인 태그들 정리

'Frontend > HTML | CSS' 카테고리의 다른 글

티스토리툴바

[HTML] 기본적인 태그들 정리

'Frontend > HTML | CSS' 카테고리의 다른 글

'Frontend/HTML | CSS' Related Articles

티스토리툴바