📋 HTML

• HTML은 마크업 언어이다.
• 웹 페이지의 구조를 표현한다.
• HTML은 태그들의 집합이다.
• 트리 구조를 가진다.
• 시맨틱(semantic) 태그를 적절한 의미에 맞게 사용하여야 한다.
• Opening tag와 Closing tag가 쌍을 이룬다.
• Self-closing tag는 Closing tag가 없는 경우에 '/'를 사용해서 Opening tag가 스스로 Closing할 수 있는 것을 말한다.
• Self-closing tag는 생략이 가능한다.
• 속성과 속성에 대한 값을 가진다. (key="value")

📌 div와 span

• div 태그는 블록 레벨 요소로 한 줄을 모두 차지한다.
• span 태그는 인라인 요소로 컨텐츠 크기만큼 공간을 차지한다.

📌 image 삽입

• image 태그는 닫는 태그가 없다.
• src(source) 속성에 주소값을 입력하면 해당하는 이미지가 표현된다.
• 인라인 요소이다.

📌 링크 삽입 a

• 다른 웹 페이지로 연결되는 하이퍼링크를 표시한다.
• href(hypertext reference) 속성에 주소값을 전달하면
  a 태그 사이에 있는 컨텐츠를 클릭했을 때 해당 주소로 이동한다.
• target 속성에 "_blank"를 사용하면 새 창으로 열린다.
• 인라인 요소이다.

📌 ul, ol, li

• ul은 unordered list의 약자로 순서가 없는 데이터를 표현한다.
• ol은 ordered list의 약자로 순서가 있는 데이터를 표현한다.
• li는 ul과 ol의 아이템에 해당하는 요소이다.
• ul, ol, li의 하위에 각각의 요소를 추가할 수 있다.
  예) ul 하위의 ol, li 하위의 ul 등
• ul, ol, li는 모두 블록 레벨 요소이다.

<ul>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
    </ol>
  </li>
</ul>

📌 블록 레벨 요소와 인라인 요소

블록 레벨 Block-level Elements

MDN 참고자료

• 항상 새로운 줄에서 시작한다.
• 즉, 줄바꿈을 유발한다.
• 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
• 인라인 요소와 다른 블록 레벨 요소를 하위에 포함할 수 있다.
• 인라인 요소보다 더 큰 구조를 생성할 수 있다.

인라인 요소 Inline Elements

MDN 참고자료

• 새로운 줄을 만들지 않는다.
• 문서 흐름에서 줄바꿈을 강제하지 않는다.
• 필요한 너비만큼 차지한다.
• 즉, 구성 요소 태그의 할당된 공간만 차지한다.
• 다른 인라인 요소를 포함할 수 있다.
• 블록 레벨 요소는 포함할 수 없다.

📌 input과 다양한 입력 폼(form)

MDN 참고자료

• 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
• 타입 속성(attribute)에 따라 동작 방식이 달라진다. (기본값은 text)

텍스트 박스 (type="text")

<input type="text" placeholder="type here">
<input type="text">

• 텍스트를 입력할 수 있다.
• placeholder를 사용할 수 있다.
  • 어떤 종류의 입력이 유효할 것인지 제안한다.
  • 어떤 종류의 실제 입력도 아님을 나타내기 위해
    더 밝은 색상으로 처리한다.
  • 실제 내용을 입력하면 사라진다.

체크 박스 (type="checkbox")

<input type="checkbox" checked>
<input type="checkbox">

라디오 버튼 (type="radio")

• name 속성을 추가해야 그룹을 설정할 수 있다.

<input type="radio" name="selectOptions" value="optionA">A
<input type="radio" name="selectOptions" value="optionB">B

체크 박스와 라디오 버튼

• 라디오 버튼은 집합에서 하나의 값을 선택한다.
• 체크 박스는 개별 값을 선택하고 해제할 수 있다.
• 여러 컨트롤이 있는 경우
  • 라디오 버튼을 사용하면 모두 중에서 하나를 선택한다.
  • 체크 박스를 사용하면 여러 값을 선택할 수 있다.

📌 textarea

• textarea는 여는 태그와 닫는 태그가 있다.
• 텍스트 박스 (type="text")와 다르게 줄바꿈(multiline)이 가능하다.

<textarea></textarea>

📌 button

• 클릭 가능한 버튼을 나타낸다.

<button>submit</button>

📌 HTML 속성

• HTML 속성 attribute는 name(속성의 이름) value(속성의 값)으로 구성된다.

<!--h1의 속성 이름은 class이고 속성 값은 heading이다.-->
<h1 class="heading">This is heading</h1>

<!--input의 속성 이름은 type이고 속성 값은 text이다.-->
<input type="text">