HTML 정리

1. HTML 기본 구조

DTD란?

DTD = Document Type Definition(문서 형식 정의)
"이 HTML 문서는 어떤 규칙으로 작성되었는지 알려주는 선언문"

<!DOCTYPE html> 이게 바로 DTD선언이다.
"브라우저야, 이 문서는 이런 규칙으로 만들어졌어! 그 규칙대로 읽어줘~"

1) 왜 중요할까?

브라우저가 어떤 버전의 HTML인지 알아야 제대로 화면에 보여줄 수 있기 때문이다.

2) DTD의 종류

• HTML5(현대 표준)
  <!DOCTYPE html> 최신 브라우저는 이것만으로 문서가 HTML5이다를 표기함!

• HTML 4.01(조금 오래된 HTML에서 사용)
  Scrict(엄격한 버전)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    Transitional (과도기 버전)

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    Frameset (프레임 사용 시)

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
    

👉 지금은 거의 안 써! HTML5가 더 간단하고 강력해서!

• XHTML(XML기반 HTML)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML을 더 엄격하게, XML처럼 쓰고 싶을 때 사용했지만 요즘은 대부분 HTML5로 넘어옴!

HTML 요소

• 기본 언어 설정이 필요하다(lang = "ko-KR")
• 기본 언어에 따라 스크린리더 등의 보조기기에서 설정 언어로 발음텍스트를 읽어준다.

HEAD 요소

• 문서의 메타데이터를 포함하는 영역으로 실제로 화면에서 표시되지 않는 정보들을 포함하고 있다.
• 주로 HTML 문서의 설정과 관련된 정보를 제공한다.

TITLE 요소

• HTML 문서의 제목을 정의(북마크 시에도 적용)
• 장식성 문자 사용시 스크린리더 등 보조기기 사용자에게 불필요한 정보 제공
• 검색 순위에 영향을 미치는 요소 -> 중요한 키워드를 사용해야함!

BODY요소

• 웹 페이지의 몸통으로 사용자가 보는 모든 곳을 설정하는 영역이다.

---

2. 제목과 단락

제목 요소

• 제목 요소는 <h1> ~ <h6>을 사용할 수 있다.
• 제목을 건너뛰지 않도록 사용에 주의 및 <h1>은 웹에 적절한 제목 선정이 필요!

<h1>이것이 해딩입니다.</h1>

문단 요소

• <p>요소는 paragraph(절)을 의미한다.
• p요소는 다른 블록레벨 요소(<div>, <h1> 등)를 포함할 수 없지만 인라인 요소(<a>, <span>등)는 포함할 수 있다.

<p>이렇게 하나의 단락을 문장으로 묶을 수 있도록 도움을
 주는 태그요소를 p라고 합니다. p태그는 블록테그입니다.</p>

숨김 콘텐츠

• 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 정보를 제공하면서, 시각적으로는 화면에 표시되지 않도록 합니다.

---

3. 이미지와 피규어

이미지 요소

• 이미지를 삽입할 때 사용되는 태그이다. <img src="" alt="">이 기본 태그의 속성이다.
  • 이미지의 종류는 비트맵(레스트) 이미지와 벡터 이미지가 있다.
• src와 alt는 필수 속성이다.
• src 속성에는 이미지 파일의 경로를 지정한다. 이때 절대 또는 상대경로를 모두 사용할 수 있다.
• alt 속성은 대체택스트이다. 따라서 이미지를 볼 수 없는 환경에서도 동등한 정보를 이해할 수 있도록 적절한 정보를 제공해야 한다.

<img src="이미지 위치 or image url" alt="이미지 대체 텍스트" />

1) 이미지 지연 로드

loading 속석의 값을 지정하여 이미지의 지연 로드를 할 수 있다. 이러한 방식은 사용자가 이미지를 실제로 필요로 할 때 로드하는 기술로 성능 최적화와 관련이 된다.

• Lazy Loading (MDN)
• 이미지 성능(web.dev)
• 웹성능(MDN)
• 웹성능(Web.dev)

  Lazy Loding(MDN)
  <svg> 요소로도 이미지를 삽입할 수 있다. 단<svg>요소의 경우 alt속성을 제공할 수 없기 때문에 <title>과 <desc>요소를 사용하여 대체 텍스트와 추가 설명을 제공해야 한다.
  <svg>이미지의 경우 사용자와 상호작용할 수 있는 인터렉티브 요소(예 - <a>, <button>)일 경우 aria-label 또는 aria-labelledby 속성을 사용하여 대체텍스트와 추가 설명을 제공한다.

