form 태그와 table태그 공부하기

/// Form

폼요소의 속성을 가지고 선택하는 방법 : 속성선택자

요소명[속성="속성값"]

input[type='text']

input -> 화면에 보이는 텍스트 설정하기
placeholder="텍스트입력"
<input type='text' placeholder='아이디를 입력해주세요'>


/// Table
    표만들기.......................

    1) 기본구성

    <table> 표를 시작합니다....
        <tr> table row 행을 선언 - 1행
            <td></td> table data (셀을 선언) -1열
        </tr>
    </table>

    데이터 -> td안에만 작성

    table의 테두리

    table, td에만 적용

    --> 마진 패딩과 상관없이

    table, td사이에 여백이 존재. 
    여백 -> border-spacing  => 0으로 설정하기

    table {
        border-spacing:0;
        border-collapse:collapse;
    }

    테두리 와 테두리 => 선의두께 조절하기
    border-collapse:collapse; (선병합)


    1) 기본표는 각행의 셀개수는 동일해야함.


    셀병합 

    - 열병합 col : colspan='합쳐질 셀의 개수'
    - 행병합 row : rowspan='합쳐질 셀의 개수'

    -> 선행셀에 작성함. 
    -> 합져진 셀은 수동으로 삭제하기.

    <table>
        <caption>표의 제목</caption>
        <thead></thead>
        <tfoot></tfoot>
        <tbody><tbody>
    </table>

    td - 셀 (table data) 대신에 제목셀 th를 사용

    td = 내용셀
    th = 제목셀

    셀 컨트롤하기

    5열이 있는경우

    <colgroup>
        <col>  --- 1열
        <col>  --- 2열
        <col>  --- 3열
        <col>  --- 4열
        <col>  --- 5열
    </colgroup>

    셀크기가 동일할 경우
    <colgroup>
        <col span="10">  --- 1열부터 10열까지     
    </colgroup>

    6열이 있고
    1 (2,3,4는 크기 같음),5,6

    <colgroup>
        <col>  --- 1열
        <col span="3">  --- 1 ~ 4
        <col>  --- 5열
        <col>  --- 6열
        <col>  --- 7열
    </colgroup>

    을 캡션태그 다음에 작성하여 셀을 조절하기

    col ------ > width, background color ,border만 제어 가능

/// Tab Menu

/// SLide box