HTML_2 (form, table)

1. 다양한 태그들

3. Contents

h1,h2,h3,h4,h5,h6 : Heading(제목)

• 웹페이지의 구조를 보여주는 목차

• h1~h6 순서대로 작성해야한다.

• h1은 페이지에서 가장 중요한 제목을 표시하며 한번만 사용한다.

• h2, h3는 섹션 제목, 하위 섹션의 제목에 사용한다.

• 스타일링을 위해 사용하지 않는다.

a : Anchor

• 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결 할 수 있는 하이퍼링크를 만든다

• inline 요소이지만, 예외적으로 블록 요소들을 감쌀 수 있다!

  <a href="b.html">b.html으로 이동</a>
  <a href="b.html" target="_blank">b.html 새탭으로 이동</a>
  <a href="b.html" download>b.html 파일 다운로드</a>
  <a href="mailto:google@gmail.com">mailto:google@gmail.com</a>
  <a href="tel:010-0000-0000">010-1234-1234</a>

• href 속성과 id를 사용해서 페이지 내에서 이동하는 해시(#) 링크를 만들 수 있다.

  <a href="#some-id">some id로 이동</a>
  <!--div 태그로 바로 이동-->
  <div id="some-id">

• href : hypertext reference (하이퍼텍스트 참조)
  • tel : 전화번호
  • mailto : 이메일 주소
  • 접두사가 없으면 주소로 가정

• target 속성값
  • _self : 현재 페이지 (기본값)
  • _blank : 새 탭

• download : 링크 이동 대신 사용자에게 URL에 위치하는 대상을 저장할지 물어본다.
  • 이때 브라우저에서 바로 열 수 있는 파일 포맷이라면 바로 실행

p : Paragraph(문단)

• 이미지나 입력 폼 등 서로 관련 있는 컨텐츠는 무엇이든 될 수 있다.

• 블록 요소

• 반드시 하나의 완성된 문장이 들어가야 한다.

strong :

• 중대하거나 긴급한 콘텐츠를 나타낸다. 단어 또는 문장일 수 있다

• 기본적으로 굵은 글꼴이 적용

• 스크린 리더를 사용하여 컴퓨터 화면을 낭독할 때, strong 사이에 있는 문자는 거센 억양으로 소리를 내어 발음한다.

• <b></b> : 똑같이 굵은 글꼴이 적용되지만, 특별한 의미를 가지지 않으므로 되도록 사용을 지양해야한다. (과거 HTML의 잔재)
  • 없어지지 않은 이유? ⇒ 하위호환성 (기존에 b태그를 사용한 페이지를 지원하기 위해)

br :

• break(line break)의 약어로 줄을 나눈다는 뜻

• HTML은 엔터값을 인식하지 않기 때문에 HTML파일에서 여러 줄로 되어있어도 실제 화면에서는 한 줄로 보인다.

hr :

• 이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용

• 단락을 구분할 때 사용하므로 <p> 태그 내의 사용은 하지 않는다 (p는 하나의 온전한 문장을 나타내므로)

code :

• 짧은 코드 조각을 나타낼 때 사용

• 텍스트의 고정 폭 글꼴을 사용

pre :

• HTML에 작성한 내용 그대로를 표현

• 텍스트는 고정 폭 글꼴을 사용하고, 공백을 그래도 유지

• 공백이 필요한 코드, 혹은 텍스트를 사용해 그림을 그릴 때 사용

• 픽셀로 조정하는 것보다 세밀하게는 조정이 불가능하다, 폰트 변경도 어렵다

4. 목록 태그

동일한 카테고리가 3개이상 반복된 경우, 리스트로 만드는게 좋다

ol : ordered list (순차적 목록)

• 정렬된, 순서가 있는 보통 숫자 목록을 의미

• 순서가 중요한 목록에 사용

• type : 항목을 셀 때 사용할 카운터 유형 (거의 안쓴다. 왠만하면 디자이너가 만듦)
  • l : 숫자(기본값)
  • a : 소문자 알파벳
  • A : 대문자 알파벳
  • i : 소문자 로마 숫자
  • I : 대문자 로마 숫자

• start : 항목을 셀때 시작할 수, 아라비아 숫자만 가능

• reversed : 순서 역전

ul : unordered list (비순차적 목록)

• 정렬되지 않은, 보통 불릿으로 표현되는 목록을 의미

• 순서가 중요하지 않은 목록에 적용합니다.

li : list item

• 목록의 항목을 나타낸다

• 단독으로 사용할 수 없다

• ol, ul의 자식요소로는 li만 사용할 수 있다. 단 자손 요소로는 다른 태그도 사용가능

dl : description list (설명 목록)

• 주로 용어와 그에대한 설명을 함께 그룹화 하는데 사용된다.

• 하위요소
  • dt : 용어, 용어 정의
  • dd : 용어에 대한 설명

• dd 는 dt에 비해 들여쓰기가 되어있는 것 처럼 표기되므로 일반적인 리스트와 용도가 다르다!

5. Media

img : image

• 문서에 이미지를 삽입

• src : 경로

• alt : 대체 텍스트, 이미지에 대한 설명
  • src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여준다
  • 시각장애인을 위한 스크린리더를 지원
  • 이미지를 대체하는 텍스트가 중복이라면 alt=”” 생략이 아닌 빈 값으로 둔다.

• 이미지 하단에 빈 공간이 있는 이유?
  • img가 inline요소이기 때문 (텍스트를 표현하기 위한 요소)
  • img의 세로 정렬이 글자의 baseline을 따르게 된다.

    

  • 이를 해결하려면, 다음과 같은 초깃값을 넣어주면 된다.

    img{
    vertical-align:top;
    }

6. 기타

• time : 날짜나 시간 정보를 나타내는 태그
  • datetime 속성 : 날짜와 시간을 기계가 읽을 수 있는 형태로 명시

<h3>날짜</h3>
<p><time datetime="2019">2019년</time></p>
<p><time datetime="2019-12">2019년 12월</time></p>
<p><time datetime="2019-12-25">2019년 12월 25일</time></p>
<p><time datetime="12-25">크리스마스</time></p>
<p><time datetime="2019-W20">2019년의 20번째 주</time></p>

<h3>날짜와 시간</h3>
<p><time datetime="2019-12-24T23:00">2019년 12월 24일 저녁 11시</time></p>
<p><time datetime="2019-12-24 23:00">2019년 12월 24일 저녁 11시</time></p>
<p><time datetime="2019-12-24T23:59:59">2019년 12월 24일 저녁 11시 59분 59초</time></p>
<p><time datetime="2019-12-24T23:59:59.234">2019년 12월 24일 저녁 11시 59분 59초 234밀리초</time></p>

<h3>기간</h3>
<p><time datetime="P2D">2일의 기간</time></p>
<p><time datetime="PT15H10M">15시간 10분의 기간</time></p>

<h3>시간</h3>
<p><time datetime="09:00">아침 9시</time></p>
<p><time datetime="09:00+09:00">한국 시간(UTC+9)으로 아침 9시</time></p>
<p><time datetime="09:00-05:00">미국 뉴욕 시간(UTC-5)으로 아침 9시</time></p>

2. 양식 (form)

• 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.

• form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그이다. 별도 제출할 필요가 없다면, 꼭 form 태그를 사용하지 않아도 된다.

• 단점 : 양식을 보낼 때 반드시 새로고침이 발생한다. (서버에 데이터를 보내면 브라우저에 새로운 정보가 들어올 것이라고 기대하기 때문에)
  • 갱신할 필요 없는 정보까지 다시 렌더링 하기 때문에 시간이 오래 걸림

method 속성

• 양식을 제출할 때 사용할 HTTP 메서드

Post

• 양식 데이터를 요청 본문으로 전송

• 브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음

• POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송

• 데이터의 길이제한이 없고, GET방식보다 보안성이 높음

• enctype 속성 (encoding type)
  • method 특성이 post인 경우 enctype은 양식 제출 시 데이터의 MIME 타입을 나타낸다.

  💡

  MIME 타입
  - 클라이언트에 전송된 문서의 다양성을 알려주기 위한 메커니즘.
  - 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지 결정하기 위해 사용
  - 파일의 확장자 또는 내용에 기반하여 파일이 어떤 종류의 데이터인지를 명시적으로 지정
  - 주로 HTTP 헤더에서 Content-Type 헤더를 통해 전송
  

  • application/x-www-form-urlencoded: 기본값
  • multipart/form-data : <input type=”file”>이 존재하는 경우 사용

Get

• https://example.com?name=홍길동&age=20

• 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송

• GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장

• 보통 쿼리 문자열에 포함되어 전송되므로 길이의 제한이 있음(브라우저마다 다름)

• 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청

name/value

• 이름/값(name/value)의 짝으로 양식과 함께 전송

• 사용자가 input에 입력한 값이 value가 된다.

• value가 없다면, 초기값이 있는경우 초기값을 전송한다.

Action 속성

• 작성된 양식 데이터를 처리할 프로그램의 URL을 적어준다

• 이 속성을 지정하지 않으면 데이터는 form에 있는 페이지의 URL로 보내진다.

autocomplete 속성 (on/off)

• 입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄

• 이전에 해당 양식의 입력된 값이 있을 경우(브라우저에 기록이 남아있을 경우 나타남)

Label

• 사용자 인터페이스의 항목

• input과 함께 사용한다
  • 스크린 리더기에서 입력해야하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 한다
  • label을 클릭하여 input에 포커스를 이동시키거나 활성화 시킬 수 있다.

• label과 input을 연결하기 위해선 for을 사용하거나

• label 안에 input을 중첩해서 연결해야 한다.

💡

label 안에 제목요소를 배치 하지 말 것!
- form에 제목이 필요한 경우
fieldset legend 사용하기

💡

type="button"선언과 유효한 value 속성을 가진 input  요소에는 레이블이 필요하지 않다.

<input type="button" value="button">
<button type="button">button</button>

button

• 사용자가 클릭할 수 있는 요소

• form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있다

button의 타입

• button : 기본행동이 없음. JavaScript와 연결하지 않으면, 클릭했을 때 아무것도 하지 않는다.
  • 양식 제출용이 아니라면 타입을 꼭 button으로 지정
  • form 태그 안에 들어가있으면 submit의 역할을 한다.

• submit : 서버로 양식 데이터를 제출한다.

• reset : 초깃값으로 되돌린다.

<a> vs <button>의 차이

1. 오른쪽 마우스 버튼을 클릭하면, 링크를 새 탭에서 열거나, 링크를 저장하는 등의 추가 옵션이 있는 컨텍스트 메뉴가 표시된다

2. shift + click, cmd + click 과 같은 사용시 특수한 기능을 한다

3. 마우스오버, 포커스가 되었을 때 이동할 url 주소를 브라우저 창 하단에 노출한다.

	a	button
역할	하이퍼링크	사용자의 동작 실행을 위한 트리거
기능	다른 페이지 혹은 페이지 내의 특정 영역으로 이동	브라우저 기본동작 없음. JS를 이용하여 동작 추가 (submit: form 전송 / reset: form 초기화)
키보드	엔터	스페이스, 엔터
주의	href 값 없이 JS로 동작하게 하면 안됨!	JS로 동작

input

공통 속성

type	input 양식 컨트롤의 유형 (button, text, email, file…)
name	input 양식 컨트롤의 이름
value	input 양식 컨트롤의 값
autocomplete	on/off 양식 자동완성 기능에 대한 힌트(check, radio 제외)
placeholder	양식 컨트롤이 비어있을 때 나타나는 내용 - 입력에 대한 힌트 제공 ex) 숫자, 문자 조합의 6자 이상
required	양식 전송을 위해 필수로 입력해야하는 값
disabled	비활성화
readonly	수정불가(읽기전용)

