[개발일지 3일차] table 태그, form 태그, input 타입 종류

MSJ·2022년 5월 10일

Table html web 개발일지

WEB

목록 보기

3/41

2022-05-04

테이블 태그

※div 태그는 포스트잇 같은 태그로, 묶음 시켜놓는 태그라 보면 된다. 테이블 태그랑 쓰임새가 조금 다르다.

테이블을 만들어 놓는 이유.
테이블을 만들어 두면 디자인 된 틀은 그대로 둔 채 내용 변경이 용이해서다.
나중에 DB(데이터 베이스)와 연결해서 반복문을 돌려 내용이 계속 변하는 형식으로 쓴다. 게시판이나 뉴스 띄우기 등...

table 태그 안에 쓰는 태그들
caption, thead, tbody, tfoot

<table> : 표를 만들 때 사용

caption : 캡션. 표의 주제 같은 느낌. 표 크기 기준으로 중앙에 배열된다
thead : 표의 헤드라인
tbody : 표의 내용 부분
tfoot : 통계, 합계 부분, 없을시 안써도 무방
<th> : 각 열의 제목
<tr> : 행
<td> : 열, th를 제외한 각각의 셀을 표현
<colspan> : 가로로 셀을 합친다
<rowspan> : 세로로 셀을 합친다

사실 thead, tbody, tfoot, th 같은 것들은 기능 자체는 똑같지만 의미있는 표 태그 사용하기에 가깝다.

1) 몸이 불편한 사람이 텍스트 리더기를 쓸 때, 리더기에서 표를 분석하고 읽어들이기 용이하다.
2) 헤드, 바디, 풋 부분 스타일 적용이 따로 가능하다.
3) 헤드, 풋을 그대로 둔 채 본문 내용만 코드로 간편히 변경 가능하다.
4) 만약 아주 긴 표가 있을 때 헤드와 풋기준으로 출력 가능하다고 하는데... 요건 이해가 잘 안된다.
5) 유지보수에 매우 용이하다.

<table>
    <th>ㅇ.ㅇ</th><th>ㅁ.ㅁ</th><th>ㅅ.ㅅ</th>
    <tr>
        <td>열1</td>
        <td>열2</td>
        <td>열3</td>
    </tr>
    <th>중간 제목</th><th>중간 제목</th><th>중간 제목</th>
    <tr>
        <td>열1</td>
        <td>열2</td>
        <td>열3</td>
    </tr>
    <th>하단 제목</th><th>하단 제목</th><th>하단 제목</th>
    <tr>
        <td>열1</td>
        <td>열2</td>
        <td>열3</td>
    </tr>
</table>

표를 깔끔하게 보기위해 아래 스타일을 적용시켜둬보자.

    <style>
        table, th, td{
            border: solid 1px black;
            border-collapse: collapse;
            padding: 8px;
        }
    </style>

짜잔, 이렇게 나온다.

<td colspan="2">요런식으로 쓴다</td> 자세한 내용은 스크린샷에 첨부되어있다.

앵커 태그

웹페이지는 스크롤을 내리면 height가 무한하다 시피 늘어난다. 돌아가고 싶을 땐 이미 너무 많은 스크롤을 내렸을지도 모른다. 이때 하나의 긴 문서 안에서 가고 싶은 곳을 책갈피처럼 즉시 가는 태그, 바로 앵커 태그다.

적용 : 길게 쓰인 문서 서두에 아이디를 지정한다.
id="ch2" 로 했다면, <a href="#ch2"> CH2로 가는 링크 </a> 로 링크를 만들 수 있다.

form 태그

폼, 즉 양식이라 보면 된다. 입력된 정보를 서버에 보낸다는 중요한 기능이 있다.

폼의 속성
<form action="/action_page.php"> : "/action_page.php" 서버에 보내라, 라는 의미. 폼 데이터를 전송할 URL을 지정한다.
<form name=""> : 스크립트나 서버에 보낼 폼이 많을 경우 식별해줄 이름이 필요하다.
<form method=""> : 폼을 서버에 전송할 http 메소드를 결정한다(get또는post가 있다)
└ get: 데이터를 URL의 일부로 전송(보낸다)
└ post: 데이터를 본문으로 송신(받아온다)
<form target=""> : 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML 문서나 이미지)를 출력할 윈도 이름

input type : 타입에는 text, button 등 엄청 많은 타입이 있다.
label for
등... 다양하게 필요에 따라서 작성할 수 있다

<form name="fo" method="get">
	아이디 : <input type="text" size="15"><br>
    비밀번호 : <input type="password" size="15"><br>
    <input type="submit" value="로 그 인">
</form>

사이즈로 텍스트 입력 가능한 수를 정할 수 있음

폼 요소

textarea : 여러 줄의 텍스트 입력 창
select : 드롭다운 리스트를 가진 콤보박스
label : 폼 요소의 캡션 만들기
fieldset : 폼 요소를 그룹으로 묶기
button : 버튼 태그

input type

Tip! 버튼은 기입한 내용을 지우지 않고 그대로 보존이 가능하다. submit은 날아가버린다... submit이 기본값이라네.

text : 한 줄 텍스트 입력창
password : 암호 입력을 위한 한 줄 텍스트 입력창
button : 단순한 버튼
submit : 웹 서버로 폼 데이터를 전송시키는 버튼
reset : 입력된 폼 데이터를 초기화시키는 버튼
image : 이미지 버튼
checkbox | radio : 체크박스(복수 선택), 라디오버튼(단일 선택)
tmonth | week | date | time | datetime-local : 년, 월, 일, 시간 등의 시간 정보 입력 창
tnumber | range : 스핀 버튼과 슬라이드를 이용한 숫자 입력 창
color : 색 입력을 쉬운 컬러 다이얼로그
email | url | tel | search : 각 항목의 형식 검사 기능을 가진 텍스트 입력 창
file : 로컬 컴퓨터 파일을 선택하는 폼 요소

여기서 잠시!

<input><button> 왜 이 두 종류를 같이 쓰나? 바로 안에 태그를 집어넣을 수 있냐 없냐가 중요하다.
인풋태그가 먼저 나왔지만 쓰다보니 인풋태그가 너무 불편한 것인데.
버튼 태그는 열고 닫는 태그다보니 안쪽에다 편하게 많이 뭔가를 넣을 수 있다.
1) <button>은 자식태그를 가질 수 있다.
2) <button>은 CSS에서 가상선택자로 꾸며줄 수 있다.
->input의 한계를 넘어 다양한 표현이 가능하다는 점

폼 전송 과정

1) 웹을 켜서 검색어를 치면
2) 링크를 통해 이동
3) 웹 서버(search.naver)에 요청
4) 검색 결과 전달

평문 : url창에서도 내용을 볼 수 있다
post 방식 : url창에서는 안 보이게함. 요청을 http 바디에다 써서 숨겨두지만 암호화 된 건 아님.

그러면 아이디와 비밀번호 같은 경우는 평문인데 어떻게 안전하게 전송할 수 있을까? 통신하는 '통로'를 암호화하게 된 것이다. 이것이 http와 https(secure)의 차이.

   <form name="sform"
         action="https://search.naver.com/search.naver"
         method="get">
        <input type="text" name="query">
        <input type="submit" value="검색">
        </form>