HTML
HTML이란 Hyper Text Markup Language의 약자로, 웹 페이지를 위한 마크업 언어이다.
제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라, 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
Markup이란?
마크업은 문서 및 데이터의 구조를 표현하는 것이다. 문서의 일부를 태그 문자열로 둘러싸 문장의 구조, 수식정보를 표현하며, 대표적인 Markup언어로 HTML, XML, XHTML가 있다.
HTML의 구조
<!DOCTYPE html>
<html>
<head>
<title> 제목 </title>
</head>
<body>
<br>
문서 본문
<br>
</body>
</html>HTML은 아래의 3개 영역으로 구성되어있다.
1. DTD 선언(Document Type Definition)
문서의 타입을 정의한다.
2. 헤더영역 <head>~</head>
해당 문서에 대한 정보인 메타데이터의 집합을 정의할 때 사용한다.
<title> / <style> / <base> / <link> / <meta> / <script> / <noscript> 같은 요소들은 head에 포함된다.
3. 본문 영역 <body>~</body>
문서의 본문 내용이다. 텍스트, 하이퍼링크, 이미지 등의 컨텐츠를 포함하며, 문서에는 단 하나의 <body>요소를 정의할 수 있다.
HTML 자주쓰는 태그
| <!DOCTYPE> | 문서의 유형 선언 ex) <!DOCTYPE html> |
| <html> | 문서의 시작과 끝을 <html> , </html> 로 나타냄 |
| <head> | 헤더 영역 <title> </title> : 문서 제목 <meta>: 문서 인코딩 정보 및 문서 키워드, 요약 정보 |
| <body> | 문서의 본문 내용. <body>, </body> 로 나타냄 |
| <h> | 제목. <h1>~<h6> 까지 있으며, 1에서 6으로 갈수록 글씨의 크기가 작아진다. <h1> 제목 </h1> <h2> 제목 </h2> <h3> 제목 </h3> |
| <p> | 단락 <p> 단락 </p> <p> 단락 </p> |
| <br> | 줄바꿈 표기 |
| <div> , <span> | 아무 의미없음. 컨텐츠를 어떤 의미에 따라 묶어 쓸때 정의 <div>와 <span>의 차이: <div>-줄바꿈 있음, <span>- 줄바꿈 없음 |
| <a> | HTML 링크 정의. href: 링크의 목적지 지정 ex) <a href="연결할 링크의 경로", target="self", title="링크 설명"> 내용 </a> * href="#" 인 경우는 실제로는 연결되지않는, 널 링크(null link) <a> 속성값 1. target: 새 창or 새 탭에서 링크 열 때 사용 _blank : 새 창 or 새 탭 _self: 현재 창 or 현재 탭 _parent: 현재 화면 불러낸 부모 탭/창( 없으면 현재 탭/창 ) _top: 최상위 탭/창, 없으면 현재 탭/창 2. title: 링크의 툴팁 표시( 커서 올렸을때 나오는 설명) 3. id: 같은 페이지 안에서 이동할 때 사용 이동하고 싶은 위치마다 id속성을 이용하여 앵커 생성(각각 다른 이름으로 지정) 사용은 이름을 붙인 앵커들을 href 속성으로 연결 ex) < a id="앵커 이름">내용</a> < a href="앵커 이름">내용</a> |
| <img> | HTML 이미지 정의 ex) <img src="example.jpg" alt="hi.com" width="400" height="300"> |
| <script> | 실행 가능한 코드를 웹 페이지에 포함시키거나 참조할때 사용. 보통 Javascript 코드를 넣을 때 사용함 |
| <link> | 외부 리소스 연결시 사용 ex) <link href="main.css", rel="stylesheet"> |
| <li> | <ul>, <ol> 안에서 각 항목을 나열 시 사용 <ul>: unordered list. 순서가 없기 때문에 앞 글자에 불릿이 붙음 <ol>: olordered list. <ul>과 달리 앞에 기호가 아닌 숫자 또는 영문 순서가 들어가며, 사용할 수 있는 속성이 있음. 1. type(1: 숫자(default), a:영소문자, A:영대문자, i:로마숫자 소문자, I:로마숫자 대문자) 2. start: 중간부터 시작해야 할 때 사용 3. reversed: 역순 |
| <input> | form의 요소중 하나로 사용자가 정보를 입력하는 부분을 만들 때 사용 |
'CODING > Web' 카테고리의 다른 글
| [HTML] layout.html (2/2) (0) | 2022.07.18 |
|---|---|
| [HTML] layout.html (1/2) (0) | 2022.07.15 |