[메가바이트 스쿨] FE 3기 online - HTML 개요, 핵심

HTML 개요

---

🗒️ 기본 문법

<태그>내용</태그> -> 요소(element)

HTML은 기본적으로 열린 태그, 닫힌 태그 쌍을 이루고 있습니다.

🗒️ 부모, 자식 요소

<div> 
  <div> -> 부모요소
    <div></div> -> 기준 자식요소 
  </div>
</div>

HTML은 부모, 자식 요소를 갖습니다.
들여쓰기를 이용하면 코드의 가독성을 높일 수 있습니다.

기준이 되는 요소의 최상위 요소를 상위요소라고 합니다. 상위요소의 바로 아래 요소는 자식요소가 되고 나머지 요소들은 하위요소가 됩니다.

🗒️ 빈 태그

<태그> vs <태그/>

빈 태그의 경우 /를 붙여서 사용하는 것을 권장합니다.

<태그 속성="값">내용</태그>

속성(attribute)과 값(value)을 이용하면, 태그 전체요소의 기능을 확장해줍니다.

<img src="이미지의 경로" alt="대체 텍스트"/>

빈 태그의 경우 속성과 값을 이용해서 태그의 기능을 사용할 수 있게 해줍니다.

🗒️ 글자와 상자

요소가 화면에 출력되는 특성은 크게 2가지로 구분됩니다.

1. 인라인(inline)요소 : 글자를 만들기 위한 요소

<span>inline</span> -> 대표적인 인라인 요소 

• 인라인 요소의 경우 요소가 수평으로 쌓이게 됩니다.
• 인라인 요소를 줄바꿈 할 경우 띄어쓰기로 간주합니다.
• 줄어드려는 속성을 가지고 있습니다.
• 가로 세로 크기를 지정할 수 없습니다.
• 좌우 여백은 가능하지만 상하 여백은 불가능 합니다.
• 자식 요소로 블록 요소를 사용할 수 없습니다.

2. 블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소

<div>block</div> -> 대표적인 블록 요소

• 블록 요소의 경우 요소가 수직으로 쌓이게 됩니다.
• 블록 요소의 가로 너비는 부모 요소의 크기만큼 자동으로 늘어납니다.
• 세로 너비는 인라인 요소와 같이 줄어드려는 속성을 가지고 있습니다.
• 가로 세로 크기, 여백을 지정할 수 있습니다.

HTML 핵심 요소

---

🗒️ 핵심 요소 정리

<div>division</div> 
- 특별한 의미가 없는 구분을 위한 요소 (블록 요소)

<h1~h6>heading</h1~h6> 
- 제목을 의미하는 요소 (블록 요소)

<p>paragraph</p> 
- 문장을 의미하는 요소 (블록 요소)

<ul> 
  <li>체리</li> -> list item 목록 내 항목
  <li>망고</li>
  <li>사과</li>
</ul> 
- unorderd list 순서가 필요없는 목록
- ul, li (블록 요소)

<a href="https://google.com">google</a>  
- 다른 페이지로 이동하는 하이퍼링크를 지정하는 요소 (인라인 요소)  

<a href="https://google.com" target="_blank">google</a> 
- target 속성을 주고 _blank 값을 주면 새로운 탭에 표시

<span></span> 
- 특별한 의미가 없는 요소로 글자의 범위를 잡을 때 사용 (인라인 요소)

<input type="text" value="지정값" placeholder="사용자가 입력할 데이터의 힌트" /> 
- inline-block 요소 수평으로 쌓이지만 가로 세로 크기, 여백을 지정 가능
- 사용자가 데이터를 입력하는 요소

<label>
  <input type="checkbox" /> check
</label>
- 체크박스 -> 사용자가 체크 가능
- 라벨 가능 요소를 묶을 때 사용

<label>
  <input type="radio" name="food"/> pizza
</label>
<label>
  <input type="radio" name="food"/> pasta
</label>
- 라디오 버튼 
- name 이라는 그룹 중 택 1

<table>
  <tr>
    <td></td>
  </tr>
</table>
- 테이블 요소 
- 행(tr - table row)과 열(td - table data)로 이루어짐 

HTML은 구조를 만드는 역할이므로, 각 태그의 역할과 속성 정도만 알아두는 게 좋습니다.

🗒️ 주석

  <!-- header -->
  <header><header>

주석은 화면에 출력 되지 않는 수정사항이나 설명 등을 의미합니다.
ctrl + /, cmd + / 단축키를 이용해서 주석을 처리할 수 있습니다.

🗒️ 전역 속성

❗ 전역 속성은 html 태그 안 모든 태그에 사용할 수 있는 속성을 의미합니다.

• title : 요소의 정보나 설명을 지정해 줍니다.
• style : 요소에 스타일을 지정해 줍니다.
• class : 요소를 지칭하는 중복 가능한 이름입니다.
• id : 중복이 불가능한 고유한 이름입니다.
• data : data-이름 형식으로 작성하고, 요소에 데이터를 저장해 주는 역할을 합니다.