[WEB] HTML 태그

종류와 중요도에 따른 태그

• <b> 태그와 <strong> 태그의 차이
• <i> 태그와 <em> 태그의 차이

<b>와 <i>는 글자를 굵게/기울어지게 만듦 → 끝

<strong>과 <em>은 글자를 굵게/기울어지게 할 뿐 아니라 그 내용을 강조하는 역할을 함

🔔 HTML 태그는 정보의 종류를 구분하는 데 사용
오늘날 스타일 정보는 CSS로 분리
상황에 따라 HTML 태그로 한 스타일링은 적용되지 않을 수도 있으니 CSS에 명시해줄 것을 권장함

인용하기

HTML에서 인용하기

이미지 넣기

alt 속성

이미지가 깨질 때 나오는 caption

title 속성

이미지에 마우스 오버 할 때 나오는 caption

⇒ 두 속성 내용이 중복되는 것을 권장하지 않음

src 속성

절대 경로 혹은 상대 경로

• 절대 경로: 전체 주소 작성 시
• 상대 경로: 프로그램 폴더 내 e.g.) 내 프로그램 안의 images 폴더 내의 coding.png

  src="./images/coding.png"

  e.g.) 현재 주소 폴더 밖으로 나가서 images 폴더 내의 coding.png

  src="../images/coding.png"

width height 속성

둘 중 하나만 지정해주면 해당 속성에 맞춰서 원본과 같은 비율로 보여짐

둘 다 지정 시 비율과 상관 없이 지정된 값에 따라 이미지 보여짐

CSS에서 더 자세히 다뤄질 것

map 속성

거의 사용되지 않지만 간혹 지도 이미지의 특정 지역 클릭 시 해당하는 링크로 연결해주는 기능 구현 시 필요

더 쉬운 방법: 이미지 맵 생성 사이

표 사용하기

• 기본

table thead/tbody tr td

• 헤더 지

th scope="row" th scope="col"

-> 실제로 보여지는 건 달라지지 않음 (<b>와 <i> vs <strong>과 <em> 참고)

하지만 컴퓨터가 해당 페이지를 분석하거나 스크린 리더로 화면을 확인하는 사용자들에게 보다 체계적으로 정보 전달 가능하기 때문에 사용함

• 셀 병합

rowspan colspan

예시) 열 2칸 병합 (보여지는 건 가로로 길어짐)

1. colspan="2"
2. 병합되는 내용 지워주기

예전에는 표로 레이아웃 짜던 시절 있었음 → 요즘은 CSS로 함
레이아웃에 표 사용 ❌
표는 표 용도로만!

• column 별로 따로 관리하기

colgroup 지정

col 로 구역 구별

class 지정 후 각각에 별도의 CSS 적용

다른 곳으로의 링크

a 태그

• 주요 속성

href hypelink reference 연결할 주소

target 링크를 열 곳 옵션

="self" 현재 탭에서 링크 열기

="blank" 새 탭에서 링크 열기

="parent" iframe (inline frame) 의 부모 (바로 이전) 탭에서 링크 열기

="top" iframe의 최고 조상 탭에서 링크 열

id 값을 사용한 요소로의 이동

href 사용 - 해당하는 id의 요소로 scroll 됨

address 태그

mailto: tel: 연락처 연결

사용자로부터 입력받기

form 태그

같은 곳으로 보내지는 내용은 하나의 form 안에 담김

나중에 Js 이용하면 form 태그 없이도 정보 보내는 기능 구현 가능하지만 권장되는 HTML의 정석은 form 태그 이용한 구조

autocomplete 속성

기본적으로 on

이전에 입력한 내용 자동으로 보여줌

input 태그 & 이를 수식하는 label 태그

label이 클릭 영역 확장 시켜줌

type 속성

• text text maxlength 최대 글자 지정 password minlength 최소 글자 지정 search 쓰는 도중에 x 또는 돋보기 아이콘 클릭 가능
  
• number → min max 속성으로 범위 조 number range 단독으로 사용 시 몇에서 몇까지 range 조절이 가능한지, 현재는 어느 포인트인지 알기 어려우므로 Js를 같이 사용 step 간격 step 속성 삭제 → 뚝뚝 끊기던 조정키 부드럽게 만들 수 있음 date
  
• check checkbox checked 처음부터 check 될지 결정함 radio 하나 고르면 같은 group (같은 name) 의 미리 선택된 하나가 안 선택 value 사용자가 radio에 정보 입력해서 제출하면 서버에 실제로 넘겨질 값
  
• select select 태그 multiple 다중 선택 - Ctrl/Shift 클릭 → 사용자에게 친절하지 않으므로 보통은 체크박스로 처리 optgroup 으로 카테고리 지정 - label 속성으로 이름 지어주기 datalist 의 id로 입력칸에 들어갈 내용들 전해짐
  
• button button type 속성 submit 제출 reset 초기화 button 기본 동작 없음 - 나중에 자바스크립트로 구현
  
• textarea type text는 value 속성 안에 기본값 넣어줌 textarea는 태그 안에 넣어줌
  
• 기타 file 파일 첨부 accept 어떤 걸 받아들일지 결정 - 아무것도 지정 안 하면 모든 타입 받음 email 이메일 타입으로 입력받기 어느 정도 이메일 형식 (@만 있으면 됨)을 요구할 수는 있지만 더 철저한 기준은 Js로 지정해주어야 함
  

fieldset 태그

작은 그룹으로 input들을 묶어 놓음

legend fieldset의 제목

disabled 속성

어떤 조건에 따라 특정 fieldset의 입력을 비활성화 할 때 사용

requested 속성

필수 입력 요소 지정

autofocus 속성

페이지 나타날 때부터 자동으로 선택되어 있음

readonly vs. disabled

사용 불가

readonly는 값 전송됨, 그러나 사용자가 바꿀 수 없음

disabled는 값 전송되지도 않음

• progress 보여

progress 태그

입력은 아니지만

온라인에서 무언가 진행될 때 로딩 바

max 속성

기본값 = 1

meter 태그

optimum 속성으로 초록, 빨강, 노랑으로 색깔 변화

마치며

pre 태그

잘 사용 X

스크린 리더가 건너뛰기도 함

들여쓰기가 똑같이 적용되므로 코드가 지저분해짐

iframe 태그

웹사이트 안에 또다른 웹사이트 넣기

특별한 상황이 아니고서 잘 안 쓰는 이유:

• 보안상 위험
• 사용성 저하 (뒤로가기 문제)
• 검색 최적화 제한
• 브라우저에 무리

kbd 태그

키보드 입력 나타내기

dfn 태그

small 태그