HTML 기본 개념

HTML - 구조. 웹페이지의 틀을 만드는 마크업 언어

CSS - 스타일. 웹페이지를 꾸미려고 작성하는 스타일시트 언어

JavaScript - 기능. 객체 기반의스크립트프로그래밍 언어

 

 

 

 

 

 [HTML 특징]

• 웹페이지의 틀을 만드는 마크업 언어이다.
• HTML은 태그(Tag: 부등호(<>))들의 집합이다.
• HTML은 트리구조로 이루어져 있다.
• <div>로 연 태그를 </span>으로 닫을 수 없다.
• 태그에는 src, style등의 속성을 담을 수 있다.

 

 

 

 

[HTML의 요소]

 

html요소.출처 MDN

 

<p>태그를 제외한 나머지 영역을 요소라 한다. 태그와 요소는 같지 않다.

태그는 소스 코드에서 요소의 시작과 끝을 표시를 뜻한다.

요소는 브라우저가 페이지를 표시할 때 사용하는 문서 모델인 DOM의 일부를 뜻한다.

 

 

 

 

[태그의 종류]

 

 

1. div

<div> 콘텐츠의 길이와 상관없이 한 줄 전체를 차지 </div>

 

 

 

2. <span>

<span> HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용 </span>

 

 

 

3. <p>

<p> 문단(paragraph)을 정의함. </p>

 

 

 

4. <img>

<img src="이미지 삽입" />

 

 

 

5. <a>

<a href="다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)" />

 

 

 

 

 

6. <button>

 

<button> 버튼 </button>

 

 

 

 

7. <input>

 

<input type="사용자로부터 입력 받음/text/password/number etc" />

 

 

 

 

8. <ul>

<ul> 순서가 없는 리스트를 작성할 때 사용 </ul>

 

 

 

 

9. <ol>

<ol> 순서가 있는 리스트를 작성할 때 사용 </ol>

 

 

 

10. <li>

<li> ul/ol/menu 태그 안에서만 사용 가능. 리스트의 순서 정렬 </li>

 

 

 

 

 

 

[기타 태그]

 

• <textarea> : 여러줄의 글을 작성 가능하게 한다.(input type"text"와 비교시)
• <article> : 독립적이고 자체 포함된 콘텐츠를 지정한다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이다.
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하여 사이트의 제목이 보통 들어감. 상단바나 검색창 등
• <nav> :  일반적으로 상단바 등 사이트를 안내하는 요소에 사용. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
• <main> : 문서의 주된 콘텐츠를 표시.

 

⭐️ 더 많은 태그는 MDN 참고 https://developer.mozilla.org/ko/docs/Web/HTML/Element  ⭐️unique)한 이름을 붙일 때

 

---

   ⭐️⭐️⭐️중요⭐️⭐️⭐️

• HTML은 웹 문서를 구조적으로 표현하기 위한 언어이다.
• CSS는 구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어이다.
• JavaScript는 본래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였으나, 이제는 Node.js를 활용하여 서버 제작은 물론이고, PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어가 되었다.