1. 태그

✔️ 제목과 단락

<h1> ~ <h6> 제목

• <h>태그는 계층구조를 꼭 지켜야한다.

<p> 문단

• 텍스트, 이미지, 입력 서식 등 연관성이 있는 콘텐츠로 구성할 수 있다.

✔️ 이미지와 피규어

<img src="주소" alt="대체텍스트"> 이미지

• 속성으로 title과 alt 둘 다 사용 가능하지만 중복된 value를 넣어주면 안된다.

<figure>

• 이미지, 도표, 차트, 표 등 캡션과 함께 묶어주는 요소

<figcaption>

• <figure> 안에 있는 요소 설명

✔️ 목록

<ul> 비순차목록

<ol> 순차목록

<li> 목록

<dl> 설명 목록

<dt> 용어 제목

<dd> 용어 설명

• 꼭 용어가 아니여도 key, value 관계로 사용할 수 있다.

• 문법상 <dt> <dd> 여러개 사용이 가능하다.

• 하지만 여러개 사용시 스크린리더가 <dt> <dd> 관계를 이해못해서 안내가 안될 수 있다.

• <dl>은 자식 요소로 <dt> <dd>만 받았는데 현 HTML5에서는 <div>도 받는다.

✔️ 하이퍼링크

<a href="주소'> 링크 이동

• 마우스를 올리면 포인터 모양으로 바뀐다.

• href 속성에 / (슬래시)를 넣으면 해당 폴더로 이동한다.

• href 의 tel 프로토콜, mailto 프로토콜 등을 넣을 수 있다.

✔️ 인용문과 줄바꿈

<q> 한줄 인용 구문

<blockquote> 여러 줄의 인용 구문

<cite> 출처

<br> 줄바꿈

• 해당 태그는 저작권 관련 이슈가 발생할 수 있으니 조심 또 조심해야한다.

✔️ 어휘 요소들

<em> 강조의 표현

• 기울임꼴로 표시된다.

<strong> 아주 중요한 강조의 표현

• 중대하거나 긴급한 콘텐츠를 나타낸다.

<b> 굵게

• 중요성, 관련성 없이 다른 글자와 구분을 목적으로 사용하는 요소

<i> 주위와 구분해야하는 부분

• 등장인물의 생각, 외국어 구절, 기술 용어 등

• 기울임꼴로 표시된다.

✔️ section 관련 요소

<header> 헤더, 제목

<main> 본문

<nav> 내비게이션, 메뉴

<footer> 푸터, 저작권 정보

• <header> <footer> 은 여러가지가 존재할 수 있다.

<section> 일반 섹션

• 더 적합한 의미를 가진 요소가 없을 때 사용한다.

• 각각의 <section>을 식별할 수단이 필요하다. 주로 제목 요소로 식별한다.

<article> 독립 섹션

• 문서, 페이지 안에서 독립적으로 구분해 배포하거나 재활용할 수 있는 구획을 나타낸다.

• 각각의 <article>을 식별할 수단이 필요하다. 주로 제목 요소로 식별한다.

• ex) 게시판 , 뉴스 기사

<aside> 보조 섹션

• 주로 <main> 에 내용을 해치지 않는 부가적인 정보

• ex) 광고, 사이드바

✔️ 컨테이너

<div> 블록 요소

<span> 인라인 요소

• 요소를 묶어주는 의미를 가지지 않는 컨테이너 요소

✔️ 텍스트 레벨 요소

<sub> 아래첨자

<sup> 윗 첨자

<mark> 관련 참조 하이라이트 된 글자 요소

• 검색 했을 때 형광색배경이 들어오는 요소

<abbr> 요약이라는 걸 알려주는 요소

<s> 취소선

<del> 제거된 텍스트

<ins> 추가된 텍스트

<time> 날짜, 시간 요소

<small> 저작권과 법률 표기 등의 작은 텍스트

✔️ address 요소

<address> 주소 및 연락처 정보

• 사람, 단체, 조직에 대한 연락처 정보

• 반드시 포함해야 하는 정보는 연락처가 가르키는 개인, 조직, 단체의 이름이다.

• 기울임꼴로 표시

✔️ Embedded 요소 ⭐

<img src="주소"> 이미지

<video> 비디오

• HTML5부터 브라우저가 비디오를 임베드 할 수 있게 되서 플러그인을 안깔아도 된다.

<audio> 오디오

• 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고른다.

<track> 트랙

• <audio> <video> 태그의 자식

• 자막 등 시간 기반 데이터 지정할 때 사용

<iframe> 중첩 브라우징 맥락 요소

• 현재 문서 안에 다른 HTML 페이지를 삽입한다.

• Width값을 조정한다고 height값이 자동으로 조정되지 않는다.

<map> 이미지 태그와 연결한다.

• 현재는 잘 안쓰인다.

• name 속성의 값은 고유해야 한다.

• <area> 와 같이 쓰인다.

<area> 이미지 핫스팟 정의

• <map> 요소 안에서만 사용할 수 있다.

• 이미지 맵에서 영역을 지정한다.

<picture> 이미지의 대체 버전을 제공하는 요소

• <img> 태그가 무조건 있어야 한다.

• 반응형에서 사용된다.

<source> 다중 미디어 리소스 지정

• 생략이 가능하다.

✔️ 테이블 관련 요소

<table> 표

<tr> 표의 행(가로)

<th> 그룹 헤더

• default 가운데 정렬

