자식태그 또는 텍스트노드

• 서브메뉴1
• 서브메뉴2
• 서브메뉴3

자식태그 또는 텍스트노드

• 서브메뉴1
• 서브메뉴2
• 서브메뉴3

자식태그 또는 텍스트노드

• 서브메뉴1
• 서브메뉴2
• 서브메뉴3

**- 태그 중심의 언어이며, 규칙성을 가지고 있음
- 위에서 아래로 해석하는 탑다운(topdown) 방식이며, 
한 줄씩 읽는 인터프리터(interpreter) 방식
- 프론트엔드에서 뼈대, 구조를 담당하는 언어**

🪐 **태그**

▪️ **기본태그

<시작태그 속성명="속성값">
	자식태그 또는 텍스트노드
</종료태그>
<p>자식태그 또는 텍스트노드</p>**

▪️ **단일태그

<태그 속성명="속성값" />
<img src="이미지 경로" alt="이미지 설명">**

🪐 **웹 접근성, 웹 표준**
**웹 브라우저의 종류나 버전 차이에 대하여 호환될 수 있도록 제시된 표준
(웹표준판독사이트 : 밸리데이트)**

🪐 **객체
- DOM(Document Object Model) 객체 : 태그
- 객체지향프로그래밍(Object Oriented Programming) : 각각의 객체를 조립하여 완성시키는 프로그래밍
(시침, 분침, 초침이 각각의 객체라면 그 객체를 조립하여 시계를 완성)**

🪐 **태그종류
- block : 별도의 설정이 없으면 가로 100%를 차지하며, 세로로 쌓임 
- inline : 해당 콘텐츠의 크기만큼 사이즈가 잡히며, 브라우저의 너비에 따라 가로로 쌓임**
**- inline-block : block의 속성과 inline의 속성을 둘 다 가지고있음**

🪐 **젠코딩
- 소괄호를 사용하여 부모 자식 태그를 생성**
▪️ **ul > li [tap]
<ul>
	<li></li>
</ul>**

▪️ **ul > li{서브메뉴$}*3
<ul>
	<li>서브메뉴1</li>
	<li>서브메뉴2</li>
	<li>서브메뉴3</li>
</ul>
- 소괄호 {} : 내부에 텍스트 작성
- $ : 넘버링
- * : 해당 태그의 개수를 곱셈하여 만듬

🪐 head 태그
- 해당 페이지에 불러올 cdn, title, meta태그 등 포함**

▪️ **link 태그
- 외부 파일을 불러올 수 있음
<link rel="속성1 | 속성2..." href="주소">

ex)
- CSS 적용
<link rel="stylesheet" href="./css/style.css">
- favicon 적용
<link rel="shortcut icon" href="./images/favicon.png">
- mobile icon 적용
<link rel="apple-touch-icon=precomposed" href="./images/favicon.png">**