🔖HTML

HTML [Hyper Text Markup Language]

하이퍼 텍스트 마크업 언어➡웹 페이지 표시를 위해 개발된 지배적인 마크업 언어🎯

• 웹을 이루는 가장 기초적인 구성 요소
• 웹 페이지 만들기 위해 필요한 표준 마크업 언어

🔖태그

🪁요소[Element]

시작태그와 종료태그 그 사이의 내용으로 구성

p 태그는 너비 적용됨⭕

span 태그는 너비 적용 안됨❌

⚡속성 [Attribute]

🔸속성값 [Attribute Values]

🧱시멘틱 요소

👉 의미 있는 요소, 브라우저와 개발자 모두에게 의미를 명확하게 설명함

🔸 header - 주로 제목과 소개 내용을 포함

🔸 section - 문서의 섹션을 정의

🔸 nav - 목차, 메뉴 등에 사용

🔸 footer - 문서 또는 섹션의 바닥글을 정의

---

🔹 DOCTYPE

• HTML 문서 맨 처음에 명시해서 이 문서의 버전 나타냄
• Doctype은 반드시 작성해줘야하며, HTML5 버전임을 나타냄

🔹 HTML

• 이 문서가 html로 작성됐음을 브라우저에게 알림
• 문서의 시작과 끝을 알리는 태그
• lang 속성으로 문서의 언어를 설정할 수 있음

🔹 Head

• 기계가 식별할 수 있는 문서 정보( 메타데이터 )를 담음
  정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있음

메타 데이터는 설정같은 부분들임
viewport 같은 경우엔 1.0으로 화면에 딱 맞게 100%로 한다는 것❗

나중에 배포할 때 이 웹에 대한 설명들을 써놔야 클롤러들이 크롤링할 때
이 사이트는 어떠한 사이트구나 라고 알게됨 ( 정보를 줄 수 있게 되는 것 )

title은 이부분에 해당

🔹 LINK

• 현재 문서와 외부 리소스의 관계를 명시함
  CSS 연결할 때 제일 많이 사용하지만,
  사이트 아이콘( "파비콘"과 홈 화면 아이콘 ) 연결 등 여러 가지로 쓰일 수 있음

🔹 META

• base, link, script, style, title과 같은
  다른 메타 관련 요소로 나타낼 수 없는 Metadata를 나타냄

🔹 STYLE

• 문서나 문서 일부에 대한 스타일 정보를 포함

🔹 TITLE

• 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의

🔹 BODY

• HTML 문서의 내용을 나타냄, 한 문서에 하나의 body 요소만 존재 가능

---

🔖HTML 기본 태그와 역할

Heading

h1 ~ h6이며 주로 웹 페이지에 표시하려는 제목으로 사용
h1은 하나의 페이지에서 제일 큰 주제를 위해 한 번만 써주는 게 좋음👍

p[Paragraphs, 문단] 🤜vs🤛 pre

p 태그는 띄어썼어도 한줄로 나옴

📄목록 태그
👉 ol[ordered list] / ul[unordered list] / dl[description list]

순서 있는 태그 ol

start를 5로 줬으면 5. 6. 7. 이렇게 됨

reversed로 주면 3. 2. 1. 이렇게 됨

type을 "a"라고 주면 a. b. c. 이렇게 됨
대문자 "A"로 주면 A. B. C. 이렇게 됨

순서 없는 태그 ul

square로 하면 ▪ 이렇게 됨

dl 👉 목록의 시작을 정의
dt 👉 용어를 정의
dd 👉 설명을 나타냄

br ➡ 줄바꿈

hr ➡ 수평선

✍텍스트

strong & b ➡ 폰트 굵게

💡보이는 건 strong 하고 b 태그가 똑같음
다른 점은 의미적으로 좀 더 강조하고 싶을 때 strong 쓰면 됨

em & i ➡ 이탤릭체

💡em이나 i 태그 둘 다 글씨 기우리는 건 똑같지만
좀 더 강조하고 싶을 땐 em을 사용하면 됨

small ➡ 작은 텍스트 정의할 때 사용

mark ➡ 하이라이트 할 때 사용

sub ➡ 아래 첨자 텍스트 사용할 때

sup ➡ 위 첨자 텍스트 사용할 때

어떤걸 인용할 때 사용하는 태그
👉 blockquote( 들여쓰기 ) & q( 따옴표 )