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>
단락을 구분합니다. 자동 줄바꿈
연습입니다.
</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은 줄바꿈 안된다.
'Coding > HTML' 카테고리의 다른 글
| input 태그 (0) | 2022.04.04 |
|---|---|
| 멀티미디어 활용(img/audio/video) (0) | 2022.04.04 |
| Tomcat 다운로드 및 설치/ 기본 세팅 (0) | 2022.04.04 |