섹션4 HTML:시맨틱
html5 최신 html이다. 가장 발전된 표준
html은 설치가 필요없다.
html 표준 문서가 있다. 브라우저가 그것을 사용하는 것
최신 spec인 것이다. 브라우저가 구현하는 사양의 표준.
인라인 엘레먼츠와 블록 엘레먼츠
인라인 엘레먼츠는 줄에 삽입됨. 블록 엘레먼츠는
처럼 블록을 다 먹음.
<div>
는 콘텐츠 분할(divison)요소다. 무언가를 잡아두는 또는 요소를 그룹화하는 제너릭 컨테이너고 블록 엘레먼츠다. 즉 div를 넣으면 전체 블록을 차지하고 위아래 콘텐츠를 밀어낸다.
컨텐츠를 그룹화해서 css로 꾸미기 쉽게 할수있다.
<span>
은 제너릭 컨테이너고 인라인 엘레먼츠다.
span을 쓰면 블록을 다 차지하지 않고 그룹화해서 css를 쓸수있다.
<hr>
닫는 태그가 없다. 스크린을 수평으로 가로지르는 선을 만든다.
<br>
줄바꿈.
<sup>
윗첨자. 제곱 표시 같은.
<sub>
아랫첨자. 화학표기식같은. h2o
엔티티 코드
타이핑 하기 어려운 코드, 기호 등을 입력할수 있음
카피라이트 표시, 그릭 문자 등등
코딩할때 쓰는 기호를 피할수도 있다. < 를 엔티티 코드로 입력가능.
< 로 쓸수있다.
제네릭 컨테이너와 반대되는 개념. 시맨틱 마크업.
시멘틱 마크업
시맨틱:의미와 관련된, 의미론적
시맨틱 마크업이란 의미있는 마크업. 의미가 있는 div.
<nav>
네비게이션. div와 같다. 이름이 다름.
<header>
div와 같지만 페이지의 헤더를 표시함. 머리말.
<section>
div와 같음. 내용의 한 부분. 독립적인 부분.
<footer>
꼬리말. div와 같음. 이름이 다르다.
<article>
문서내의 독립적인 구성.
<main>
문서의 주요 내용. 반복적인 것은 포함 안함.
이름이 달라 의미를 부여함.
<aside>
부수적인 사이드바나 말풍선 등.
시맨틱 마크업을 쓰는 이유→크롤러가 더 쉽게 코드를 알아보도록.
접근성. 스크린 리더를 쓰는 사람들이 더 잘 접근할수 있게.
코드를 수정할때도 보기 쉽다.
시맨틱 마크업은 반드시 따라야하는 것은 아니다.
emmet
html을 쉽게 작성할수 있게 해주는 기능.
>
nav>ul>li 입력하고 탭을 누르면
child로 들어가서 만들어짐.
+
div+p+span 하고 탭을 누르면
형제로 만들어짐.
*
ul>li*5 하고 탭하면
자동으로 ul 밑에 li가 5개 만들어짐.
