[JS] HTML

🔷 HTML

하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)로 웹 페이지를 위한 지배적 마크업 언어이다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것 뿐 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.

🔸 BLOCK vs INLINE

• Block element
  모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함할 수 있는 요소. 가로폭 전체의 넓이를 가지는 직사각형의 형태이며 width, height, margin, padding 등을 사용해 레이아웃을 수정할 수 있다.

• Inline element
  항상 블록 요소 안에 포함되어 있으며, 인라인 요소 내 다른 인라인 요소가 포함될 수 있다. 컨텐츠가 끝나는 지점까지를 넓이로 가지게 되어 height, width 변경이 불가능하다.
  
  

🔸 시맨틱 마크업

의미를 잘 전달할 수 있도록 문서를 작성하는 것. 시맨틱 마크업을 하기 위해서는 각 태그를 용도에 맞게 사용해야 한다. 주어진 목적을 위해 요소를 사용하기 때문에, 사람과 기계가 읽고 이해하기 더 쉽다.

시맨틱 마크업을 사용할 경우, 다음과 같은 장점이 있다.

1. 검색 엔진 최적화 (SEO)
2. 접근성 향상
3. 유지보수의 용이
   
   

🔸 HTML Emmet 마크업 문서 작성에 용이한 단축키!

1. 자동완성: tab키
2. 텍스트: {} => div{안녕}
3. 자식 요소: >
4. 형제 요소: +
5. 올라가기: ^ => div>p^div

	<div>
        <p></p>
    </div>
    <div></div>

6. 반복하기: *
7. 그룹화: ()
8. 클래스: .
9. 아이디: #
10. 속성: [attr] => img[alt="설명"]
11. 넘버링$ => div.item$*6
    
    

🔸 MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element

공식 문서를 잘 이용하자. 모르는 태그가 있다면 html <태그> mdn으로 검색하면 공식 문서를 확인할 수 있으며 브라우저 별 태그의 지원/미지원 역시 적혀 있다.