HTML 주요 TAG

안에 들어갈 내용을 적어보면
이름 성별 주소 최진혁 남 청주 ... 이렇게 되는데, 이때 웹페이지는 분별없이 내려주기만 한다 이때,

• < td > 태그 이용해보기. 이름, 성별, 주소 는 각각의 항목들이다. list는 li로 묶어줬던 것 처럼 항목 하나하나를 구별하기위해 td(table data)를 써보자
• 여기서 이름+성별+주소 가 하나의 행이되고 최진혁+남+청주이 또 다른 하나의 행이 될 텐데 이때 < tr > 태그로 묶어주자. 같은 행이 될 항목을 같은 행(줄)에 놓기 위해 tr(table row)을 사용해보자.
• 이렇게 해도 "이름 성별 주소 최진혁 남 청주가 두 행이아닌 한줄로 나오게 되는데, 이때 < table >로 감싸준다.
• table 태그의 속성인 border=""로 테두리를 만들 수 있다.

border 속성을 통해 만든 테두리가 상당히 촌스러움. 그래서 알다시피 다들 CSS 부트스트랩을 사용한다.

기억하자

1. table = 표
2. tr = 행
3. td = 각 요소

이름	성별	주소
영희	여	군포
철수	남	양재

• 추가)
  여기서 이름, 성별, 주소와 나머지 data(최진혁,남,청주)들의 성격이 다른데, 태그를 통해서 표현하고 구분할 수 있는 방법이 있다. (선택적)

<thead> table의 head부분
        <tr>
            <td>이름</td>
            <td>성별</td>
            <td>주소</td>
        </tr>
</thead>
<tbody> table의 body부분
    <tr>
        <td>영희</td>
        <td>여</td>
        <td>군포</td>
    </tr>
    <tr>
        <td>철수</td>
        <td>남</td>
        <td>강남</td>
        </tr>
</tbody>

• 여기서, head 부분을 강조하고 싶다면, td -> th 로 바꿔 글자를 더 진하게 할 수 있다

<tr>
   <th>이름</th>
   <th>성별</th>
   <th>주소</th>
</tr>

이름	성별	주소
영희	여	군포
철수	남	강남

• 또한 tfoot 태그를 사용하면 이 태그가 위에 있든 중간에 껴 있든 웹페이지에 그려지는 표에서 가장 아래행에 들어가게 된다.(반대로 head는 제일 밑에있어도 제일 위에)

<tfoot>
        <tr>
            <td>합계</td><td></td><td></td><th>1600</th>
        </tr>
    </tfoot>
    <thead>
        <tr>
            <th>이름</th><th>성별</th><th>주소</th><th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>영희</td><td>여</td><td>군포</td><th>1000</th>
        </tr>
        <tr>
            <td>철수</td><td>남</td><td>강남</td><th>600</th>
        </tr>
    </tbody>

이름	성별	주소	회비
영희	여	군포	1000
철수	남	강남	600
합계			1600

• 병합(수평,수직)

1. 만약에 영희, 철수가 둘 다 군포에 산다면 주소가 같아지므로 수직 병합이 가능한데 이땐 어떻게 해야할까?
   -> 해결책: rowspan / 그 열에서 코드 삭제

<td rowspan="2"> 2개의 셀(?)이 병합된다.
그리고 병합이 대상이 되는 철수의 <td>군포</td> 는 삭제해준다.

이름	성별	주소	회비
영희	여	군포	1000
철수	남	600
합계			1600

2. 합계 공란을 수평으로 합치고 싶은데 어떻게 해야할까?
   -> 해결책: colspan / 그 행에서 코드 삭제

이름	성별	주소	회비
영희	여	군포	1000
철수	여	600
합계	1600

* input 태그 = 사용자가 입력한 정보를 서보에 전송하기 위해서 사용자에게 정보를 입력받을 수 있는 걸 만들어야 할 때 사용하는 태그

<input type="text"> 라고하면 위에처럼 사용자로부터 문자 정보를 input할 수 있는 박스가 생긴다.

아이디와 패스워드를 만든다고 가정해보자.

아이디:

비밀번호:

<p>아이디:<input type="text"></p>
<p>비밀번호:<input type="text"></p>

• 비밀번호란에 text를 치면 눈에 다 보인다! 문자를 땡땡이로 찍어주는 방법
  해결책: type="password" 속성 이용!

  비밀번호:

<p>아이디:<input type="text"></p>
<p>비밀번호:<input type="password"></p>

• 그렇다면, 우리가 입력한 정보가 서비스가 가진 서버에 전송이 되어야하는데 그 전송을 할 때 사용하는 버튼이 있는데 그걸 submit 버튼이라고 한다.
  해결책: type="submit" 이용

• 여기서 우리가 입력한 정보가 제출 버튼을 눌렀을 때, 어디에 있는 서버로 어디에 전송될 것인가란 정보가 부족하다.
  해결책: form 태그를 사용해서 입력한 정보를 제출로 보내기 위해 action="" 속성을 이용한다. 여기서 ""안에는 서버쪽 개발자가 로그인정보는 http://localhost/login.php로 보내주세요! 하면, 이 주소를 저 ""안에 넣어준다.

• 사용자가 입력한 정보들은 다 text라, 각각의 박스에 입력한 정보가 구별되게 하기 위해 이름을 정해줘야한다

  아이디:

  비밀번호:

  주소:

  해결책: name="id", name="pwd" name="address 속성 이용

내가 만약 아이디:song, 비밀번호:555 주소:seoul로 적었을 때 제출버튼을 누르면
http://localhost/login.php?id=song&pwd=5555&address=seoul 가 나온다.

input type="submit" 과 input type="button"이 다른이유는, submit은 누르면 페이지가 바뀌지만, button은 버튼이라는 UI만 만들어지는데, 이건 JS와 같이 쓸 수 있다 +onclick!
type="reset"은 입력한 정보가 모두 사라진다

나머지는 생활코딩 HTML 리스트 21 드롭다운부터 보기