HuSpIn
HTML 폼과 테이블 본문
HTML 폼과 테이블
표를 만드는데 필요한 중요한 두 가지 개념 또는 두 그룹의 요소를 알아볼것이다.
여기서의 표는 2차원 데이터 테이블을 말한다.
[1] HTML table
테이블 데이터는 대게 일부 데이터를 근사하고 명확하게 표시하는 방법이다.
하지만 모든 게 테이블에 적합한 것은 아니다.
90년대와 2000년대 초로 돌아가보면 사실 table은 웹 사이트의 레이아웃에 사용되었었다.
레이아웃이라고 하면 좀 더 까다로운 컨텐츠를 이동하거나 배치하는 것을 의미한다고 보면 된다.
하지만 현재의 레이아웃이 훨씬 더 좋다.
왜냐하면 table로 레이아웃을 잡는것은 굉장히 어려운 일이기 때문이다.
더 이상은 이렇게 해서는 안된다.
[1-1] tr, td, th 요소
먼저 이 요소들을 모두 외울 필요는 없다.
(1) td :
=> td는 테이블 데이터 셀 또는 테이블 데이터를 줄인 말이다.
단일 셀을 나타낸다.
따라서 td는 데이터를 포함한 표 안에 있는 단일 셀을 정의한다.
엑셀을 떠올려 보면 이해하기 쉬울것이다. 엑셀의 네모칸을 셀이라고 부르며 여기서의 td는 그런 셀 한칸 한칸을 의미하며 셀에 작성된 데이터도 같이 포함한다고 생각하면 된다.
(2) tr :
=> tr은 table row를 줄인 말인데, 아주 쉬운 요소이다.
tr은 표 안에 있는 셀들이 모인 행을 의미한다.
(3) th :
=> th는 헤더를 정의한다. 현재는 이것만 알면 된다.
헤더를 행 안에 넣는다. 열이 세 개 있으려면 헤더 세 개가 있다고 입력해야 한다.
[1-2] Thead, Tbody, Tfoot 요소
표에 섹션을 추가하는 매우 간단한 3개의 요소이다.
Thead, Tbody, Tfoot 어디서 비슷한 걸 우리는 본 적이 있을 것이다.
이 요소들은 표를 논리 섹션으로 분리하는 작업 외에는 하는 일이 없다.
그 섹션을 통해 무엇이 헤더인지, 푸터인지 아니면 바디인지 구별할 수 있다.
그렇다 시멘틱 요소와 하는 역할이 비슷하다.
따라서 이 요소들은 잘 만든 시멘틱 마크을 작성하고 이해하기 쉬운 표를 만드는데 중요하다.
표가 복잡한 경우 접근성 목적에서도 중요하다.
[2] form
폼(form)은 한 곳에 그룹화된 모든 입력을 담는 상자라 생각하면 되겠다.
그러나 아무 이유없이 그냥 그룹화만 하려고 내용들을 묶는것은 아니다.
또한 폼 요소는 폼을 제출했을 때 폼 데이를 어디로 보낼지 지시한다.
그러니까 이 데이터를 폼에서 '나의 서버로 보내라' 라는 구체적인 지시를 내릴 수 있다.
어디에든 보낼 수 있는건 아니지만 상당한 유연성을 발휘한다.
폼은 입력값을 받거나 할 때 사용되는데 form 태그를 사용하면 action이란 속성이 생기는데 매우 중요하다.
action은 폼이 제출되었을 때, 데이터를 보낼 위치와 시간을 이 action이라는 속성이 지정을 한다.
즉, '나의 서버로 보내라' 라는 지시를 이 action속성이 담당한다고 보면 된다.
url이라는 것도 있는데 url은 쉽게 얘기해서 정보를 보낼 목적지 라고 생각하면 된다.
예시로 아래 코드를 보자.
<h3>Google 검색 폼</h3>
<form action="https://www.google.com/search">
<input type="text" name="q">
<button>Search Google</button>
</form>
코드를 보면 form 옆에 action이라는 속성이 있고 url이 있는걸 볼 수 있다.
그리고 아직 설명하지 않은 input태그와 button태그가 있는데 간단히 설명을 하면
브라우저 상에서 input 태그는 검색창 처럼 보이는 네모칸을 나타내고 button 태그는 그 옆의 Search Google이라는 버튼을 나타낸다.
따라서 이 코드는 input 태그의 박스에 우리가 아무 텍스트나 입력하고 Enter키를 누르거나 그 옆의 버튼을 누른다면
form 태그의 action 속성의 지정된 url로 이동을 한다는 걸 보여주고 싶었다.
[3] form 안에 들어가는 내용 <input>
- 가장 일반적인 요소이자 가장 일반적인 form 컨트롤은 input 요소이다.
<input>
=> input 요소는 매우 다양하게 활용한다.
이를 활용하여 20개 이상의 각기 다른 입력을 만들어 낼 수 있다. 체크박스, 색상 선택기, 날짜 선택기, 비밀번호 입력란, 일반 텍스트 입력란 까지 다양하다.
그리고 작동하는 방식은 <input>으로 완전히 동일하다.
다만 type이라는 속성 하나를 변경하는데 이 type이 작동 방식을 크게 바꾼다.
가장 먼저 알아야 할 것은 <input> 태그는 닫는 태그 </> 가 없다는 것이다. 그래서 두 태그 사이에 내용을 넣지 않는다
form 태그의 자식요소로 input 태그를 사용하는데 작동을 제대로 한다면 웹페이지 상에선 텍스트를 입력할 수 있는 입력란이 생긴다.
위의 이미지 처럼 말이다.
중요한건 type을 지정해 주어서 어떻게 작동하는 input 태그인지 명시를 해주어야 한다.
하지 않는다면 디폴트(기본값)은 text 이다.
하지만 이 type 속성 외에도 다뤄야 할 다른 속성이 있다.
그 중 하나는 'placeholder' 이라는 속성이다.
'placeholder'속성은 입력란의 임시 텍스트를 지정하는 속성이다.
입력창에 무언가를 입력하기 전이라 비어 있을 경우 보여주는 텍스트이다.
<form>
<input tyep="text" placeholder="아이디를 입력하세요.">
</form>위의 코드 처럼 사용이 가능하다.
위의 코드로 작성을 한다면 웹페이지 상에선 아래의 이미지 처럼 보일 것 이다.
다음 페이지에선 라벨(lable) 요소부터 알아보도록 하겠다.