HTML 핵심 요소(태그) 정리

[패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(4)

HTML 자주 사용하는 요소(태그) 정리.

블록(Block) 요소

• <div></div>: 특별한 의미가 없는 구분을 위한 요소
• <h1></h1>: 제목 요소(Heading). h1~h6까지 있음, 숫자가 작을수록 더 중요한 제목을 정의할 때 사용함.
• <p></p>: 문장 요소(Paragraph).
• <ul></ul>: Unordered List. 순서가 필요없는 목록의 집합. <li> 항목이 하나 이상 있어야 함.
• <li></li>: List Item. 목록 내 각 항목. <ul> 혹은 <ol>로 감싸져야 함.
• <

인라인(Inline) 요소

• <span></span>: 특별한 의미가 없는 구분을 위한 요소.
• <img src="이미지 경로" alt="이미지 이름" />: 이미지를 삽입하는 요소. src, alt는 필수 속성.
• <a href="링크 url" target="링크 url의 표시(브라우저 탭) 위치"></a>: Anchor. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소.
• <br/>: Break. 줄바꿈 요소. 코드 내에서 엔터를 사용해도 줄바꿈 되지 않음.

Inline-Block 요소

• <input type="입력받을 데이터의 타입" value="미리 입력된 값, 미리 출력됨" placeholder="사용자가 입력할 값의 힌트" disabled/>: 사용자가 데이터를 입력하는 요소. value/placeholder/disalbed(비활성화) 속성은 둘 중 하나만 사용.
  • type 종류
    • "text": 텍스트
    • "checkbox": 복수 체크. <label> <input type="checkbox" /> 체크박스 이름 </label> 형태로 사용됨.
    • "radio": 택1 체크. 아래 형태로 사용됨.

<label>
  <input type="radio" name="fruits" /> Apple
</label>
<label>
  <input type="radio" name="fruits" /> Banana <!--name 속성으로 그룹화함-->
</label>

Table 요소
- Block 요소에 포함됨

• <table></table>: 표 요소. 행(row)과 열(column)의 집합. 아래와 같은 형태로 사용됨.
• <tr></tr>: Table Row. 행을 지정하는 요소.
• <td></td>: Table Data. 열을 지정하는 요소.

<table>
  <tr>
    <td>A</td><td>B</td>
  </tr>
  <tr>
    <td>C</td><td>D</td>
  </tr>
</table>