[Udemy] The Web Developer Bootcamp 2022 : [4] HTML Semantics

🔔Crucial : Understanding what HTML5 Actually is, Block vs inline Elements, <span> and <div> elements, Semantic Elements

🔔 Nice to have : <sub> elements, <hr> elements, <br> elements, <sup> elements, VScode Emmet 

 

HTML5란?

▪️ HTML5는 새로운 요소, 속성, 행동을 가진 새로운 버전의 HTML 언어, 더 많은 일련의 기능, 새로운 형태의 HTML

▪️ HTML을 정의하는 가장 최신의, 발전된 표준 , HTML의 작동 방식에 대한 표준,

▪️ 다운로드나 업데이트 하는 새로운 버전이 아니라 그저 이 문서의 한 버전임 

▪️ 브라우저가 구현하는 사양의 표준 -> HTML5는 끄고싶다고 끄거나 바꿀 수 있는 게 아님 

 

 

인라인과 블록 요소 

▪️ 주어진 element가 문서의 콘텐츠 흐름에 들어가게 하는 방법 

▪️ inline : 일부분만 차지해서 여러 요소를 일자로(가로로) 늘어놓을 수 있음.

▪️ block : h1, h2처럼 한줄을 모두 차지함 

 

<span>과 <div>

두 태그 모두 일종의 제네릭 컨테이너 (무언가를 그룹화해서 다른 스타일을 적용하는 방법) 

☑️ <div> : division(분할),  block level, 요소를 그룹화하는 제네릭 컨테이너, 여러 콘텐츠를 하나의 그룹으로 묶는 방법,

☑️ <span> : inline level, div와 다르게 인라인이라 요소 안의 일부분을 그룹화하는데 자주 사용

 

<hr>, <br>, <sup>, <sub> 

☑️ <hr> : horizontal rule, 닫는 태그가 따로 없음, 문서를 가로지르는 선을 삽입, 가로줄 

☑️ <br> : line break element, 줄바꿈 태그, 그냥 엔터치는 것은 줄바꿈이 안되기 때문에 이 태그로 줄바꿈 

☑️ <sup> : Superscript, 윗첨자, 기준 선보다 더 위에 떠있는 숫자, 제곱같은 표시 할 때 사용

☑️ <sub> : Subscript, 아랫첨자, 기준 선보다 더 아래에 있는 숫자. 화학식 쓸 때 처럼 사용 

 

Entities Code

▪️ HTML 대신 쓸 수 있는 특수한 코드 또는 시퀀스, HTML에서 다른 글자가 표시되게 하는 것

▪️ 모든 엔티티 코드는 &로 시작해서 ;로 끝남 , 엔티티 네임과 숫자 둘다 사용 가능

▪️ 예약 문자(reserved character) : HTML 구문을 쓸 때 사용되기 위해 미리 예약되어 있기 때문에 그냥 사용시 오류남 

✅ < : &lt; (less than)

✅ > : &gt; (greater than)

✅ & : &amp;

 

Exercise - Snowman Logo Exercise 

Semantic MarkUp 

▪️ Semantic : 의미와 관련된 -> 의미가 있는 마크업

▪️ <div>만 계속 사용 -> 의미가 없는 마크업, 무슨 역할을 하는지 전혀 알 수 없음 

▪️ 마크업에 의미를 부여하는 것이 중요함 (표지판의 역할) 

- 첫번째 : 크롤러가 더 쉽게 코드를 인식하게 하기 위해 -> 다른 어플리케이션 또는 코드와 잘 융합

- 두번째 : 접근성, 스크린 리더를 쓰는 사람들이 더 쉽게 접근할 수 있게 하기 위해서 

- 세번째 : 작성한 코드를 개발자들이 더 쉽게 이해하고 찾을 수 있게 하기 위해 

 

Semantic Elements 

☑️ <main> : 문서의 주요 내용, 모든 페이지에서 반복되는 부분은 빼는 것이 원칙(저작권 표시 등)

☑️ <nav> : 페이지에서 내비게이션 링크를 제공하는 부분, 

☑️ <section> : 웹페이지나 애플리케이션의 독립적인 부분 나타냄, 딱히 다른 역할을 하지는 않음, div 대신 사용 

☑️ <article> : 문서 내 독립적인 구성 나타냄, 날씨 위젯같은 걸 만들 때 사용

☑️ <aside> : 문서에 필수적으로 필요한 부분은 아닌 것에 사용 (아마도 덧붙이는 용도)

☑️ <header> : 보통 네비게이션을 포함해서(안해도 됨) 페이지를 소개하는 역할, 머릿말로 사용

☑️ <footer> : 링크, 네비게이션을 포함해서 페이지의 마지막을 나타냄, 꼬릿말로 사용 

☑️ <time>, <datetime> : 시간을 나타내는 태그

☑️ <figure> : 독립적인 요소, 보통 이미지에 사용, <figcaption>을 사용하여 캡션도 달 수 있음

 

Screen Leader Memo 

▪️ Screen Leader : 특정 요소를 탐색하거나 자동 웹 스팟 실행, 네비게이션이 어디있는지 확인(?) 

-> 이해가 잘 안가서 찾아보니 컴퓨터의 화면 낭독 소프트웨어라고 한다, 시각 장애인 분들이 많이 사용한다고 함 

 

VScode Emmet 

▪️ 축약된 구문을 이용해 html을 쉽게 작성할 수 있음, 

✅ > : 자식 관계 표현

✅ + : 형제 관계 표현

✅ * : 여러개 생성할 때 사용 

✅ $ : 넘버링 할 떄 사용 

✅ ^ : 상승 관계 표현

✅ {} : 태그 안에 텍스트 삽입하기

✅ [] : 태그 내부에 텍스트 삽입하기

nav>ul>li*5>a[href=www.$.com]{Click me}