[2023-02-16]<table> 테이블 태그와 <input> 태그

1.margin:auto = 브라우저를 기준으로, 블럭을 가운데로 정렬 

<h1>이라는 텍스트속성의 태그 margin:auto;를 주었다.

 

텍스트가 움직이지 않았다. 이는 h1 태그 자체를 가운데로 옮기기 때문이다. h1의 크기는 브라우저 한 행을 다 차지하고 있기 때문에 움직일 수 없다.

h1은 텍스트형식인 text-align:center;로 주어야한다.

h1태그의 크기, 행을 다 차지하고 있어서 브라우저를 기준으로 하는 margin은 쓸 수 없다(블록방식 공간사용)

 

 

2. <table>

 

<table>
	<thead>
    	<tr>
        	<th></th>
            <th></th>
        </tr>
        <tr>
        	<th></th>
            <th></th>    
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td></td>
            <td></td>     
        </tr>
        <tr>
        	<td></td>
            <td></td>
        </tr>
    </tbody>
</table>

 

-1)<thead>와 <tbody>로 나눈 이유

<thead></thead> <tbody></tbody>

이렇게 제목과 바디를 나눠주는 이유는, html문서를 복사해서 word나 프레젠테이션 자료로 쓸 때 , 제목과 바디가 분리되어 보인다.

이처럼 다음 페이지로 넘어가도, 제목과 바디가 분리되서 나온다 !

 

-2)같은 행의 셀을 합치는 법

colspan = "2"

붙일 셀은 항상 지워준다.

column span (span 은 양옆으로 쭉 펼친 모습) 두개를 합침

 

 

행 row를 합침

rowspan="2";

이렇게 붙여진 셀을 지워준다

 

4행 2번셀을 기준으로 양옆으로 2개 잡고

밑으로 2개 잡음

5번 3번셀은 테이블의 구조가 깨지기 때문에 , 필요없어서 지워버린다.

 

---

 

 

1.줄바꿈 엔티티

 

&nbsp;

(non-breaking space)

이걸로 코드가 좀 더 보기 쉽게 브레이킹을 즉 줄바꿈을, 그 코드는 서로 연결된 것이다. 

그리고 실제로 저걸 쓰면, 화면에서도 띄어쓰기되서 나온다

이름이랑 이메일 띄어쓰기되서 나옴 !

 

2.value를 지정하지 않는 경우

 

<input type="text" id="cusId" name="cusId" placeholder="id를 입력하세요..."> &nbsp; <input type="password" id="cusPassword" name="cusPassword">

이처럼 속성값이 text이거나 password인 경우에서는 value를 지정해주지 않는데, value를 지정하면 value에 디폴트로 저장한 값으로 서버에 저장되는 에러가 발생할 수도 있기 때문이다.

 

3.value를 지정하는 경우

 

radio,checkbox같은 클릭하는 속성값은 value를 지정해준다.

	<h1>4. 체크박스(checkbox): 여러개 중 하나 이상을 선택시 사용</h1>
	<input type="checkbox" name="cusChoice1" value="super">슈퍼맨<br>
	<input type="checkbox" name="cusChoice1" value="bat">베트맨<br>
	<input type="checkbox" name="cusChoice1" value="spider">스파이더맨<br>
	<input type="checkbox" name="cusChoice1" value="lee">이순신<br>
	<input type="checkbox" name="cusChoice1" value="king">세종대왕<br>
	<input type="checkbox" name="cusChoice1" value="hong">홍길동<br>

참고로 radio랑 다르게 checkbox는 여러개 선택이 가능하며, 여섯개를 다 선택하면, 변수의 이름(name)이 하나여도 , value값이 여러개로 서버한테 전달된다., 배열,,, ArrayList cusChoice1={super,bat,spider,lee,king,hong};