🌈HTML:Semantics

html5 = html을 정의하는 가장 발전된 표준

html표준 = html 작동에 있어서의 지침

브라우저가 구현하는 사양의 표준

Block Elements and Inline Elements

Div = The Content Division Element 분할

무언가를 잡아두거나 요소를 그룹화하는 block element

css와 주로 같이 사용

Span

하나의 그룹으로 묶는 inline element

그룹으로 묶어서 css와 주로 사용

Div and Span Difference?

두가지 태그 모두 영역 설정시 사용

1.줄바꿈 여부
div = 줄바꿈 가능 span = 옆으로 붙게 됨

2.영역 지정 방식 차이
div = 텍스트 표현시에 사각형 박스로 구역을 정함 span = 문장 단위로 지정

기타 요소 ( hr,br,sup,sub)

<hr> = 줄 생성

<br> = 줄 바꿈

<sup> = 윗 첨자

<sub> 아랫 첨자
ex)h2o나 분수를 text로 나타낼 때 이용 가능

Entity Code

<> 부등호와 같은 문자를 나타날 때 html 상의 혼란을 줄일 수 있음
&..

entity name or number 사용

Semantic Markup

코드속에서 의미부여, 편의성,  접근성, 가독성 

사람들마다 사용하는 방식의 차이가 있음


<main> body의 주요 컨텐츠를 나타냄

<nav> 현재 페이지 내 혹은 다른 페이지로의 링크를 나타내는 구획

<section> 독립적인 구획

<article> 독립적으로 구분해 배포하거나 재사용할 수 있는 구획

  article이 section에 비해서 조금더 구체적

<aside> 

<header>

<footer>

<time> 시간의 특정 지점 또는 구간을 나타 datetime을 이용해 기능 구현 가

<figure> 독립적인 컨텐츠

스크린 리더 - voiceover, medium

페이지 구성요소를 볼 수 있고 원하는 부분을 찾거나 원하는 부분으로 이동할 수 있음

Vscode Tip Emmet

HTML 작성을 돕는다
  

main > section > h1 + tap

<main>

        <section>

            <h1></h1>

        </section>

    </main>


h1+h2+h3

    <h1></h1>

    <h2></h2>

    <h3></h3>
  

ul>li *4

<ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>
</ul>


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

<nav>

        <ul>

            <li><a href="www.1.com">Click Me</a></li>

            <li><a href="www.2.com">Click Me</a></li>

            <li><a href="www.3.com">Click Me</a></li>

            <li><a href="www.4.com">Click Me</a></li>

            <li><a href="www.5.com">Click Me</a></li>

        </ul>

</nav>

주로 사용 > , + ,  * , $ 

$는 넘버링