HTML 테이블
표는 데이터 테이블을 의미 하며 2차원 행과 열로 표현된다.
테이블 데이터는 대개 일부 데이터를 근사하고 명확하게 표시하는 방법이며, 모든 정보가 테이블에 적합하진 않다.
테이블은 단순 콘텐츠 레이아웃을 위함이 아니라, 우리가 표 형식으로 표시하고 싶은 정보를 담은 테이블 데이터와 행과 열에 대해 만들어져야 한다. - 테이블 형식에 적합한 정보를 보여주는 경우에 사용
물론 콘텐츠 레이아웃을 위해 사용될 수도 있지만 바람직하지는 않다.
TR, TD, Th 요소
td
테이블 데이터 셀 또는 테이블 데이터를 줄인 말
단일 셀을 나타냄 표 안의 단일 셀을 정의함
tr
table row를 줄인 말
표 안의 행을 정의함, 특정 셀들을 그룹화함
th
표의 헤더를 정의함
초기값으로 굵은 글씨체, css로 물론 변경 가능
Thead, Tbody, Tfoot 요소
이 요소들은 시맨틱 마크업으로서 이해하기 쉬운 표를 만드는 데에 중요하다. 표가 복잡한 경우 접근성 목적에서도 중요함
thead
헤더임을 명확히 밝히는 태그
tbody
표의 주요 데이터임을 밝히는 태그
tfoot
표의 꼬릿말, 하단 강조 태그
Colspan & Rowspan
colspan
th 또는 tr에 colspan 속성을 주어 한개의 열을 쪼개 그 내부의 열을 여러개 만들 수 있다.
rowspan
th 또는 tr에 rowspan 속성을 주어 한개의 행을 쪼개 그 내부의 행을 여러 개 만들 수 있다.
폼(Form) 요소
폼 요소는 텍스트 입력란이나 비밀번호 입력란, 버튼 및 체크 박스 등 여러 개별 폼 컨트롤을 품는 쉘 또는 큰 컨테이너이다.
그룹화된 모든 입력 폼들을 담는 상자이며, 폼을 제출했을 때 폼 데이터를 어디로 보낼지 지시한다.
데이터를 폼에서 내 서버로 보내라는 구체적 지시를 내릴 수 있다. - 어디든은 아니라도 상당히 유연함
다른 모든 것을 감싸는 부모 폼 요소도 있다. - 데이터를 어떻게, 어디로 전송할 지는 부모가 정하게 됨.
action 속성이 자동 생성된다. - 폼이 제출되었을 때, 데이터를 보낼 위치와 시간을 action이 지정
action으로 해당 요청이 어디(where)로 가는지 제어하는 것이다.
method 속성으로는 어떤 유형의 http 메서드를 사용할지 제어한다. get, post 등 - 이후 단원에서 자세히 학습
폼을 제출하면 모든 데이터는 http 요청을 통해 함께 전송된다.
웹 사이트는 서버의 작업을 인식하고 입력한 단어에 대한 검색을 요청한다고 판단하여 DB를 탐색해 이미지, 결과 및 모든 게시물을 찾아 웹 페이지로 조합한 다음, 그 페이지를 우리에게 보낸다(응답).
일반적인 폼 입력 형식
input
가장 일반적인 폼 컨트롤 - 다양하게 활용됨, 체크박스, 비밀번호 입력란 등
닫는 태그도 없고, 태그 중간에 넣을 내용도 없다. - type이라는 속성이 작동 방식을 결정함
placeholder는 입력란의 임시 텍스트를 지정하는 속성 - 입력 전에만 유지됨, 무엇을 입력해야 하는지 알려준다는 점에서 중요함
가장 중요한 레이블
label
접근성과 폼을 쓰기 편하게 해준다는 점에서 매우 중요한 요소
레이블은 시각적으로 텍스트를 보여주는 것 이상의 기능을 함
스크린 리더는 레이블에 포함된 텍스트가 무엇인지 정확히 알 수 있음 - label 사용하지 않는 경우 어떤 텍스트와 폼 요소가 서로 연결된 것인지 관계를 스크린리더가 파악 할 수 없다.
label 요소는 실제로 특정한 입력 값이나 폼 컨트롤 및 텍스트와 직접적으로 연결되어 있다.
그런 요소는 단순히 스크린 리더의 기능이나 스크린 리더 사용자의 경험을 개선할 뿐만 아니라, 두 요소를 연결하면 레이블 자체를 클릭할 수 있게도 해준다. 꼭 체크박스 부분을 누르지 않아도 체크가 눌림
id 속성
짧고 간단해야 한다. - css에서 자세히 학습
한 페이지에서는 한 개의 요소만 지정된 id를 지녀야 한다. - 한 번 사용한 id는 다른 곳에 사용할 수 없음
그래야 정확히 하나의 입력값에만 레이블 지정할 수 있기 때문
for 속성
어떤 것을 정의하는지, 뭘 위한건지 보여줌 - for="cheese"를 지정하면 id가 cheese인 것은 뭐든지 해당됨
레이블 패턴을 사용하는 것이, 그 폼을 공개해서 사람들이 사용하게 하고, 포트폴리오에 넣고 싶다면, 입력값에 레이블을 잘 지정하는 것이 좋다.
label 내에 input을 중첩하는 것도 가능하다. - 이 경우에는 for와 id 속성이 없어도 된다.
그러나 중첩 하지 않는것이 표준인데, 스타일 적용이 복잡하기 때문
HTML 버튼
button
여는 태그, 닫는 태그 있음
그 안에 입력하는 모든 텍스트는 버튼에 레이블을 지정함
기본값 스타일이 있지만 물론 css로 바꿀 수 있음
HTML 이름 속성
name
데이터가 서버로 전송될 때 input 내의 값을 지칭하기 위한 값
보통 공백이 없고 짧음 - 서버가 찾으려는 간단한 값
name 속성에서 데이터를 전송할 때 이용할 부분은 주어진 값으로 레이블링 된다.
구글과 레딧 검색하기
form을 이용해 타 사이트의 검색창을 통해 검색할 수 있는 폼을 만들 수 있다.
검색 용어의 이름을 정하는 것은 전적으로 서버나 회사, 개발자에 달려있으므로, url 분석을 먼저 하고 알맞게 form과 input 태그의 속성을 지정해주어야 한다.
코드에서 button을 빼고 input만 남겨도 검색어 입력 후 엔터키 입력하면 폼이 제출되어 검색이 정상적으로 이루어진다.
라디오 버튼, 체크박스와 선택창
input 태그를 사용하며 type에 따라 표시되는 버튼이 달라진다.
체크박스
라디오 버튼
여러 개의 input type="radio"요소들을 만들고 name 값들을 같게 함으로써 그것들을 같은 그룹으로 묶는다. - 한 그룹 내에서 무조건 하나의 버튼만 체크할 수 있다.
체크한 라디오 버튼의 값을 전송하고 싶다면 value 속성을 추가해야 한다.
value: 제출했을 때 서버에 전송되는 값 - value 값으로 입력된 내용은 사용자에게 노출되지 않음
선택창
select과 option 태그 사용
범위 및 텍스트 영역
범위(range)
input에 type="range" 속성을 주어 생성
슬라이더를 만들어서 사용자가 그 값을 선택하도록 함
min, max로 최솟값, 최댓값 범위를 설정 - 추가적으로 value(초기값), step(단위) 속성을 줄 수도 있음.
텍스트 영역
textarea 요소
HTML5 폼의 유효성 검사
유효 이메일, 비밀번호 조건 검사 등 유효성 검사 필요한 곳이 많음
브라우저나 클라이언트 측 유효성 검사(패턴 검사 등)는 JS를 사용함 - 서버 측 유효성 검사도 있음, 브라우저에서 통과하거나 혹은 우회해서 직접 요청을 보내는 경우에도 서버 측에서 유효성 검사가 또 이루어지기 때문에 반려됨
빌트인 유효성 검사
1. required 속성
폼 입력을 필수 입력으로 만드는 속성
2. minlength 속성
최소 글자 수 검사
3. pattern 속성
어떤 요소들은 유효성 검사가 내장되어 있는 경우가 있다. ex. email, url, tel type
두 개의 요소를 추가하고 정규 표현식이라고 부른다. - 추후에 자세히 학습
사용자 임의 패턴 속성을 이용해 정규 표현식을 만들 수도 있다.
진짜 유효성을 검사하는 것이 아니라 단순 패턴 검사만 하는 것이다.
'Web' 카테고리의 다른 글
| [Web 부트캠프 2023] 6. CSS 박스 모델 (0) | 2023.01.09 |
|---|---|
| [Web 부트캠프 2023] 5. CSS 선택자의 세계 (0) | 2023.01.06 |
| [Web 부트캠프 2023] 4. CSS 기초 (0) | 2023.01.05 |
| [Web 부트캠프 2023] 2. HTML 개요~시맨틱 마크업 (0) | 2023.01.02 |
| [Web 부트캠프 2023] 1. 웹이란? (0) | 2023.01.02 |
