HTML 자주 사용하는 태그2

1. <span></span> 인라인(글자) 요소

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

 

2. <br/> (Break, 인라인(글자) 요소)

줄바꿈 요소. 

 

3. <input type="" /> 인라인(글자) 요소, 블록(상자) 요소

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

 

type : 입력받을 데이터의 타입.

 

여기서 데이터 text 타입에

value="안녕하세요" /> 를 입력시

미리 칸에 입력되어있음.

 

placeholder="이름를 입력하세요" /> 를 입력시

미리 칸에 표시되나 사용자가 활성화시키면 사라짐.

데이터 힌트를 줄 때 사용

ex) 생년월일을 입력하세요! , 번호를 입력하세요!(-제외)

 

disabled /> 를 입력시

입력 요소가 비활성화됨.

 

여기서 데이터 checkbox 타입에

여기서 checkbox" /> 포도

여기서 checkbox" /> 딸기

하게되면 체크 박스가 화면에 출력되며,

체크 박스와 텍스트 무엇을 눌러도 체크가 된다.

 

이 때, <label> 태그를 사용하게 되는데

<label></label>은 인라인(글자) 요소로

라벨 가능 요소(input)의 제목을 뜻합니다.

중복 입력이 가능합니다. 

 

<label>

   <input type="checkbox" /> 포도

</label>

<label>

   <input type="checkbox" /> 딸기 

</label>

 

출력 화면

여기서 hecked />를 넣어둘 경우 미리 체크가 되어서 나옴. 

 

radio는 사용자에게 체크 여부를 그룹에서 1개만 입력 받을 때 사용하며,

name로 그 그룹을 지정해줌. 아래는 "fruits" 그룹으로 지정 

 

<label>

   <input type="radio" name="fruits"/> 포도

</label>

<label>

   <input type="radio" name="fruits"/> 딸기

</label>

 

출력 화면

 

4. <table></table> (table, 테이블 요소)

블록 요소 안의 테이블이라고 보아도 됨.

 

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

열(Column)을 지정하는 요소 (Table Date)

table 로 행을 감싸고, 행과 열 순으로 작성함.

 

<table>

   <tr>

      <td>A</td>

      <td>B</td>

   </tr>

   <tr>

      <td>C</td>

      <td>D</td>

   </tr>

 

출력 예시