`<td> 데이터

• default 왼쪽 정렬

<caption> 표의 설명 또는 제목

• <table> 안에서 사용하여야 한다.

<thead> 열의 머리글, 첫번째 행

<tbody> 표 본문

<tfoot> 열의 요약, 마지막 행

• <thead> <tfoot> 은 테이블 1개당 1 개만 사용가능

• <tbody> 여러개 사용 가능하다.

<col> 표의 열(세로)

<colgroup> 열의 묶음

✔️ 폼 관련 요소 ⭐

• 웹 문서가 서로 상호작용 할 수 있도록 하는 역할

• 접근성 측면에서도 중요한 부분이기 때문에 사용자의 환경을 고려하여 표준 문법에 맞게 마크업 해야한다.

<form action="서버url">

• 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서

<input type="">

• 사용자의 데이터를 받을 수 있는 컨트롤 생성

• type에 따라 동작 방식이 달라진다.

<input>의 다양한 type

<label>

• 연관된 요소에 대한 설명

• 1개의 <lable> 1개의 <input> = 관계설정 필수

<button type="">

• 클릭 가능한 버튼

• default type은 submit 이다.

• 원래는 <form> 안에 <button>이 있어야 하나 HTML5 에서는 <form>밖에 있어도 연결할 수 있다.

<select value="">

• 옵션 메뉴를 제공하는 컨트롤

<optgroup>

• <select> 요소의 <option> 을 묶을 수 있다.

<datalist>

• 다른 컨트롤에서 가능한 선택지를 나타내는 <option> 의 목록을 담아준다.

<option>

• <option>은 value를 지정해줘야 한다.

• <select> <optgroup> ````` 요소의 항목을 정의

<textarea>

• 일반 텍스트 편집 컨트롤

<fieldset>

• 여러 컨트롤과 <label>을 묶을 때 사용한다.

• 현재는 많이 사용하지 않는다. 그 이유는 flex를 사용할 경우 레이아웃이 무너지는 이슈 발생

• <div> 로 묶어서 flex로 배치한다.

<legend>

• <fieldset> 의 설명

<progress>

• 어느 작업의 완료 정도

• 진행 표시줄의 형태를 띈다.

<output>

• 계산이나 사용자의 행동 결과를 삽입할 수 있는 컨테이너 요소

• 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않는다.

<meter>

• 특정 범위 내에서 백분율 값

• value가 소수가 아닌 이상, min과 max를 정의해 value값이 그 안에 들어가도록 해야 한다.

🏷️ 배운 속성

charset

http-equiv

content

name

title

role

download

hidden

aria-hidden="true"

href

rel

target

type

srcset

autoplay

muted

datatime

poster

kind

srclang

label

aria-label

frameborder

allowfullscreen 전체화면

coords

shape

usemap

scope

colspan

method

required

value

open

참고자료

✔️ 전역 속성

• 모든 요소가 가질 수 있는 속성
  class id title style lang data- ...

참고자료

---

2. 회고

오늘도 진도 무엇이냐.. 게다가 배운 속성도 너무 많고 머리에 들어오지 않는다.
그래서 다른 부트캠프를 하고 있는 친구에게 어떻게 공부했냐고 물어봤더니 어차피 실무 들어가면 구글링하게 되있다고 정리를 너무 꼼꼼하게 하려고 하지말고 이런 태그가 있다는 것만 알고 넘어가라고 조언해줬다. 그런데 노트 정리에 욕심이 나는건 왜일까 😂 그리고 공부하면서 느끼는 거지만 html은 접근성 측면이 정말 중요하다고 느꼈고 생각하면 생각할수록 엄청 어렵고 전문적이라고 생각한다. 그저 홈페이지에 동적 활동을 추가해주는 거라고 생각했는데 내가 너무 쉽게 생각하고 프론트엔드 개발자에 도전하고 있다고 생각했다. 나 자신 반성한다🤲🏻🤲🏻

강사님이 수업시간 중간중간에 학생들과 있었던 이야기를 해주시는데 오늘 들은 내용이 인상깊었다. 쇼핑몰같은 곳에서 여자냐 남자냐 선택하는 부분이 있는데 여자라고 꼭 여성적인 옷만 좋아하는건 아니기 때문에 Range type을 이용해 더 많은 선택지를 줘도 되지 않을까라고 의견을 제시한 학생 이야기였다. 사용자를 위한 고민을 끊임없이 하는 개발자가 되야 한다고 생각했다. 그리고 가상키보드 이야기도 했는데 나는 보안적인 측면에서 가상 키보드가 좋다고 생각했는데 강사님께서 이런 질문을 하셨다. '마우스를 사용하지 못하는 사람이라면?' 그 사람은 비밀번호도 못치는 것이다. 사람은 자기 경험에 의존해서 생각하는 것 같은데 정말 맞는 것 같다. 사용자의 입장에서 생각을 정말 많이 해봐야 겠다. 이런 점을 나중에 이력서에 참고해서 적어도 좋을 것 같다.

어제 오늘 빠르게 태그와 속성을 배우다보니 내일이 벌써 html 마지막 시간이다. 제대로 공부도 못했는데 내일부터 CSS 라니... 약간 절망적이다. 수업이 없는 주말에 빡세게 자습을 해야한다. 알던 내용 지나서 모르는 내용 공부하려니 따라가기 벅찬다. CSS는 얼마나 더 어려울지... 프로젝트 잘 할 수 있겠지ㅠㅠㅠ 걱정이다. 그래도 정말 다행인건 주말 특강을 따로 만들어주셔서 주말에 복습할 수 있는 시간을 가질 수 있다는 점이 좋다. 강사님들이 어떻게든 도움을 주실려는게 느껴진다😍 너무 감사하다ㅠㅠ 도와주시는 노력에 보답할 수 있게 최대한 많은 양을 흡수하려고 노력하자🔥