본문 바로가기
IT ▶/Java & Web

HTML 숫자, input, table 문법 사용방법 <sub>,<input>,<tr>,<td>

by Jordan_ 2020. 12. 25.
728x90
반응형

 

 

 

 

1> HTML 문구 강조, 형광펜 표시, 숫자 제곱 표시 등

 

 

- 문구 강조 : <strong>

- 형광펜 하이라이트 : <mark>

- 숫자 하단 표시 : <sub> -> 원소기호 같은 거 표시할때 사용

- 숫자 상단(제곱) 표시 : <sup>

 

 

<예시>

<p> <strong>hello</strong> <hr> <mark>world</mark> </p>

<p>H<sub>2</sub>O</p>

<p>X<sup>2</sup>=4</p>

 

 

 

 

 

 

 

2> HTML 리스트 방식 'ol' , 'ul' , 'li' 사용 방법

 

<ol> 은 순서가 있는 리스트 형태 (type 은 a 이면 a,b,c 순서대로, i 이면 i, ii, iii 순서대로 표시되며 다른 종류도 있다.)

<ul> 은 순서가 없는 리스트 형태 

<li> 는 위에 ol, ul 사이에 각각 한줄, 한줄 의미

 

 

<예시>


<ol type = "a">

<li> hello </li>
<li> hello </li>
<li> hello </li>

</ol>

<ul>

<li> hello </li>
<li> hello </li>
<li> hello </li>

</ul>

<dl>

<dt> HTML </dt>
<dd> 언어 </dd>

</dl>

 

 

 

 

 

 

3> HTML 'input' 입력 타입 종류

 

 

input 에서 type 에 따라 아래와 같이 원하는 형태로 input 입력값 선언

 

- type = "password" 는 input 박스에서 뭔가 치면 아래와 같이 *** 으로 표시

 

- type = "checkbox" 는 여러 개 다중 선택 시 사용

 

- type = "radio" 는 여러개 중 하나 선택 시 주로 사용

 

 

<예시>

<input type="text">
<br><input type="password">
<br><input type="range">
<br><input type="color">
<br><input type="radio">
<br><input type="checkbox">
<br><input type="date">
<br><input type="time">
<br><input type="file">
<br><textarea name="" id="" cols="30" rows="10"></textarea>

 

 

 

 

 

 

4> HTML table 관련 사용방법

 

 

테이블 형태로 표출하고 싶다면 

 

우선 <tr> 로 감싼다음에 각 열을 표시하는 <td>로 작성해준다.

 

아래와 같이 4열로 만들고자 하면 <td>를 4개 선언

 

그다음 줄을 또 다시 <tr>로 묶어주고 <td> 실제 데이터 작성

 

(<th> : 동일한데 문구 강조 밑 가운데 정렬)

 

 

<예시>

<table>

<tr>

<td>순서</td>
<td>선수이름</td>
<td>나이</td>
<td>연봉</td>

</tr>

<tr>

<th>1</th>
<td>Messi</td>
<td rowspan="2">30</td>
<td>100억</td>

</tr>

<tr>

<th>2</th>
<td>Son</td>
<td>40억</td>

</tr>

</table>

 

 

 

 

 

 

저도 필요해서 찾아봐서 정리하였는데 도움이 되셨으면 해서 작성하였습니다~!

 

 

감사합니다.

 

 

----------------------- 무단전재 재배포 금지 -----------------------

 

 

 

 

728x90
반응형