💡

readonly vs disabled

readonly: 사용자가 입력할 수 없으나 value가 있다면 값을 넘길 수 있음
disabled: 사용자가 입력할 수 없고 기존 value가 있어도 넘길 수 없음

input 유형 <input type=”___”>

button	버튼. 기본행동 없음. value로 버튼 텍스트 표시
submit	양식 전송
reset	form 내용을 기본값으로 초기화
text	텍스트 입력
password	비밀번호 입력(값이 가려짐)
email	이메일 입력
search	검색 문자열 입력(삭제 아이콘 포함)
tel	전화번호 입력
url	웹페이지 주소 입력
number	숫자 입력
checkbox	단일 값을 선택하거나 선택 해제
radio	선택 항목중 하나만 선택
file	파일 업로드
date	날짜 입력(년,월,일) - 시간 없음
datetime-local	날짜와 시간을 지정
month	연과 월 입력
time	시간 입력
color	색 선택
range	슬라이드 바 형태
hidden	보이지 않지만 값은 서버로 전송하는 컨트롤

💡

Q. 그냥 email, tel, url, number 같은 경우 text로 값을 받아도 되지 않나요?

• type을 통해 어떤 데이터를 받는지 예측할 수 있습니다. 코드의 가독성이 좋아진다

• 모바일에서 type에 따른 키패드 UI가 조금씩 다르다! 적절한 input type은 사용자의 경험을 개선시킬 수도 있다