피규어 요소

<figure>와 <figcaption>요소는 HTML5에서 제공되는 시멘틱 요소로, 주로 이미지나 다이어그램과 같은 콘텐츠를 설명하는데 사용된다.

	<figure>
      <img src="local 위치" alt="" width="100" height="100" />
      <figcaption>챗봇 서비스</figcaption>
   	</figure>

• <figure>요소는 독립적인 콘텐츠를 그룹화하는데 사용.(이미지, 그래프, 다이어그램, 코드 스니펫 등 포함 가능)
• <figcaption>요소는 <figure>요소 내의 콘텐츠에 대한 설명이나 캡션을 제공하는데 사용

---

4. 하이퍼링크

<a>는 웹에서 다른 웹, 파일, 주소 등의 링크를 등록할 수 있는 태그이다.

<a href="https://google.com" target="_blank">

하이퍼링크 속성

1) href

href : 웹 링크, mailto:(email), tel:(전화번호), pdf 파일 등(download ="다운시 이름")의 많은 데이터를 연결 할 수 있다.

2) target

target 속성을 사용하여 링크가 열리는 방식을 지정할 수 있다. 이때 _blank값을 지정하면 링크를 새창에서 열 수 있다.

3) rel

rel속성을 사용하여 보안 및 SEO 관련 속성 사용가능(noopener, noreferrer, nofollw)

그외

#top 등 #을 이용하여 문서에서의 위치를 하이퍼링크 할 수 있다.

<a href="#lorem">영문 더미 텍스트</a>
<a name="lorem" href="#top" draggable="true">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit reprehenderit ratione 
      ipsum facilis aliquam facere rem nisi suscipit quas harum dolorum quibusdam molestiae,
      quaerat enim consectetur architecto incidunt impedit ducimus!
</a>

---

5. 순차요소 비순차 목록

순차목록 요소

<ol> 요소를 사용하며, <ol>요소 내부에 <li>를 사용하여 번호가 있는 목록을 지정할 수 있다.

• reversed : 순서를 역순으로 설정함
• <li value="3"> : 3부터 시작하는 오름차순

1) 코드

	<ol>
      <li>UI 구조 &amp; 디자인</li>
      <li>모바일 웹 UI 제작 실습</li>
      <li>UI 인터렉션 주니어</li>
      <li>React 프로그래밍</li>
    </ol>

2) 결과

비순차목록 요소

<ul>을 이용하여 순서가 없는 목록요소를 생성한다. 순차목록과 같이 <li>를 사용하여 내부 목록을 지정한다.

• type="circle"을 통해 목록 표시 디자인을 변경할 수 있다.

1) 코드

   <ul type="circle">
      <li>카페W만의 특별함을 겸험할 수 있는 최상의 선택 음료</li>
      <li>카페W 커피와 완벽한 어울림을 자랑하는 푸드</li>
    </ul>
    <ul>
      <li>사용한 시도와 디자인으로 가치를 더하는 상품</li>
      <li>소중한 사람에게 마음을 전하는 가장 좋은 방법<br />카페 W 카드</li>
    </ul>

2) 결과

6. 정의형 목록

정의형 요소 목록

<dl>, <dt>, <dd>로 분류된다.

1) 정의형 마크업 <dl>

<dl>은 정의형 목록의 영역을 마크업 할 때 사용이된다.

2) 정의형 목록 제목 <dt>

<dt>를 사용하여 목록의 제목을 지정한다.

3) 정의형 목록 설명 <dd>

코드

<dl>
      <div>
        <dt>장르</dt>
        <dd>리얼 버리아어티, 서바이벌, 요리</dd>
      </div>
      <div>
        <dt>공개일</dt>
        <dd>2024년 9월 17일 ~ 2024년 10월 8일 매주 화요일 오후 5시</dd>
      </div>
      <div>
        <dt>공개 회차</dt>
        <dd>12부작</dd>
      </div>
    </dl>

