HTML 기본 요소 정리

---

블록(상자) 요소

<div> Division </div>
 - 특별한 의미가 없는 구분을 위한 요소
 
<hn> Heading </hn>
 - 제목을 의미하는 요소
 - (h1~h6) 숫자가 작을수록 더 중요한 제목을 정의

<p> Paragaph </p>
 - 문장을 의미하는 요소
 
<ul> Unordered List </ul>
 - 순서가 필요 없는 목록의 집합
<ol> Ordered List </ol>
 - 순서가 있는 목록의 집합
<li> List Item </li>
 - 목록 내 각 항목
 
=> 사용법
<ul>
  <li>
  <li>
</ul>

인라인(글자) 요소

<sapn> Span </span>
 - 특별한 의미가 없는 구분을 위한 요소

<img src="이미지 경로" alt="대체 텍스트" />
 - 이미지를 삽입하는 요소
 - src / alt 는 필수 속성
 
<a href="경로" target="_blank"> Anchor </a>
 - 다른 / 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
 - target="_blank" : 새탭으로 페이지 이동 속성
 - 화면 출력시 밑줄과 파란 글자로 표시 됨

<br> Break
 - 줄바꿈 요소

인라인-블록 요소

<input type="" value="" placeholder="" disabled />
 - 사용자가 데이터를 입력하는 요소
 - type : text, password, checkbox, radio
 - value : 미리 입력되어 있을 값(데이터)
 - placeholder : 사용자가 입력할 값(데이터)의 힌트
 - disabled : 입력 요소 비활성화
 - checked : 체크박스 타입에서 입력 요소 미리 체크 됨
 - type:radio : 사용자에게 체크 여부를 그룹에서 1개만 입력 받음
   - 상호 작용을 위해 name속성으로 그룹화 필요
   
<label>
  <input type="radio" name="fruits"> Apple
</label>
<label>
  <input type="radio" name="fruits"> Banana
</label>
 - 라벨 가능 요소의 제목 (대표적으로 input 태그)
 - 사용시 글자 텍스트까지 한 묶음으로 인식 시켜 줌.

01

input 태그 적용 예시

테이블 요소

<table>
  <tr>
    <td></td>
  </tr>
</table>
 - 표 요소, 행(Row)과 열(Column)의 집합
 - tr(Table Row) : 행을 지정하는 요소
 - td(Table Data) : 열을 지정하는 요소
 
 <table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
    <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

출력값

전역 속성
- HTML 모든 태그에 사용 가능한 속성

<태그 title="설명"> </태그>
 - 요소의 정보나 설명을 지정 (마우스를 올리면 표시 됨)
 <a href="https://www.naver.com/" title="네이버로 이동"></a>

<태그 style="스타일"> </태그>
 - 요소에 적용할 스타일(CSS) 지정
 <div style="background-color: #333; width: 100px; height: 100px">Hello</div>
 
<태그 class="이름"> </태그>
 - 요소를 지칭하는 중복 가능한 이름
 <div class="box"></div>
 
 <태그 id="이름"> </태그>
  - 요소를 지칭하는 고유한 이름
  <input id="only" type="text" />
  
 <태그 data-이름="데이터"> </태그>
  - 요소에 데이터를 저장하여 js / css로 활용 가능
 <div data-fruit="apple">사과</div>