HTML

Hyper Text Marup Language
- Hyper Text : 참조를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트!
- Markup Language : 태그를 이용해 문서나 데이터 구조 명시하는 언어

HTML 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html : 문서의 최상위(root)요소
head : 문서 메타 데이터 요소
- 문서 제목, 인코딩, 스타일, 외 파일 로딩 등
- 일반적으로 브라우저에 나타나지 않는 내용
body : 문서 본문 요소
- 실제 화면 구성과 관련된 내용

Head 예시

<title> : 브라우저 상단 타이틀
<meta> : 문서 레벨 메타데이터 요소
<link> : 외부 리소스 연결 요소(CSS파일, favicon등)
<script> : 스크립트 요소(JavaScript 파일/코드)
<style> : css 직접 작성
메타 데이터를 표현하는 새로운 규약 = Open Graph Protocol
- html문서의 메타데이터를 통해 문서의 정보를 전달
- 메타 정보에 해당 제목 ,설명 등을 쓸 수 있도록 정의

<head>
	<title>HTML 수업</title>
	<meta charset="UTF-8">
	<link href="style.css" rel="stylesheet">
	<script src="javascript.js"></script>
	<style>
	p {
		color: black;
	}
	</style>
</head>

DOM(Docoument Object Mode)트리

텍스트 파일인 HTML 문서를 브라우저에서 렌더링 하기 위한 구조
- HTML 문서에 대한 모델을 구성함
- HTML 문서 내의 각 요소에 접근/ 수정에 필요한 프로퍼티와 메서드를 제공함

요소 = tag
- 기본적으로 인라인, 블록 이 2개 중 하나!
inline -글자, 가로로 실행, 가로와 세로 높이가 기본적으로는 무시-단점block - 수직적으로, 한 칸을 다 차지inline요소이면서 배경을 지정 가능!
- HTML의 요소는 태그와 내용(contents)로 구성
```
						닫는/종료태그
<h1>contents</h1>
여는/시작태그
```
- 내용이 없는 태그들
  - <br> 개행, 줄바꿈
  - <hr> 수평선
  - <img> 이미지
  - <input>
  - <link>링크
  - meta
- 요소는 중첩 가능
  - 요소의 중첩을 통해 하나의 문서를 구조화
  - 여는 태그와 닫는 태그의 쌍을 잘 확인해야 함, 합쳐진 것도 有
    - 오류를 반환하는 것이 아닌 그냥 레이아웃이 깨진 상태로 출력되기 때문에, 디버깅이 힘들어 질 수 있음
inline-block은 inline의 단점을 극복하기 위해 쓰는것?
그러나 글자 높이를 이용해 임의로 높이를 조정은 가능,

속성(attribute)

태그별로 사용할 수 있는 속성은 다르다.

   속성명      속성값

속성을 통해 태그의 부가적인 정보를 설정할 수 있음
요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공
요소의 시작태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재
태그와 상관없이 사용 가능한 속성(HTML Global Attribute)들도 有

HTML Global Attribute

모든 HTML 요소가 공통으로 사용할 수 잇는 대표적인 속성
(몇몇 요소에는 아무 효과 없을 수 있음)
id : 문서 전체에 유일한 고유식별자 지정
class : 공백으로 구분된 해당 요소의 클래스의 목록
- (css,js에서 요소를 선택하거나 접근)
data-* : 페이지에 개인 사용자 정의 데이터를 저장하기 위해 사용
style : inline 스타일
title : 요소에 대한 추가 정보 지정
tabindex : 요소의 탭 순서

시맨틱 태그

HTML5에서 의미론적 요소를 담은 태그의 등장
- 기존 영역을 의미하는 div 태그를 대체하여 사용
대표적인 태그 목록
- header : 문서 전체나 섹션의 헤더(머리말 부분)
- nav : 네비게이션
- aside : 사이드에 위치한 공간, 메인 콘텐츠와 관련성이 적은 콘텐츠
- section : 문서의 일반적인 구분, 컨텐츠의 그룹을 표현
- article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
- footer : 문서 전체나 섹션의 푸터(마지막 부분)

Non semantic 요소는 div, span등이 있으며 h1,table 태그들도 시맨틱 태그로 볼 수 있음
개발자 및 사용자 뿐만 아니라 검색엔진 등에 의미 있는 정보의 그룹을 태그로 표현
단순 구역을 나누는 것 뿐만 아니라 ‘의미’를 가지는 태그들을 활용하기 위한 노력
요소의 의미가 명확해지기 때문에 코드의 가독성을 높이고 유지보수를 쉽게 함
검섹엔진최적화(SEO)를 위해서 메타태그, 시맨틱 태그 등을 통한 마크업을 효과적으로 활용 해야함.

주요 태그와 속성

텍스트 요소

태그	설명
<a></a>	href 속성을 활용하여 다른 URL로 연결하는 하이퍼링크 생성
<b></b> <strong></strong>	굵은 글씨 요소 중요한 강조하고자 하는 요소(보통 굵은 글씨로 표현)
<i></i> <em></em>	기울임 글씨 요소 중요한, 강조하고자 하는 요소(보통 기울임 글씨로 표현)
<br>	텍스트 내에 줄 바꿈 생성
<img>	src 속성을 활용하여 이미지 표현
<span></span>	의미없는 인라인 컨테이너

그룹 컨텐츠

태그	설명
<p></p>	하나의 문단(paragraph)
<hr>	문단 레벨 요소에서의 주제의 분리를 의미. 수평선으로 표현됨
<ol></ol> <ul></ul>	순서가 있는 리스트(ordered) 순서가 없는 리스트(unordered)
<pre></pre>	HTML에 작성한 내용을 그대로 표현. 보통 고정폭 글꼴이 사용되고 공백 문자를 유지
<blockquote> </blockquote>	텍스트가 긴 인용문 주로 들여쓰기를 한 것으로 표현됨
<div></div>	의미 없는 블록 레벨 컨테이너

저작자표시 비영리 변경금지

'Language > HTML & CSS' 카테고리의 다른 글

CSS (0)	2022.05.06

일	월	화	수	목	금	토
		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

𝘭𝘶𝘮𝘪𝘯𝘰𝘶𝘴

HTML

HTML

HTML 기본 구조

Head 예시

DOM(Docoument Object Mode)트리

속성(attribute)

HTML Global Attribute

시맨틱 태그

주요 태그와 속성

'Language > HTML & CSS' 카테고리의 다른 글

댓글

티스토리툴바

HTML

HTML

HTML 기본 구조

Head 예시

DOM(Docoument Object Mode)트리

속성(attribute)

HTML Global Attribute

시맨틱 태그

주요 태그와 속성

'Language > HTML & CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바