button, reset, submit

• <button type=”___”> 태그와 동일한 기능을 수행

💡

어떤걸 써야할까?

<input type=”button” value=”버튼”>

<button type=”button">버튼</button>

input 태그의 경우 빈태그 요소이기 때문에
value 특정에 텍스트 값 밖에 지정할 수 없다.
button 태그의 경우 여는태그와 닫는 태그 사이에
여러 컨텐츠 삽입이 가능하다!

text / password / url / search / tel

• maxlength : 문자수 최대 길이

• minlength : 문자수 최소 길이

checkbox / radio

• checkbox : 단일 값을 선택하거나 선택 해제할 수 있는 체크박스

• radio : 같은 name을 가진 여러개의 선택중에서 하나의 값을 선택

• checked : 체크 여부

file

• 파일을 지정할 수 있다

• accept : 허용하는 파일 유형을 지정할 수 있다

• multiple : 지정할 경우 사용자가 여러개의 파일을 선택할 수 있다

number

• 숫자 입력, 화살표 컨트롤 제공

• max : 최대값

• min : 최소값

• step : 증가값

select

• 옵션 메뉴를 제공

• multiple : 여러개의 항목을 동시에 선택할 수 있다.

• size : 한번에 노출되는 항목의 수를 조절

• required : 선택 필수

