다시 새로운 맘으로다가 기초부터 정리해보려구 한다.
이 (컴퓨터) 세계를 깊게 알아보려고 하기 전부터 HTML은 알았지만 그냥 HTML인줄만 인식해왔으니, 이제 이해를 해볼 생각이다.
어차피 향후 국문보다 영어로 용어 사용이나 이해가 많이 필요할 것으로 생각되므로, 용어는 주로 영어로 쓰려고 한다.
내가 이해한 바에 따르면 (틀릴수도 있음. 당연함.)
Hyper Text Markup Language
Hyper Text는 단순히 글자들이라기보단 하나의 구조다.
Hyper가 (기존의 것을) 뛰어 넘는 다는 의미에서 착안해, 하나의 문서(텍스트)에서 link를 이용해 다른 문서(node)로 연결된다는 것이다.
그 다음에 Markup은 문서를 편리하게 이용하기 위해 포맷팅하거나 인덱싱 하는 등 구조 형성을 지원하는 작업을 의미한다.
즉, HTML=다양한 웹문서를 연결하고 구조화하는 언어임
BASIC HTML STRUCTURE
<!DOCTYPE html> --정상 작동을 위한 필수 서문
<html> --root element, lang 속성 포함
<head> --page 설명, CSS, 문자집합 선언 등 포함
<meta charset="utf-8"> -- 문자집합 선언 (거의 모든 언어 표현 가능)
<title></title> --브라우저 탭에 나타나는 제목
</head>
<body>
</body>
</html>BASIC HTML ELEMENT
<p>Hello World!</p>Element = Opening tag + Content + Closing tag
- Block level element : 하나의 문단을 구성 (p, div ...)
- Inline element : 블록 레벨 요소에 포함 (a, span ...)
Body에 표현되는 주요 Tags
Image container
<img src="" alt="">
- closing tag 없음
- src : source, 이미지 파일 경로
- alt : alternative, 이미지가 뜨지 않을 때 대체 텍스트
Text container
- 제목(Header)
<h1></h1>~<h4>~</h4>
- 문단(Paragraph)
<p>
- 목록
<ol></ol>: 순서 목록(Ordered List)
<ul></ul>: 비순서 목록(Unordered List)
<li></li>: 목록 요소(List)
- 링크(Anchor)
<a href=""></a>
- Attribute - Hypertext Reffrence : 이동 위치
- 줄바꿈(Break Rules)
<br>: line breaks, 단락 내 줄바꿈
<hr>: horizontal rules, 단락 분리 및 가로선 생성
- 첨자
<sup></sup>:위첨자
<sub></sub>:아래첨자
- Entity Code
구조 = &코드명;©: copyright ©℃: celsius ℃☃: snowman ☃♥: heart ♥
SEMANTIC TAG
Semantic = relate to the meaning
= 접근성 향상
= 협업 용이
<nav></nav>: 네비게이션바, 페이지 내/외 이동 링크 제공
<main></main>
<article></article>
<section></section>
<summary></summary>
<details></details>: 사이트 내 독립적 영역
<aside></aside>: 사이드바
<header></header>: 머리말
<footer></footer>: 꼬리말
<figure></figure>: 다이어그램, 그래프 등
Generic tag
= 비의미적 요소, 단순 그룹화, 과도한 사용 유의
<span></span>: 인라인 요소 그룹화
<div></div>: division, 컨텐츠 그룹화
내가 이해하려고 정리 중