결과

---

7. 프레이징 요소

강조요소

강조를 통해 문장에서 중요함을 강조할 수 있는 마크업들이다.

1) <strong>

강조의 의미를 가지는 텍스트로 굵은 텍스트로 표시가 된다.

문장에서 <strong>강조를</strong> 하고싶은 곳에 사용한다.

2) <em>

강조를 할때 사용되는 태그로 같은 의미이나, 사용시 이탈릭체로 표현이 된다.

문장에서 <em>강조</em>를 하고싶은 곳에 사용한다.

주변 콘텐츠 구분 요소

1) <b>

굵게 표시되지만 의미가 있는 것은 아니며 사용자의 주목을 끌기위한 용도나 주변 콘텐츠가 구분하기 위한 용도로 사용한다.

문단에서 <b>굵게</b> 표시하고싶은 단어에 사용한다.

2) <i>

기울임꼴로 표시되며 주변 콘텐츠와 구분을 하기 위한 용도로 사용이 되는 태그이다.
주로 기술용어, 외국어 구절, 등장인물의 생각 등을 마크업 할 대 사용할 수 있다.

문단에서 <i>기울임</i> 표시하고싶은 단어에 사용한다.

---

8. 인용문과 줄바꿈

인용문

1) <blockquote>

블록 인용문에 사용이 된다.

 	<blockquote>
      <p>
        우리가 할 수 있는 노력은 과정이 전부야. <br />
        결과는 우리 손 안에 있는 게 아니야. <br />
        결과까지 서너개 넣으려다 보니까 <br />
        무리수를 두는 거야
      </p>
      <cite> 드라마 &lt;미생&gt; 중에서</cite>
    </blockquote>

2) <q>

짧은 단문정도의 한줄에 사용되어지는 인용문이며, 사용시에 시작과 끝에 " 가 자동으로 붙는다.

	<p>
      인상깊은 드라마를 시청했는데 대사가 마음을 움직였어. 대사는
      <q cite="https://www.tving.com/contents/P000151356">우리가 할 수 있는 노력은 과정이 전부야</q >
      라는 말이었어.
    </p>

3) <cite> & cite

• HTMl에서 인용문의 출처를 명시하기 위해 사용되는 태그이다. 보통 <blockquote>와 함께 사용이 되며, 인용문 내부의 하단에 작성하게 된다.

• cite속성은 <q>와 함께 사용이되며, 인용되어지는 <q>에 cite속성으로 해당 인용문의 출처를 URL로 기입한다.

줄바꿈 <br>

한 라인에 줄이 길때 줄바꿈을 하거나 한줄을 띄울 때 사용이된다.

9. 테이블 요소

테이블 요소

테이블 요소에는 <table>, <th>, <tr>, <td>가 있다.

1) <table>

테이블 태그를 사용하기 위해서 <table>태그로 감싸야 한다.

2) <th>

테이블의 헤드 제목을 의미하며, 사용시에 데이터보다 굵은 글씨체를 띄게 된다.

3) <tr>

테이블에서 행을 의미하며, 행에 따라 <tr>의 개수가 결정된다.
모든 행에 사용이 되며, <tr>내부에는 <th>, <td>가 들어가게 된다.

4) <td>

테이블 데이터로, <tr>내부에 열의 개수만큼 <td>를 사용하게 된다.

추가 설명

• <caption>을 사용하여 테이블의 제목을 정할 수 있다.
• <colgroup>요소로 열 그룹을 정의할 수 있다.
• scope속성을 사용하여 테이블헤더의 속성이 열인지, 행인지, 열과 행으로 이루어져있는지 등을 스크린리더에 표시해준다.
• colspan : 행 방향을 기준으로 병합하는 속성 즉 좌우셀을 병합
• rowspan : 열 방향을 기준으로 병합, 즉 상하셀 병합

코드 및 결과

1) code

 <table class="table-1">
      <tr>
        <th scope="col">이름</th>
        <th scope="col">국어</th>
        <th scope="col">수학</th>
      </tr>
      <tr>
        <th scope="row">홍길동</t>
        <td>80</td>
        <td>90</td>
      </tr>
      <tr>
        <th scope="row">이영희</th>
        <td>70</td>
        <td>90</td>
      </tr>
    </table>

