TIL 05. (1주차)List,Table,Input

List

<li> 목록을 표현하는 태그
<ul> unordered list로 숫자 없는 목록
<ol> ordered list로 목록에 숫자를 달아줍니다

selector:first-child{ // 해당 태그의 첫 번째
}
selector:last-child{ // 해당 태그의 마지막
}
selector:nth-child(odd){ // 해당 태그의 홀수번째
}
selector:nth-child(even){ // 해탕 태그의 짝수번째
}

Table

<table class="border-table">
      <tr>
        <th></th>
        <th>내용</th>
        <th>장소</th>
      </tr>
      <tr>
        <th>1시</th>
        <td>HTML이란</td>
        <td>101호</td>
      </tr>
       <tr>
        <th>2시</th>
        <td rowspan="2">HTML실습</td>
        <td>102호</td>
      </tr>
       <tr>
        <th>3시</th>
        <td>103호</td>
      </tr>
      <tr>
        <th>4시</th>
        <td>CSS란</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>5시</th>
        <td>CSS실습</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>6시</th>
        <td colspan="2">수업 없습니다.</td>
      </tr>
    </table>

<table> => 테이블은 항상 table 태그로 감싸져 있다.
<tr> => 한 행 시작
<td> => 각각의 셀은 tr 태그 내에 <td> 태그를 사용
<td> => 가운데 정렬 과 글씨 두께 두꺼워 짐
rowspan => 행 병합
colspan => 열 병합

Input

<input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">

type 으로는 text, password, number 가 있다.
placeholder 는 도움말을 넣어주는 부분.

textarea

<textarea>소개:</textarea>
<textarea> 는 <input> 보다 더 긴 텍스트를 입력받을 때 사용

button

button:hover { // 마우스를 올렸을때
    cursor: pointer; // 커서를 손가락 모양으로 바꿔줌
    opacity: 0.8; // 투명도
}

<input>, <textarea>, <button> 은 모두 inline element 라 <div> 태그로 감싸 영역을 분리