[HTML] 태그 속성과 태그 종류

프론트/HTML|CSS

[HTML] 태그 속성과 태그 종류 < >

원코딩 2022. 7. 5. 20:54

HTML 문법에서 생명은 태그 사용이다.

모든 명령는 태그를 이용하기 때문에

태그 사용법을 모르면서 HTML을 안다고 할 수 없다.

태그의 속성

1.여는 태그와 닫는 태그는 쌍으로 만들어 진다.

여는 태그	<태그명>
닫는태그	</태그명>
독립 태그(Empty) _단독으로 사용 가능하다.	<태그명 />

2. 태그 속성은 두가지이다.

block 속성 : 다음줄에 출력된다. 세로출력

inline 속성 : 옆으로 출력된다. 가로출력 ( enter없이 )

태그의 종류

1. 문자관련 태그

html에서는 무조건 한줄 출력이다. 문단을 나누기 위해선 <pre> 등을 이용해야함

<hn> : 제목을 설정 bold(굵은글씨) & br(다음 줄)

<h1> ~~ <h6> 숫자가 커질수록 글자의 크기는 작아진다.

<body>
	<h1>HTML5 H1:태그는 소문자로만 사용</h1>
	<h2>HTML5 H1:태그는 소문자로만 사용</h2>
	<h3>HTML5 H1:태그는 소문자로만 사용</h3>
	<h4>HTML5 H1:태그는 소문자로만 사용</h4>
</body>

<b> : bold체 굵은 글자

<strong> : 강조체

<i> : 이탤릭체

<small> : 작은 글자

<sub> : 아래첨자

<sup> : 윗첨자

<mark> : 형광펜 칠하기

<marquee> : 전광판 효과

<blockquote> : 인용구 ( 따로 빼기)

<font> : 일반 문자

지금은 강조하기 싫고 <b>지금은 강조할거야</b> 다시 강조안해.
<i>이탤릭체이탤릭체<mark>이탤릭체</mark>이탤릭체이탤릭체이탤릭체이탤릭체</i><br>
유튜브 채널에 마지막으로 영상이  <blockquote>마지막으로 영상이</blockquote>마지막으로 영상이
이를 변형해 한국에서 쓰이는이를 변형해 한국에서 쓰이는<sup style="color:red">new</sup>영상이<br>

<pre> : 문단이 나뉘어진 그대로 화면에 출력하게 해준다.

2. 화면 이동 태그 - link

<a> : 원하는 파일로 이동 <a href="http:// ~~"> </a>

target="_blank" : 새로운 창에서 띄우기

target="_self" (기본값) : 현재 창에서 띄우기

<a href="http://www.naver.com" target="_blank">NAVER</a>&nbsp;
<a href="http://www.daum.net" target="_self">Daum</a>&nbsp;

<form> : 회원 정보 등을 입력 후 데이터를 어딘가로 전송할 때 폼 태그 사용

3. 목록출력 태그

<ul>: 순서 없이 출력 / 메뉴에서 사용

<ol>: 순서 있는 출력

<dl>: 순서 없이 출력

<table>: 순서 없이 출력

	<ul>
		<li>Java</li>
		<li>Oracle</li>
		<li>Java</li>
		<li>Oracle</li>
	</ul>
	<hr>
	<ol>
		<li>Java</li>
		<li>Oracle</li>
			<li>Java</li>
		<li>Oracle</li>
	</ol>
	<hr>
	<dl>
		<dt>악이고야</dt>
		<dd>하이고야</dd>
		<dt>아이고야</dt>
		<dd>아이고야</dd>
		<dt>아이구야</dt>
		<dd>아니고야</dd>
	</dl>

3. 이미지 태그

<img>

이미지에 링크를 삽입하고 싶다면 아래와 같이 <a>태그를 앞뒤로 사용하자.

4. 라인선 태그

<hr>

5. 입력란 태그

<input type=''> : 한 줄 입력할 때

type = "text"

type = "password"

type = "file"

type = "button" , radio, checkbox , submit(전송버튼) , reset(초기화). image

type = "hidden" 데이터를 감출 때

type = "number" 숫자만 나올 때

type = "date" 달력 출력 할 때

<textarea> : 여러줄 입력할 때

6. 단락 태그 - 닫는 태그는 없다. ( 문장 끝에 사용 )

<p> : 단락의 마지막에 사용한다. 2줄 enter

<br> : new Line 다음 줄에서 출력한다. 1줄 enter

<hr> : 라인 선을 그려준다.

7. 화면분할 태그

<span> , <div>

8. 기타

  > " " 공백

HTML의 구조

<!DOCTYPE html>
<html>
	<head>
		<script>자바스크립트</script>
		<style>CSS</style>
		<meta charset="UTF-8">
		<title>제목</title>
	</head>
	<body>
		
	
	</body>
</html>

<!DOCTYPE html>

HTML5 문서를 알려주는 태그이다.

<head>

설정파일이 들어간다. 자바스크립트 CSS 등, 화면에서 출력되는 부분이 아니다.

<meta charset="UTF-8">

한글변환

<script>

자바 스크립트

<style>

CSS

<title>

제목

<body>

브라우저 화면에 출력되는 부분이다.

이상으로 태그 사용법에을 알아보았다.

저작자표시

'프론트 > HTML|CSS' 카테고리의 다른 글

[HTML/CSS] text 상자 데이터 > 강제 입력 받는 법 (0)	2022.07.21
[CSS] 선택자의 종류와 사용법 (0)	2022.07.12
[CSS] CSS 정의와 종류 (외부 CSS, 내부 CSS, 인라인 CSS) (0)	2022.07.07
[HTML/CSS] 박스 속성 margin과 padding 총정리 (0)	2022.07.06
[HTML] 브라우저 html 이클립스 작성법 / 웹 환경 이해하기 (0)	2022.07.04

현재글[HTML] 태그 속성과 태그 종류 < >

코딩하는 동그리