2) 결과

---

10. 컨테이너 요소

컨테이너

컨테이너요소란 다른 요소들을 담고 있으며, 구분을 하기 위한 용도로만 사용이 되며 컨테이너요소 그자체의 특성이 없는 요소들이다.

<div>

<div> 요소는 블록컨테니어 요소이다.

• 블록 요소란 웹에서 하나의 줄 전체를 차지하게 되는 요소를 뜻한다. 예로는 <h1>, <p> 등이 있다.

<span>

<span>은 인라인 컨테이너 요소이다.

• 인라인 요소란 하나의 줄에서 현제 작성이 된 범위까지만을 차지하는 요소이다. 예로는 <button>, <a> 등이 있다.

줄바꿈 공백

<div>나 <span>을 사용할 시에 마지막에 컨테이너 요소를 사용 후 enter를 사용하면, 한칸의 공백이 요소 사이에 들어가게 된다.

<div>안</div
  ><div>녕</div>

이를 방지하기 위해 위의 코드처럼 코드를 닫기 전에 줄바꿈을 하여 사용할 수 있다.

---

11. 섹션 & 메인 요소

섹션 요소

1) <section>

문서 내에서 주제별로 나뉘어진 콘텐츠 블록을 정의하는데 사용된다. 따라서 각 섹션마다 제목을 가질 수 있다.

2) <article>

독립적으로 배포하거나 재사용할 수 있는 콘텐츠를 정의할 때 사용된다. 예로는 블로그 포스트, 뉴스, 기사 등에 사용이 된다.

메인 요소

1) <header>

소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함을 한다.

2) <footer>

가장 가까운 콘텐츠 등의 바닥을 나타낸다. 일반적으로는 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는데 사용이 된다.

3) <nav>

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 주로 메뉴, 목차, 색인에 사용된다.

4) <main>

문서의 주요 콘텐츠를 포함하는 컨테이너이다. 문서 내에서 한번만 사용할 수 있다.
사이드바, 탐색 링크, 저작권 정보, 사이트로고 등 여러 문서에 걸쳐 반복되는 컨텐츠는 포함되어서는 안된다.

5) <aside>

문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스로 표현을 한다.

---

12. 텍스트 요소

윗첨자, 아래첨자

1) <sup>

단어의 윗첨자 표기를 할수 있도록 도와주는 태그이다.
보통 제곱의 형태를 사용하기 위해 윗첨자를 사용한다.

<div>X<sup>2</sup></div>

2) <sub>

아래첨자를 사용할 수 있도록 도와주는 태그이다. 주로 원소 기호등을 표기할 때 사용된다.

<div>H<sub>2</sub>O</div>

축약어, 날짜, 취소정보

1) <addr>

약어(abbreviation)나 약칭(acronym)을 사용하는 데 사용된다.title 속성을 사용하여 약어의 내용을 이해할 수 있는 추가 정보를 제공한다.

2) <time>

시간의 특정 지점 또는 구간을 나타낸다. datetime특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현 할 때 사용할 수 있다.

• 24시간 표기법
• 정확한 그레고리력
• 유효한 시간 범위

	<div>
      <time datetime="2025-04-29T11:45:40">2025년 4월 29일</time>
    </div>

3) <s>

글자에 취소선, 즉 글자를 가로지르는 선을 그린다. <s>요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타낸다.
하지만 문서의 편집 기록을 나타내는 용도로는 적합하지 않다. 상황에 따라 <del>, <ins>를 사용해야 한다.

<p>정상가 <s>100,000</s></p>

저작권 및 하이라이트

1) <small>

덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타낸다. 기본 상태에서 <small>은 자신의 콘텐츠를 한 사이즈 작은 글꼴로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없다.

<p>
  <small
    >The content is licensed under a Creative Commons Attribution-ShareAlike 2.5
    Generic License.</small
  >
</p>

2) <mark>

현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타낸다.

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

---

13. Address 요소

<address>

가까운 HTML 요소의 사람, 단체, 조직 드엥 대한 연락처 정보를 나타낸다.

• 접근성에 시점에서 보았을 때, <footer>에 주소란에 사용되어야 스크린 리더가 이해하기 편한 구조가 된다.
• <footer>의 내부에 <address>가 보통 사용된다.
• 연락처 및 주소 등 외의 정보(출판일 등)을 담아서는 안된다.

