HTML 의 이해 - HTML 의 구조와 기본태그(h/font/ul/ol)

Today

Total

Recent Comments

Recent Posts

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

관리 메뉴

💻

HTML 의 이해 - HTML 의 구조와 기본태그(h/font/ul/ol) 본문

KITRI/HTML

HTML 의 이해 - HTML 의 구조와 기본태그(h/font/ul/ol)

또효니 2020. 5. 27. 11:33

HTML(Hyper Text Markup Language) 이란 ?

1) W3C사에서 권고안으로 개발되었다. www.w3schools.com

2) HTML은 태그와 텍스트로 구성

3) HTML태그는 기능적역할(-> css한테 뺏김)과 구분자역할(-> xml한테 뺏김)로 나눈다.
4) 초창기에는 화면에 보여주는 것에 초점을 맞추었는데 현재는 데이터초점으로 맞춘다.

HTML 의 구조

- html 안에는 헤더(head) 와 바디(body) 로 이루어져있다.

- meta 태그는 html 의 문서 안에서 설정에 관련한 정보를 가지고 있다.

- 태그는 여는 태그와 닫는 태그가 있다.

- 태그 안에는 텍스트나 태그가 들어간다.

- 태그는 속성으로 구성되어있다. 속성(아래 그림에서는 name, content...)은 키와 값을 가진다.(setter)

예제 1) 구조

예제 2) 글꼴

ip주소:port번호/프로젝트이름/폴더이름/파일명 (URL)

-> (ip주소:port번호) DNS서버에 등록시키면 도메인을 받을 수 있다.

[참고] 16진수 색상표

https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=%EC%83%89%EC%83%81%ED%91%9C

색상표 : 네이버 통합검색

'색상표'의 네이버 통합검색 결과입니다.

search.naver.com

Font는 글꼴을 꾸며주는 역할, 사이즈 색상 글씨체를 설정할 수 있다.

하지만 HTML5에서는 지원되지 않고, CSS에서 사용하는 것으로 바뀌었다.

줄바꿈이 된다. - block

줄바꿈이 안된다. - inline

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글꼴 예제</title>
</head>
<body>
	<!-- h1 ~ h6/글꼴 크기를 조절, 자동 줄바꿈이 된다. -->
	<h3>글꼴 기능을 제공하는 태그들...</h3>
	<h1>H태그에서 가장 글꼴이 크다</h1>
	<h6>H태그에서 가장 글꼴이 작다</h6>
	
	<h3>Font 태그는 HTML5에서 더이상 지원하지 않는다.</h3>
	
	<font size="5" color="#FFD9FA" face="궁서체">
		점심시간입니다.
	</font>
	
	<h3>글꼴서식</h3>
	<b>b태그 기능은 굵게</b><br/><br/>
	<i>i태그는 이탤릭체</i><br/>
	
	SUB태그 <sub>아래첨자</sub><br/>
	<sup>위첨자</sup>SUP 태그<br/>
	
	<ins>밑줄</ins><br/>
	<del>취소</del><br/>
	
	<small>작은글꼴</small><br/>
	<strong>강조</strong><br/>
	<mark>음영(형광펜 효과 내기)</mark><br/>
</body>
</html>

예제 3) 단락

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록과 문단</title>
</head>
<body>
	<p>
		단락을 구분합니다. 자동  &nbsp;&nbsp;&nbsp;&nbsp;줄바꿈
		연습입니다.
	</p>
	<pre>
		단락을 구분합니다. 자동          줄바꿈
		연습입니다.
	</pre>
	<br/><br/>
	
	<h3>순서가 없는 목록</h3>
	<ul>
		<li>서울</li>
		<li>경기</li>
		<li>충청</li>
		<li>전라</li>
		<li>강원</li>
	</ul>
	
	<h3>순서가 없는 목록</h3>
	<ul style="list-style-type: none;">
		<li>서울</li>
		<li>경기</li>
		<li>충청</li>
		<li>전라</li>
		<li>강원</li>
	</ul>
	
	<h3>순서가 있는 목록</h3>
	<ol>
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
	</ol>
	
	<h3>순서가 있는 목록</h3>
	<ol start="100">
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
	</ol>
	
	<h3>순서가 있는 목록</h3>
	<ol type="i">
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
		<li>MENU</li>
	</ol>
	
	<h3>대분류/소분류</h3>
	<dl>
		<dt>메뉴리스트</dt>
		<dd>MENU</dd>
		<dd>MENU</dd>
		<dd>MENU</dd>
		<dd>MENU</dd>
		
		<dt>지역리스트</dt>
		<dd>서울</dd>
		<dd>경기</dd>
		<dd>충청</dd>
	</dl>
	
	<!-- DIV, SPAN / Layout 사용시 많이 쓴다. -->
	<div>
		<div>BLOCK</div>
		<div>BLOCK</div>
	</div>
	
	<span>INLINE</span>
	<span>INLINE</span>
</body>
</html>

<div><span>태그는 기능적 역할이 없다.

div는 줄바꿈이 되고, span은 줄바꿈 안된다.

'KITRI > HTML' 카테고리의 다른 글

HTML 의 이해 - 그 외 태그들(select/form/table) (0)	2020.05.28
HTML 의 이해 - input 태그 (0)	2020.05.27
HTML 의 이해 - 멀티미디어 활용(img/audio/video) (0)	2020.05.27
HTML 의 이해 - Tomcat 다운로드 및 설치/ 기본 세팅 (0)	2020.05.27

'KITRI/HTML' Related Articles

Comments

💻

HTML 의 이해 - HTML 의 구조와 기본태그(h/font/ul/ol) 본문

HTML 의 이해 - HTML 의 구조와 기본태그(h/font/ul/ol)

'KITRI > HTML' 카테고리의 다른 글

티스토리툴바