9일차_HTML 핵심 요소 정리_20210713

HTML 핵심 요소 정리

 

<div>태그

: <div></div>

: 블록(상자) 요소

: 특별한 의미가 없는 구분을 위한 요소.(Division)

 

<h>태그

: <h1></h1>

: 블록(상자) 요소

: 제목을 의미하는 요소.(Heading)

: h1, h2, h3, h4, h5, h6 숫자가 작을수록 더 중요한 제목을 정의

 

<p>태그

: <p></p>

: 블록(상자) 요소

: 문장을 의미하는 요소(Paragraph)

 

<img>태그

: <img src="경로" alt="대체문자" />

: 이미지를 삽입하는 요소.(Image)

: src, alt 필수 속성

 

<ul>태그

: <ul></ul>

: 블록(상자) 요소

: 순서가 필요없는 목록의 집합을 의미.(Unordered List)

: 무조건 자식태그로 <li> 태그가 1개이상 존재해야함

 

<li>태그

: <li></li>

: 블록(상자) 요소

: 목록 내 각 항목(List Item)

: 무조건 부모태그로 <ul> 태그와 함께 해야함

 

<a>태그

: <a href="링크url">Naver</a>

: <a href="링크" target="_blank(링크 url의 표시(브라우저 탭) 위치)">Google</a> --> 새탭에 열림

: 인라인(글자) 요소

: 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소(Anchor)

: Naver Google

 

<span>태그

: <span></span>

: 인라인(글자) 요소

: 특별한 의미가 없는 구분을 위한 요소.

...

<style>

  span { color: red; }

<style>

...

<span>동해물</span>과 백두산이 마르고 닳도록

출력: 동해물과 백두산이 마르고 닳도록

 

<br>태그

: <br/>

: 인라인(글자) 요소

: 줄바꿈 요소.(Break)

동해물과 백두산이<br/>마르고 닳도록

출력:

동해물과 백두산이

마르고 닳도록

 

<input>태그

: 인라인(글자) 요소-블록(상자) 요소 Inline-block

: 사용자가 데이터를 입력하는 요소.

: <input type="text" />

: type  (입력받을 데이터의 타입)

: <input type="text" value="MAKZUIN" />

: value (미리 입력된 값(데이터))

: <input type="text" placeholder="이름을 입력하세요!" />

: placeholder (사용자가 입력할 값(데이터)의 힌트)

: <input type="text" disabled />

: disabled (입력 요소 비활성화)

: <input type="checkbox" />

: <input type="checkbox" checked />

: checked (체크박스 입력 요소 체크됨)

: <input type="radio" name="fruits" /><input type="radio" name="fruits" />

: 1개만 선택 가능 (택1), fruits 라는 이름의 그룹

 

 

<label>태그

: <label></label>

: 인라인(글자) 요소

: 라벨 가능 요소(input) 의 제목

<label>

  <input type="checkbox" />Apple

</label>

<label>

  <input type="checkbox" />Banana

</label>

Apple

Banana

<label>

  <input type="radio" name="fruits2" checked/>Apple

</label>

<label>

  <input type="radio" name="fruits2"/>Banana

</label>

Apple

Banana

 

<table>태그

: <table></table>

: 테이블 요소 table

: 표 요소, 행(Row)과 열(Column)의 집합

<tr>태그

: <tr></tr>

: 행(Row)을 지정하는 요소. (Table Row)

: table-row

<td>태그

: <td></td>

: 열(Column)을 지정하는 요소. (Table Data)

: table-cell

<table>

  <tr>

    <td>A</td><td>B</td>

  </tr>

  <tr>

    <td>C</td><td>D</td>

  </tr>

</table>

 

A B

C D