<address>
  <a href="mailto:jim@example.com">jim@example.com</a><br />
  <a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>

---

14. Picture & Source 요소

<picture>

0개 이상의 요소와 하나의 요소로 구성되어 다양한 디스플레이 시나리오에 맞게 이미지의 대체 버전을 제공한다.(<source>, <img>)

• 브라우저는 각 자식<source>요소를 고려하여 가장 일치하는 요소를 선택한다.
• 내부에 <img>와 <source>가 들어간다.

<source>

1) 의미

<picture>요소 내부에서 조건에 따라 사용할 이미지 소스를 정리할 때 사용된다.

2) 속성

• type : 이미지 또는 기타 미디어 유형의 MIME 미디어 유형을 지정하며, 선택적으로 <codecs>매개변수를 포함한다.
• src : 미디어 리소스의 URL을 지정한다.
• srcset : 하나 이상의 이미지 URL과 설명자를 쉼표로 구분하여 나열한다.
  • 이미지 위치를 지정하는 URL이다.
  • 선택적인 너비 설명저(바로 뒤에 오는 양의 정수w)
  • 선택적 픽셀 밀도 설명자

<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

X Descriptor, W Descriptor

• X descriptor는 이미지의 픽셀밀도를 나타낸다.
• 1x, 2x, 3x와 같은 형태로 사용되며, 디바이스 화면의 픽셀 밀도에 따라 적합한 이미지를 선택하도록 한다.
• W descriptor는 이미지의 너비를 나타냄

특징	X Descriptor	W Descriptor
기준	디바이스의 픽셀 밀도 (DPR)	이미지의 너비 (width)
형식	1x, 2x, 3x	400w, 800w, 1200w
사용 속성	srcset	srcset 과 sizes
적용 상황	고해상도 디스플레이 (레티나 디스플레이 등)	반응형 디자인(화면 크기에 따라 이미지 변경)
브라우저 동작	DPR 값을 기준으로 적합한 이미지 선택	sizes 속성에 따라 적합한 이미지 선택

15. 비디오 요소

<video>

비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입한다. 오디오 콘텐츠에도 사용할 수 있으나<audio>요소가 더 적합하다.

1) autoplay

boolean(불속성)으로 페이지 로드 시 비디오를 자동으로 재생시킨다.

2) buffered

미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성이다. 이 속성은 TimeRanges객체를 포함한다.

3) controls

이 속성이 존재하면, 소리 조절, 동영상 탐색, 일시정지/재시작을 할 수 있는 컨트롤러를 제공한다.

4) crossorigin

CORS를 사용하여 관련 이미지를 패치해야 하는지 여부를 나타냄

5) muted

비디오의 오디오를 음소거 하는 속성

6) loop

비디오가 끝난 후 다시 처음부터 재생

7) poster

비디오 썸내일 설정

8) preload

비디오의 로드 방식을 제어

• none : 비디오를 미리 로드하지 않음
• metadata : 비디오의 메타데이터만 로드
• auto : 비디오를 자동으로 미리 로드

<track>

<video>나 <audio> 요소와 함께 사용되어 자막, 설정, 챔터, 메타데이터 등을 제공하는데 사용된다. 이 요소는 웹 콘텐츠의 접근성을 높이는데 중요한 역할을 한다.

1) src

자막 파일의 경로

2) kind

트렉 유형

• subtitles: 자막 (청각 장애인을 위한 대화 번역).
• captions: 캡션 (대화뿐 아니라 배경 소리, 효과음 등을 포함).
• descriptions: 화면 설명 (시각 장애인을 위한 비디오 설명).
• chapters: 비디오의 챕터 정보.
• metadata: 사용자 정의 메타데이터.
• srclang: 자막의 언어 코드 (예: en은 영어, ko는 한국어).
• label: 자막의 이름. 사용자가 자막을 선택할 때 표시되는 이름.
• default: 기본적으로 활성화할 자막을 지정

---

16. iframe, object 요소

<iframe>

다른 HTML 문서나 외부 콘텐츠를 현재 웹 페이지에 삽입하는 데 사용된다.

1) 속성

