HTML이란?

💡HTML(HyperText Markup Language)

➡️ 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어 

 

📍HTML의 기본 구조와 문법 

mozilla : html 요소의 구조

• 웹 페이지의 틀을 만드는 마크업 언어 
• tag 들의 집합 --> tag란? 부등호(<>)로 묶인 HTML의 기본 구성 요소 
  🔎 시작 태그(opening tag)와 닫는 태그(closing tag)로 감싸져 있음
•  Tree Structure : 상위 태그가 하위 태그를 감싸는 형태 

📍자주 사용하는 HTML 요소 

• <div> : HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양, 스타일링 목적이나 같은 섹션에 포함된 여러개의 문단을 묶어 비슷한 방법으로 주석을 달거나 할 때 유용하게 사용 가능, display 속성 block, 줄바꿈 가능, 한 줄 차지

HTML5 표준과 함께 생겨난 시맨틱 태그
시맨틱(semantic) '의미의', '의미론적인' 이라는 뜻을 가진 형용사, 즉 시맨틱 태그는 의미를 부여한 태그
<div> 태그를 사용하여 웹 문서를 만들 수 있지만 HTML의 가독성과 유지보수의 용이성 때문에 시맨틱 태그를 사용
시맨틱 태그를 사용하면 직관적으로 웹사이트 구성 가능
또한 검색엔진이 검색을 수행할 때 HTML의 태그를 분석 할 수 있음 
종류 : <header>, <article>, <section>, <aside>,<footer>, <main>, <nav> 등 

• <span> : <div> 처럼 특별한 기능을 가지고 있지 않고  CSS 와 함께 쓰임, display 속성 inline, 줄바꿈 안 됨, 컨텐츠 크기만큼만 공간 차지
• <img> : 이미지를 삽입하는 태그, src 속성을 통해 이미지 경로 지정, width 나 height 속성 이용해 크기 지정 가능
• <a> : anchor(닻)의 약자, 다른 웹페이지로 연결되는 하이퍼링크를 HTML 문서에 표시할 때 사용, 주로 href 속성과 사용
• <ul> : unordered list 의 약자, 순서가 없는 HTML 리스트를 정의할 때 사용 
• <li> : list의 약자, 목록을 만드는 태그, 단독으로 쓰이지 않으며 <ul></ul>, <ol></ol> 태그 내부에 들어감
• <ol> : ordered list 의 약자, 번호를 메겨 순서가 있는 목록을 만들 때 사용
• <input> : 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용, type 속성값을 통해 여러가지 모양을 나타낼 수 있음
• <p> : paragraph(문단)의 약자, 하나의 문단을 표현하기 위해 사용