핵심 HTML

Block vs Inline

Block

- 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.

- 브라우저는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.

- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

- Ex) div, h1, p

 

Inline

- 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.

- Ex) strong, span, img, a

 

시맨틱 마크업

1. 검색 엔진 최적화

2. 접근성

3. 유지보수

- 시맨틱 HTML은 주어진 목적을 위해 요소를 사용하기 때문에 사람과 기계가 읽고 이해하기가 더 쉽습니다.

HTML Emmet

참조하면 좋을 사이트 : docs.emmt.io/cheat-sheet/

- div(tab키)

- div{안녕}

- div>div

- div>p+a

- div>p^div

- ul>li*4

- ul>(li>a)*4

- div.class-name

- div#id

- img[alt="이미지 설명"]

- div.item$*6

 

학습 팁

- 검색은 영문이 유리하다.

- 공식 문서나 튜토리얼 문서를 잘 확인하자.

- html *** mdn (Ex html a mdn)

- 배운 것을 기록해두자.