• disabled : 선택 불가

option

• 메뉴의 각 옵션을 정의

• 모든 option은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요
  • 지정하지 않은 경우, option 내 텍스트 값으로 사용

• selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러온다.

optgroup

• option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있다.

fieldset

• form 관련 요소들을 묶을 때 사용

• disabled 를 사용할 경우 모든 자손 컨트롤을 비활성화 한다

legend

• 그룹의 제목을 제공

textarea

• 여러줄의 text를 입력받을 수 있다

textarea 속성

• cols : 입력창의 너비, 문자의 평균적인 넓이를 기준으로 한다. (기준값 20)
  • 문자의 크기에 따라 다를 수 있다. (작은 문자는 col이 10이더라도 11이 나올 수 있음)

• rows : 기본적으로 보여줄 입력 줄 수를 의미

• maxlength : 사용자가 입력할 수 있는 문자 최대 길이

• minlength : 사용자가 입력해야 할 문자 최소 길이

• placeholder : 컨트롤에 무엇을 입력해야 하는지 알려주는 힌트

• textarea 크기 비활성화 CSS

textarea{
	resize:none;
}

table (표)

• 테이블을 생성할 때 사용

• <table>은 테이블 데이터의 컨테이너 요소

  

tr, th, td

• tr : table row, 테이블 행

• th : table header, 테이블의 행, 열의 제목을 나타내는 셀

• td : table data, 셀 내용

caption

• 테이블의 제목이나 설명을 의미

• table의 첫번째 자식으로 사용

• 선택적으로 사용하면 된다. 필수 X

• 표의 목적에 대한 명확하고 상세한 설명을 포함하는 <caption>요소를 제공하여 사용자가 표 컨텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있습니다

• CSS caption-side 속성으로 : top, bottom으로 위치를 설정할 수 있다

thead, tbody, tfoot

• 테이블의 머리글, 본문, 바닥글을 의미

• 구역을 나누는 요소로 사용

• 필수 요소는 아니므로 선택적으로 사용하면 됨. 코드의 가독성을 위해 명시적으로 사용하면 좋음

• <thead> : 테이블 행 블록 내에 제목 열 그룹으로 구성할 경우 사용