• src : 삽입할 외부 콘텐츠의 URL
• width : <iframe>의 가로 크기
• height : iframe의 세로크기
• name : iframe의 이름을 지정. 다른 요소에서 이 이름을 사용해 iframe을 타겟팅 할 수 있음.
• allow : 특정 기능을 허용(fullscreen, camera, microphone)
• sandbox : iframe의 동작을 제안하여 보안을 강화
• loading
  • lazy 또는 eager를 지정하여 iframe로디 방식을 제어
  • lazy 화면에 보일 때 로드
  • eager 페이지 로드 시 즉시 로드

2) 코드

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="~~~~">
</iframe>

3) 결과

3) 결과

<object>

다양한 유형의 외부 콘텐츠를 삽입하는 데 사용된다.
<iframe>과 유사하지만, 더 다양한 파일 형식을 지원한다는 점에서 차이가 있다.

1) 속성

• data : 삽입할 외부 콘텐츠의 URL
• type : 삽입할 콘텐츠의 MIME 유형
• width : 콘텐츠의 가로 길이 지정
• height : 콘텐츠의 세로 길이 지정
• name : 객체의 이름 지정

2) 코드

<object
  type="video/mp4"
  data="/shared-assets/videos/flower.mp4"
  width="250"
  height="200"></object>

3) 결과

---

17. map & area 요소

<map>

<map> 요소는 <area> 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정할 때 사용된다.

1) 속성

name : 맵을 참조할 때 사용할 수 있는 이름. 반드시 존재해야하고, 값이 비면 안되며, 값에 공백 문자가 포함되어도 안된다.

2) 코드

  <map id="image-map">
      <area target="_blank" alt="페이스북" href="https://www.facebook.com/" coords="15,15,14" shape="circle" />
      <area target="_blank" alt="인스타그램" href="https://www.instagram.com/" coords="65,15,14" shape="circle" />
      <area target="_blank" alt="유튜브" href="https://www.youtube.com/" coords="115,15,14" shape="circle" />
    </map>

3) 결과

<area>

이미지 맵 내부에 미리 정의된 클릭 가능한 영역을 정의한다.

1) 속성

• alt : 이미지를 표시하지 않는 브라우저에 표시할 텍스트 문자열 대체 택스트이다. 텍스트는 대체 텍스트 없이 이미지가 표시될 때와 동일한 선택 사항을 사용자에게 제공하도록 구성되어야 한다.
• coords : 이 속성은 크기, 모양 및 배치에 대한 속성coords의 좌표를 자세하게 설명한다.
  • rect: x1, y1, x2, y2로 사각형의 각모서리 좌표를 지정한다.
  • circle:x, y, radius로 원의 중심과 반지름 좌표를 지정한다.
  • poly: x1, y1, x2, y2,.. ,xn,yn로 다각형의 모서리 좌표를 지정한다.
• download : 링크된 리소스가 브라우저에 표시되는 것이 아니라 다운로드되도록 의도되었음을 나타낸다.
• href : 해당 영역의 하이퍼링크를 나타낸다. 생량가능하다.
• ping : 하이퍼링크를 따라갈 때 브라우저가 post부문이 포함된 요청을 전송할 URL 목록을 공백으로 구분한다.
• referrerpolicy : 리소스를 가져올 때 사용할 잠조지를 나타낸다.
• rel : 대상 객체와 링크 객체의 관계를 지정한다.

---

18. Form 요소

<input>

사용자로부터 데이터를 입력받기 위해 웹 기반 양식에 대한 대화형 컨트롤을 만드는 데 사용된다.

1) 속성

type

• button : 속성 값을 표시하는 기본 동작이 없는 푸시 버튼
• checkbox : 단일 값을 선택하거나 선택 취소할 수 있는 체크박스이다.
• color : 색상을 지정하기 위한 컨트롤러이다.(지원하는 브라우저에서 활성화하면 색상 선택기가 열린다)
• data : 날짜를 입력하는 컨트롤이다.(지원브라우저에서 활성화시 날짜 선택기가 열린다)
• email : 이메일 주소 입력란을 활성화한다.
• file : 파일을 업로드 할 수 있는 컨트롤러가 생긴다.
• text : 텍스트박스를 만든다.

