HTML 핵심 요소

<div>

<div>(Division) 요소는 블록(상자) 요소며, 특별한 의미가 없는 구분을 위한 요소다.

 

<h1>

<h1>(Heading) 요소는 블록(상자) 요소며, 제목을 의미하는 요소다.

1~6가 있으며, 숫자가 작을수록 더 중요한 제목을 정의한다.

 

<p>

<p>(Paragraph) 요소는 블록(상자) 요소며, 문장을 의미하는 요소다.

 

<ul>과 <li>

<ul>(Unordered List) 요소는 블록(상자) 요소며, 순서가 필요없는 목록의 집합을 의미.

<li>(List Item) 요소는 목록 내 각 항목을 의미한다.

 

<img>

<img>(Image) 요소는 인라인(글자) 요소며, 이미지를 삽입하는 요소다.

src 속성은 이미지의 경로를 뜻하고,

alt 속성은 이미지가 제대로 삽입 안 될 시, 대신 나타난 문구를 뜻한다.

 

<a>

<a>(Anchor) 요소는 인라인(글자) 요소며, 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소다.

href 속성은 하이퍼링크를 지향하는 것이고,

target 속성은 내용에 따라 원 페이지에서 바로 넘어갈 것인지, 새 탭에서 열어주는 것인지를 알려주는 거다.

예시처럼 target="_blank" 는 새 탭에서 링크를 열겠다는 것이다.

 

<span>

<span> 요소는 인라인(글자) 요소며, 특별한 의미가 없는 구분을 위한 요소다.

 

<br>

<br>(Break) 요소는 인라인(글자) 요소며, 줄바꿈 요소다.

 

<input>

<input> 요소는 Inline-Block 요소며, 사용자가 데이터를 입력하는 요소다.

Inline-Block 요소는 인라인(글자) 요소 및 블록(상자) 요소 두 요소의 특성을 다 갖춘 요소를 의미한다.

type 속성은 입력받을 데이터의 타입을 지정한다.

type="text"는 입력하라는 박스를 의미하고,

type="checkbox"는 선택 박스를 의미한다.

value 속성은 미리 입력된 값(데이터)다.

placeholder 속성은 사용자가 입력할 값(데이터)의 힌트다.

disabled 속성은 입력 요소 비활성화하는 기능이다.

 

<label>

<label> 요소는 인라인(글자) 요소며, 라벨 기능 요소(input)의 제목을 표시한다.

예시처럼 input요소의 타입이 checkbox되고 해당 체크박스의 표시로 Apple이 되어야 한다.

label 요소는 둘을 감싸주는 역할이다.

checked 속성은 체크박스 입력 요소를 미리 체크되는 기능이다.

 

radio 버튼으로 만든 것은 fruits란 이름의 그룹에서 1개만 입력 받을 수 있는 것이다.

 

<table>

<table> 요소는 테이블 요소며, 표 요소, 행(Row)과 열(Column)의 집합이다.

<tr>(Table Row) 요소는 행(Row)를 지정하는 요소다.

<td>(Table Data) 요소는 열(Column)를 지정하는 요소다.