• <tbody> : 행 블록 내에 테이블 데이터로 구성할 때 사용

• <tfoot> : 행 블록 내에 열 요약으로 구성할 때 사용

속성값

colspan, rowspan

• 셀 병합 속성

• colspan : 열 병합, rowspan : 행 병합

colgroup

• 테이블 열 그룹을 만들고 싶을 때 사용

col

• 테이블 열을 하나 이상 묶을 때 사용. colgroup 요소 내부에 포함되며 필수 요소는 아니다

• CSS와 함께 col에 일부 스타일을 지정할 수 있다. (background, border)

3. 추가할 내용

• Inline 요소 추가 조사하기 X

• MIME 타입 O

4. 과제

프론트엔드에서 중요한 점 : 필요없는 HTML 태그를 줄이는것!

CSS로 처리가 가능하면 CSS로 처리하자

form 내부에 있는 버튼은 type=submit을 명시하지 않아도 자동으로 submit이 된다.

<h1>로그인</h1>
<form action="">
<p>아이디와 비밀번호를 입력하고 로그인하세요</p>
<label>
아이디 <input type="text" required>
</label>
<label>
비밀번호 <input type="password" required>
</label>
<label>
<input type="checkbox"> 아이디 저장
</label>
<button type="submit">로그인</button>
</form>

radio 타입이 여러개 있는 경우, 맨 처음 요소에 required를 넣으면 자동으로 다른 radio 타입에도 required가 적용된다

checkbox 에 required를 넣는 경우 : 정보제공 동의서 처럼 하나만 선택해야하는 경우

비밀번호 조건 등은 정규표현식을 통해 구현할 수 있다.

• 정규표현식 테스트 사이트 : https://regexr.com/

<h2>회원가입</h2>
<form action="">
<p>원활한 서비스를 이용을 위해 회원가입을 해주세요</p>
<label>
아이디 <input type="text" required>
</label>
<label>
이메일 <input type="email" required>
</label>
<label>
비밀번호 <input type="password" required>
</label>
<label>
닉네임 <input type="text" required>
</label>
 <fieldset>
        <legend>성별</legend>
        <label>
            <input type="radio" name="gender" value="men" required> 남성
        </label>
        <label>
            <input type="radio" name="gender" value="women"> 여성
        </label>
        <label>
            <input type="radio" name="gender" value="none"> 선택 안함
        </label>
    </fieldset>

    <fieldset>
        <legend>사용 기술</legend>
        <label>
            <input type="checkbox" name="skill" value="html"> HTML
        </label>
        <label>
            <input type="checkbox" name="skill" value="css"> CSS
        </label>
        <label>
            <input type="checkbox" name="skill" value="javascript"> JavaScript
        </label>
        <label>
            <input type="checkbox" name="skill" value="python"> Python
        </label>
        <label>
            <input type="checkbox" name="skill" value="github"> GitHub
        </label>
        <label>
            <input type="checkbox" name="skill" value="postgresql"> PostgreSQL
        </label>
    </fieldset>
    <button>회원가입</button>
</form>

thead, tbody는 테이블의 규모가 클때만 사용해도 된다. 크기가 작으면 생략해도 무방

time태그를 사용해 시간임을 명시해줘도 좋다.

<table>
<caption>
글목록
</caption>
<tr>
<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>조회수</th>
</tr>
<tr>
<td>2</td>
<td><a href="">위니브에서 수강생분들에게 알려드립니다.</a></td>
<td>홍길동</td>
<td><time datetime="2023-04-25">2023.04.25</time></td>
<td>999</td>
</tr>
<tr>
<td>1</td>
<td><a href="">위니브에서 수강생분들에게 알려드립니다.</a></td>
<td>홍길동</td>
<td>2023.04.25</td>
<td>999</td>
</tr>
</table>

5. 오늘의 소감 / 떠오르는 생각 :

꽤 빠르게 진도를 나간 듯 한데 아직도 태그를 다 배우지 않았다는 걸 알고 당황…ㅎ

결국 하면서 알아가는 수밖에 없을 것 같다.

기술스택을 적을 때, 대소문자 구분을 고려해 정확한 명칭을 적어야 한다. (Spring, Java)