[데브코스/TIL] DAY2 - HTML(2)

어제에 이어서 html 태그에 대해 배웠다. html 태그를 꽤 알고 있었다고 생각했는데도 처음 알았던 태그, 사용하는 방법에 대해 명확히 짚고 넘어갈 수 있었다.

✨ HTML의 여러 태그들

1. 목록 태그

ul 태그 (unordered list)

• 순서가 없는 목록을 생성하는 태그
• 각 항목은 불렛(글머리 기호)로 표시
• 자식은 li 태그만 올 수 있다.
• type 속성: 불렛 기호 설정

ol 태그 (ordered list)

• 순서가 있는 목록을 생성하는 태그
• 각 항목은 아라비아 숫자, 로마 숫자, 알파벳 등으로 표시
• 자식은 li 태그만 올 수 있다.

dl 태그 (description list)

• 용어와 설명을 나열하는 태그
• dt 태그: 용어 표기
• dd 태그: 설명 표기

2. 링크와 이미지 태그

a 태그 (anchor)

• 하이퍼링크를 생성하는 태그
• href 속성: 링크의 목적지 url 지정
• target 속성: 페이지 열리는 방식 지정 (_blank: 새 탭에서 열기 등)
• title 속성: 링크에 대한 추가 정보 제공 (호버 시 표시)

img 태그

• 이미지를 삽입하는 태그
• src 속성: 이미지 파일의 url 지정
• alt 속성: 이미지 대체 텍스트 지정
• width 속성
• height 속성

3. 폼 구성 태그

form 태그

• 사용자 입력을 수집하기 위한 폼을 정의하는 태그
• action 속성: 폼 데이터를 전송할 url 지정
• method 속성: 폼 데이터를 전송할 방법 지정
• enctype 속성: 데이터 전송 형식 지정 (ex. multipart-form-data)
• form 내부에 있는 버튼 유의사항
  • 하나의 form에는 하나의 submit만 존재해야 한다.
  • 하나의 form에는 하나의 reset만 존재해야 한다. (근데 잘 안쓴다.)

input 태그

• 사용자로부터 입력을 받기 위해 입력 필드를 생성하는 태그
• type: 입력 필드 유형 정의
• name: 서버에서 사용할 키 지정
• value: 입력 필드 초기값 지정
• placeholder: 필드에 표시될 안내 텍스트 지정
• required: 입력 필수로 설정

input 태그의 다양한 타입들

• text
• password
• email
• number
• checkbox : 다중 선택
• radio : 단일 선택 (name 속성 필수)
• file
• submit : 제출 버튼

label 태그

• 폼 요소에 대한 설명을 제공하는 태그
• label 영역 클릭 시, 연결된 입력 필드 활성화
• for 속성: 연결할 입력 필드의 id 지정

// 명시적인 방법
<label for="name">이름</label> <input type="text" id="name" />

// 암묵적인 방법
<label>이름 <input type="text" /></label>

// 둘 다 사용
<label for="name">이름 <input type="text" id="name" /></label>

fieldset 태그

• 관련된 입력 요소를 그룹화하여 구분하는 태그
• legend 태그: fieldset 내부에서 그룹의 제목 정의

textarea 태그

• 다중 행의 텍스트 입력 필드를 제공하는 태그
• rows: 행의 수 지정
• cols: 열의 수 지정
• placeholder

select 태그

• 드롭다운 목록을 생성하는 태그
• name 속성
• size 속성: 몇 개씩 보여줄지 설정
• multiple 속성: 다중 선택 허용
• option 태그: 아래에 있음!
• optgroup 태그: 아래에 있음!

option 태그

• select 요소 내에서 선택 가능한 항목을 정의하는 태그
• value 속성
• selected 속성: 기본 선택 항목 지정

optgroup 태그

• select 요소 내에서 관련된 옵션 그룹을 만드는 태그
• label 속성: 그룹의 레이블 지정

button 태그

• 버튼을 생성하는 태그
• type 속성: button, submit, reset 등
• name 속성
  - value 속성

추가) form과 관련된 태그에서 공통적으로 사용되는 속성

• disabled 속성: 사용하지 못하도록 (완전 무용지물)
• readonly 속성: 입력하지 못하도록 (보기만 해라~)
• maxlength 속성: 글자 길이 제한
• checked 속성: 기본으로 선택되어 있는 상태로 설정
• placeholder 속성
• hidden 속성: 요즘에는 잘 안 쓰이나, 데이터가 담긴 input을 숨겨 다른 데이터와 함께 서버로 전송시키는 방식으로 쓰였음

4. 테이블 태그

table 태그

• 테이블을 생성하는 태그
• border 속성: 테이블의 테두리 두께 설정
• cellspacing 속성: 셀 간의 간격 설정
• cellpadding 속성: 셀 내부의 여백 설정
• 그러나 위의 속성들보다는 CSS 사용이 권장된다.

tr 태그 (table row)

• 테이블의 행을 정의하는 태그
• tr 태그의 자식으로 td나 th 태그가 온다.

th 태그 (table header)

• 테이블의 헤더 셀을 정의하는 태그
• scope 속성: 셀의 범위(방향) 설정 (col, row, colgroup, rowgroup)
  • ~group : 셀이 병합되어 있을 때 사용
• rowspan 속성: 셀을 여러 행(수직)으로 병합할 때 사용
• colspan 속성: 셀을 여러 열(수평)로 병합할 때 사용

td 태그 (table data)

• 테이블의 일반 셀을 정의하는 태그
• scope 속성
• rowspan 속성
• colspan 속성

caption 태그

• 테이블의 제목을 정의하는 태그
• caption-side 속성: 제목의 위치 설정 (top, bottom)
• catpion 태그는 웹접근성 향상에 도움이 되는 태그이다.
  • 제목을 넣고 싶지 않다면 caption 태그를 안 넣는 것 보다는 css 처리하는 것을 권장한다.
  • display: none;은 렌더링 자체가 안되기 때문에 caption 태그를 넣은 의미가 없어진다.
  • 아래와 같이 먼나라 이웃나라로 보내는 것이 좋다.

  position: absolute;
  top: -999px;

섹션 나누기 태그

• thead 태그: 테이블의 헤더 섹션 정의
• tbody 태그: 테이블의 본문 섹션 정의
• tfoot 태그: 테이블의 푸터 섹션 정의
• 위의 태그들은 시맨틱 태그

col & colgroup 태그

• col 태그: 단일 열에 대한 속성 정의
• colgroup 태그: span 속성과 함께 여러 개의 열을 그룹화하여 속성 정의

✏️ 메모

• JSONPlaceholder : 가짜 데이터를 제공해주는 사이트
• 글로벌 속성과 로컬 속성
  • 글로벌 속성: 태그와 상관없이 모든 속성에서 사용할 수 있는 속성 (ex. id, class)
  • 로컬 속성: 특정 태그에서만 사용할 수 있는 속성 (ex. a태그의 href, img 태그의 src)
• anchor의 target="_blank"
  • document.referrer : 사용자가 어떤 위치에서 넘어왔는지 확인 가능
  • rel="opener" : 이런 설정으로 해킹 당할 수 있음(?) 최신 브라우저에는 opener에 접근하지 못하도록 되어 있으나, 구형에는 안되어 있음
  • rel="noreferrer noopener" 하면 좋음 (만능은 아님)

📌 출처

수코딩(https://www.sucoding.kr)