2) 코드

 <form action="https://formspree.io/f/xeqwwbwk" method="POST">
      <!-- oneline textbox(search) -->
      <div>
        <label for="userName">이름</label>
        <input type="text" id="userName" name="userName" />
      </div>

      <!-- password -->
       <div>
        <label for="password">비밀번호</label>
        <input type="password" name="userPassword" id="password" />
       </div>

      <!-- search : 검색어 상자 -->
      <div>
        <label for="searchKeyword">검색어</label>
        <input type="search" id="searchKeyword" placeholder="검색어를 입력해주세요" />
      </div>

      <!-- tel : 전화번호 입력 서식 -->
      <div>
        <label for="userPhone">전화번호</label>
        <input required type="tel" name="" id="userPhone" />
      </div>
      <!-- email : 이메일 입력 서식 -->
      <div>
        <label for="userEmail">이메일</label>
        <input required type="email" name="" id="userEmail" />
      </div>

      <div>
        <!-- bootcamp ="html"로 전송됨 -->
        <input type="checkbox" value="html" name="bootcamp" id="bootcampHtml" />
        <label for="bootcampHtml">HTML</label>
      </div>
      <div>
        <!-- bootcamp="css"로 전송됨 -->
        <input type="checkbox" value="css" name="bootcamp" id="bootcampCss" />
        <label for="bootcampCss">CSS</label>
      </div>

3)결과

<select>

옵션 메뉴를 제공하는 컨트롤이다.

1) 속성

id를 통해 <label>과 연결하여 사용한다.
내부에는 <option>요소를 사용하여 메뉴를 추가한다.

• autocomplete : 자동완성 기능에 대한 힌트를 제공하는 문자열이다.
• autofocus : 부울 속성을 사용하여 페이지가 로드될 대 양식 컨트롤에 입력 포커스가 지정된다.
• disabled : 이 속성으로 사용자가 컨트롤과 상호작용 할 수 없도록 지정한다.
• form : <form>을 연결할 요소.
• multiple : 목록을 여러개 선택할 수 있도록 하는 속성

2) 코드

  <label for="petSelect">반려동물</label>
      <select size="10" multiple name="petSelect" id="petSelect">
        <option value="">반려동물 선택</option>
        <option value="dog">강아지</option>
        <option value="cat">고양이</option>
        <option value="hamster">햄스터</option>
        <option value="spider">거미</option>
        <option value="goldfish">열대어</option>
        <option value="parrot">패럿</option>
      </select>

3) 결과

느낀점 및 소감

느낀점

HTML 이라는 마크업언어에 대해 다시한번 이해할 수 있는 계기가 된것 같다.
그저 구조를 만들고, CSS에 사용하기 위해 <div>만 사용하는 구조가 아닌, 어떠한 목적을 가지고, 어떻게 사용자에게 서비스를 제공할 지에 따라 많은 요소와 속성을 사용 줄 알아야 한다는 생각이 들었다.
공부를 하면서 느낀 것이지만, 너무나도 많은 요소들이 있기에 모두 내껏으로 만든다는 것은 거의 불가능 하다는 생각이 들었다. 다만 이들 중 가장 많이 사용이 되고, 또 접근성에 부분에서 필요로 하다고 생각되는 부분들을 추려서 정리 했으며, 이러한 요소들에대해서는 그래도 자세하게 이해하고 있어야 할 필요가 있다고 생각한다.

한번에 많은것을 가져가려는 것은 욕심이다. 오히려 10개를 얻으려나 10개를 놓힌다. 그래서 나는 조급함을 내려놓고, 나의 능력에서의 최선을 다할 뿐 그저 앞으로 한걸음 한걸음 걸어나아가는게 다인것 같다.

멋쟁이사자 부트캠프 수업을 들은지도 꽤 시간이 지난 것 같은데, 아직 한달이 지나지는 않았다. 이 HTML정리 글 작성을 시작한건 일주일 전인데, 이제서야 마무리를 하는것 같다. 물론 이것도 100%에 충족되는 것은 아니나, 그렇다고 모든것을 정리하려고 하기에는 내가 지금 공부해야할 중요한 것들을 포기하면서 까지 이것에 시간을 할에해야할 이유가 없어서 이쯤에서 정리를 마무리하려한다.

출처

MDN