✅HTML?

우리는 기본적으로 웹 사이트를 만들기 위해 HTML, css, javascript를 사용하는데, 용도는 아래와 같다.

• HTML : 웹 사이트의 뼈대를 만들고,
• css : 예쁘게 꾸미고,
• javascript : 동작하게 만든다.

<h1>제목</h1>
<p>내용이 들어올 자리입니다.</p>
<a href="http://www.naver.com">네이버로 이동</a>

여기서 HTML은 Hyper Text Markup Language의 약자로,일반적인 문서보다 "월등한 최고의 기능을 담고 있는 문서" 라는 뜻이다. 원래 교정에서 쓰이는 markup은 말 그대로 mark하는 것을 말한다. 웹 문서에서는 특정 텍스트에 mark하기 위해 HTML tag라는 것을 사용한다. 위 예제에서 <h1>, <p>, <a>로 쓰였다.

---

💡HTML tag

웹 문서에 어떤 표시를 해주는 것이다. 글자 크기, 색, 모양 등을 변경하거나 하이퍼 링크와 같은 문서연결 기능을 넣을 수 있다.

• 태그 특징
  1.콘텐츠가 없는 태그는 종료태그를 생략할 수 있다.
  2.HTML태그는 element, 즉 요소 또는 노드라고도 부른다.
  
  

💡HTML 주석

• <!-- 메모내용 --> 의 방법으로 사용.
  
  

💡Emmet

간단한 몇개만 알아놓으면 편하게 사용 가능

Emmet은 HTML과 CSS의 자동완성 기능을 제공하여, 작성 시 빠르게 단축 시켜주는 확장기능.

• 자식노드 :>으로 자식 요소 생성 가능
  :: div>ul>li 입력 후 tab
• 형제노드 : +로 같은 단계에 있는 요소 생성 가능
  :: div>ul+ol+div 입력 후 tab
• 반복하기 : *로 요소를 반복해서 생성 가능
  :: div>ul>li*3 입력 후 tab
• 자동 넘버링 부여 : $
p.container{item}*5 입력 후 tab
  
  

💡Semantic tag

semantic은 의미론적이라는 뜻으로 의미를 가지는 태그를 말한다. 늘 semantic tag에 기반한 페이지를 만들도록 염두할 것.

💡inline / block element

모든 HTML태그들은 각 태그의 용도에 따른 기본 표시값을 가지는데 inline 과 block level element로 나뉜다.

• inline : 요소를 구성하는 태그에 할당된 공간만 차지한다. <a>, <img>, <span> 태그 등이 여기에 속함. 따라서 width, height 속성이 적용되지 않는다.
• block element : 부모 요소의 전체 공간을 차지하여 블록을 만든다. <h1>~<h6>, <p> 태그 등이 여기에 속함. 화면 구성이나 레이아웃을 짤 때에 사용되고 한 칸을 모두 차지하므로 세로로 나열된다.