[HTML&CSS Basic] 10. List / Table / Input /button

[HTML & CSS] List

List

1.Ordered List(<ol>)

1. 첫번째
2. 두번째

<ol>
<li>첫번째</li>
<li>두번째</li>
</ol>

<!--li:list Item의 줄임말-->

 

2.Unordered List(<ul>)

• 첫번째
• 두번째

<ul>
<li>첫번째</li>
<li>두번째</li>
</ul>

---

[HTML & CSS] Table

Table

- <table> 태그 사용

- <tr>  :table row

- <td>  :table data

- <th>  :table heading(가운데 정렬 및 글씨 굵기 굵어짐)

-rowspan 은 행 병합, colspan 은 열을 병합

<!--table 만들 때 구조-->

<table>                       <!--table 만들겠다고 선언-->
 <tr>                         <!--한 행 만들기-->
   <th></th>                  <!--table heading의 줄임말-->
   <th>2열 제목</th>
   <th>3열 제목</th>
   <th>4열 제목</th>
 <tr>                          <!--한 행 만들기-->
   <th>2행 제목</th>             <!-- 2행 제목-->
   <td>1</td>                  <!--table data의 줄임말-->
   <td>2</td>
   <td>3</td>  
 </tr>
  <tr>                        <!--또다른 행 만들기-->
   <th>3행 제목</th>
   <td>1</td>                  
   <td>2</td>
   <td>3</td>  
 </tr>
  <tr>                        <!--또다른 행 만들기-->
  <th>4행 제목</th>
   <td>1</td>                  
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>                        <!--또다른 행 만들기-->
   <th>5행 제목</th>
   <td rowspan="2">1</td>    <!--5행 6행 병합-->              
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>                        <!--또다른 행 만들기-->
   <th>6행 제목</th>                  
   <td colspan="2">2</td>    <!--3열 4열 병합-->
 </tr>
  

</table>

<style>
 td,th{                      <!--표에 선 넣기-->
border:1px solid black; 
 }
</style>

 

	2열 제목	3열 제목	4열 제목
2행 제목	1	2	3
3행 제목	1	2	3
4행 제목	1	2	3
5행 제목	1	2	3
6행 제목		2

---

[HTML & CSS] Input

<div class="ex1">
<input type="text" placeholder="이름" value="Digit"> 
<input type="password" placeholder="비밀번호" > 
<input type="number" placeholder="학번">
<textarea>TEXTAREA!</textarea>
</div>

<style>
.ex1{
border:1px solid black;
}


<!--input 세개 중 type이 password인 요소의 placeholder에 속성 설정-->

input[type="password"]::placeholder { 
  color: red;
}
</style>

-type="text"

→input type은 text로 지정 (이름, id, 주소, 닉네임 등을 입력 받을 때 사용)

 

-type="password"

→input type은 password로 지정(입력하면 까만 원으로 나옴)

 

-type="number"

→input type은 number로 숫자만 입력

 

-value

→input에 미리 값을 세팅해놓을 때

 

-placeholder

→실제 input에 입력되어있는 텍스트가 아니라 도움말을 넣어주는 부분

 

-textarea

→input보다 긴 텍스트를 입력받고 싶을 때 사용

 

TEXTAREA!

 

---

[HTML & CSS] button

 

<button> 태그 사용

<div class="ex2">
<button>클릭!</button>
</div>
<style>

.ex2 button{
text-align:center;
border:1px solid black;
background-color:gray;
border-radius:5px;
opacity:0.8;
}


</style>

 

 

cf.)

input, textarea, button은 모두 inline element