프론트엔드 (HTML)

Wonkyun Jung·2023년 3월 11일

html 프론트엔드

프론트엔드

목록 보기

1/6

HTML 속성

모든 HTML 요소는 속성을 가질 수 있습니다.
속성은 요소에 대한 추가 정보를 제공합니다.
속성은 항상 시작 태그 에 지정됩니다.
속성은 일반적으로 name="value" 와 같은 이름/값 쌍으로 제공됩니다.

href 속성

태그<a>는 하이퍼링크를 정의합니다. 
속성 href은 링크가 이동하는 페이지의 URL을 지정합니다.

<a href="https://www.w3schools.com">Visit W3Schools</a>

src 속성

태그 <img>는 HTML 페이지에 이미지를 삽입하는 데 사용됩니다. 
속성 src은 표시할 이미지의 경로를 지정합니다.

<img src="img_girl.jpg">

절대 URL - 다른 웹사이트에서 호스팅되는 외부 이미지로 연결됩니다. 예: src="https://www.w3schools.com/images/img_girl.jpg".
상대 URL - 웹사이트 내에서 호스팅되는 이미지에 대한 링크입니다. 여기서 URL에는 도메인 이름이 포함되지 않습니다. URL이 슬래시 없이 시작되면 현재 페이지를 기준으로 합니다. 예: src="img_girl.jpg". URL이 슬래시로 시작하면 도메인에 상대적입니다. 예: src="/images/img_girl.jpg".

팁: 거의 항상 상대 URL을 사용하는 것이 가장 좋습니다. 도메인을 변경해도 깨지지 않습니다.

너비 및 높이 속성

<img> 태그에는 이미지의 너비와 높이(픽셀 단위)를 지정하는 width 및 height 속성도 포함되어야 합니다.

<img src="img_girl.jpg" width="500" height="600">

대체 속성

어떤 이유로 이미지를 표시할 수 없는 경우 태그의 필수 alt속성은 < img > 이미지의 대체 텍스트를 지정합니다. 연결 속도가 느리거나 속성에 오류가 있거나 src사용자가 스크린 리더를 사용하는 경우가 원인일 수 있습니다.

<img src="img_girl.jpg" alt="Girl with a jacket">

//없는 경우엔 이미지 아이콘이랑 alt로 지정한 문자가 들어간다 
<img src="img_typo.jpg" alt="Girl with a jacket">

스타일 속성

 style 속성은 색상, 글꼴, 크기 등과 같은 요소에 스타일을 추가하는 데 사용됩니다.

<p style="color:red;">This is a red paragraph.</p>

제목 속성

title 속성은 title요소에 대한 몇 가지 추가 정보를 정의합니다.
요소 위로 마우스를 가져가면 제목 속성의 값이 툴팁으로 표시됩니다.

<p title="I'm a tooltip">This is a paragraph.</p>

작은따옴표 또는 큰따옴표

속성 값 주위의 큰따옴표는 HTML에서 가장 일반적이지만 
작은따옴표도 사용할 수 있습니다.

<p title='John "ShotGun" Nelson'>

or

<p title="John 'ShotGun' Nelson">

경우에 따라 속성 값 자체에 큰따옴표가 포함된 경우 작은따옴표를 사용해야 합니다.

HTML 제목, 단락, 스타일

HTML 제목

HTML 제목은 < h1 > to < h6 > 태그로 정의됩니다.

<h1>가장 중요한 제목을 정의합니다. < h6 >가장 덜 중요한 표제를 정의합니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML 더 큰 제목

각 HTML 제목에는 기본 크기가 있습니다. 

style그러나 CSS font-size.속성을 사용하여 속성이 있는 
제목의 크기를 지정할 수 있습니다. 

<h1 style="font-size:60px;">Heading 1</h1>

HTML 단락

HTML <p>요소는 단락을 정의합니다.
단락은 항상 새 줄에서 시작하며 브라우저는 자동으로 단락 앞과 뒤에 
약간의 공백(여백)을 추가합니다.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 수평 규칙

태그 <hr>는 HTML 페이지에서 주제 구분을 정의하며 가장 자주 수평선으로 표시됩니다.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

요소는 < hr >HTML 페이지에서 콘텐츠를 분리(또는 변경 정의)하는 데 사용됩니다.

HTML 줄 바꿈

HTML <br>요소는 줄 바꿈을 정의합니다.
<br>새 단락을 시작하지 않고 줄 바꿈(새 줄)을 원하는 경우 사용합니다 .

<p>This is<br>a paragraph<br>with line breaks.</p>

솔루션 - HTML < pre > 요소

HTML <pre>요소는 미리 서식이 지정된 텍스트를 정의합니다.
요소 내부의 텍스트는 < pre >고정 너비 글꼴(일반적으로 Courier)로 표시되며 
공백과 줄 바꿈을 모두 유지합니다.

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

HTML 링크

HTML 링크는 하이퍼링크입니다.

링크를 클릭하고 다른 문서로 이동할 수 있습니다.

링크 위로 마우스를 이동하면 마우스 화살표가 작은 손 모양으로 바뀝니다.

HTML 링크 - 구문

HTML <a>태그는 하이퍼링크를 정의합니다.

<a href="url">link text</a>

요소 의 가장 중요한 속성은 링크의 대상을 나타내는 속성 < a > 입니다 . href

링크 텍스트는 독자에게 보일 부분입니다.

링크 텍스트를 클릭하면 리더가 지정된 URL 주소로 전송됩니다.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

HTML 링크 - 대상 속성

기본적으로 링크된 페이지는 현재 브라우저 창에 표시됩니다. 이를 변경하려면 링크에 대해 다른 대상을 지정해야 합니다.

속성은 target연결된 문서를 열 위치를 지정합니다. 속성은 target 다음 값 중 하나를 가질 수 있습니다.

_self- 기본. 클릭한 것과 동일한 창/탭에서 문서를 엽니다.
_blank- 새 창이나 탭에서 문서 열기
_parent- 상위 프레임에서 문서를 엽니다.
_top- 창 전체에서 문서를 엽니다.

target="_blank"를 사용하여 새 브라우저 창이나 탭에서 연결된 문서를 엽니다.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

절대 URL, 상대 URL

아래의 두 예는 href 속성에서 절대 URL (전체 웹 주소) 을 사용하고 있습니다.

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

로컬 링크(동일한 웹사이트 내의 페이지에 대한 링크)는 상대 URL ("https://www" 부분 제외)로 지정됩니다.

HTML 링크 - 이미지를 링크로 사용

이미지를 링크로 사용하려면 태그 < a >안에 < img > 태그를 넣기만 하면 됩니다 .

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

HTML 링크 - 이메일 주소를 링크로 사용

mailto:속성 내에서 사용하여 href사용자의 이메일 프로그램을 여는 링크를 생성합니다
(새 이메일을 보낼 수 있도록 함).

<a href="mailto:someone@example.com">Send email</a>

HTML 링크 - 링크로서의 버튼

HTML 버튼을 링크로 사용하려면 JavaScript 코드를 추가해야 합니다.
JavaScript를 사용하면 버튼 클릭과 같은 특정 이벤트에서 발생하는 
작업을 지정할 수 있습니다.

<button onclick="document.location='default.asp'">HTML Tutorial</button>

HTML 링크제목

속성 은 title요소에 대한 추가 정보를 지정합니다. 
정보는 마우스가 요소 위로 이동할 때 도구 설명 텍스트로 가장 자주 표시됩니다.

<a href="https://www.w3schools.com/html/" 
title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

절대 URL 및 상대 URL

전체 URL을 사용하여 웹 페이지에 연결: 

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>


현재 웹 사이트의 html 폴더에 있는 페이지 링크: 

<a href="/html/default.asp">HTML tutorial</a>


현재 페이지와 같은 폴더에 있는 페이지 링크: 

<a href="default.asp">HTML tutorial</a>

HTML 테이블

HTML 테이블을 사용하면 웹 개발자가 데이터를 행과 열로 정렬할 수 있습니다.

HTML 테이블 정의

HTML의 테이블은 행과 열 내부의 테이블 셀로 구성됩니다.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

HTML 테이블 셀

<td>각 테이블 셀은 및 태그 로 정의됩니다 </td>.
td 테이블 데이터를 나타냅니다.
<td>와 사이의 모든 것은 </td>테이블 셀의 내용입니다.

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

테이블 행

각 테이블 행은 a로 시작 <tr>하고 </tr>태그로 끝납니다.
tr 테이블 행을 나타냅니다.

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

테이블 헤더

셀이 테이블 머리글 셀이 되기를 원하는 경우가 있습니다. 
이러한 경우 <th>태그 대신 <td>태그를 사용하십시오 .

첫 번째 행을 표 머리글 셀로 지정합니다.

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

HTML 표 Colspan 및 Rowspan

HTML 표 - Colspan

셀이 여러 열에 걸쳐 있도록 하려면 다음 colspan특성을 사용합니다.

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

HTML 표 - Rowspan

여러 행에 걸쳐 있는 셀을 만들려면 다음 rowspan특성을 사용합니다.

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>

여러 열 요소

다른 스타일로 더 많은 열의 스타일을 지정하려면 <colgroup>내부에 
더 많은 <col>요소를 사용하십시오 .

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>

HTML 목록

HTML 목록을 사용하면 웹 개발자가 관련 항목 집합을 목록으로 그룹화할 수 있습니다.

정렬되지 않은 HTML 목록

정렬되지 않은 목록은 <ul>태그로 시작합니다. 
각 목록 항목은 <li>태그로 시작합니다.
목록 항목은 기본적으로 글머리 기호(작은 검은색 원)로 표시됩니다.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

중첩된 HTML 목록

목록은 중첩될 수 있습니다(목록 내부 목록).

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

정렬된 HTML 목록

정렬된 목록은 <ol>태그로 시작합니다. 
각 목록 항목은 <li>태그로 시작합니다.
목록 항목은 기본적으로 숫자로 표시됩니다

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML 설명 목록

HTML은 설명 목록도 지원합니다.
설명 목록은 각 용어에 대한 설명이 포함된 용어 목록입니다.
태그 <dl>는 설명 목록을 정의하고, <dt>태그는 용어(이름)를 정의하며, 
<dd> 태그는 각 용어를 설명합니다.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

HTML 블록 및 인라인 요소

모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다.
표시 값에는 블록과 인라인의 두 가지가 있습니다.

Block-level Elements

블록 수준 요소는 항상 새 줄에서 시작하며 브라우저는 요소 앞과 뒤에 자동으로 약간의 공간(여백)을 추가합니다.
블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 확장됨).
일반적으로 사용되는 두 가지 블록 요소는 < p > 및 입니다 < div >

요소 < p >는 HTML 문서의 단락을 정의합니다.
요소 < div >는 HTML 문서의 구분 또는 섹션을 정의합니다.
< p >, < div >, < h >, < ul >, < ol >, < form >요소는
display 속성값이 블록(block)인 대표적인 요소입니다.

Inline Elements

인라인 요소는 새 줄에서 시작하지 않습니다.
인라인 요소는 필요한 만큼의 너비만 차지합니다.
단락 내부의 < span > 요소 입니다.
< span >, < a >, < img >요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.
참고: 인라인 요소는 블록 수준 요소를 포함할 수 없습니다!

The < div > Element (block-level)

요소 <div>는 종종 다른 HTML 요소의 컨테이너로 사용됩니다.
요소 <div>에는 필수 속성이 없지만 , style및 class가 id공통입니다.
CSS와 함께 사용하면 <div>요소를 사용하여 콘텐츠 블록의 스타일을 지정할 수 있습니다

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city 
  in the United Kingdom, with a metropolitan area of over 13 million 
  inhabitants.</p>
</div>

The < span > Element (inline)

요소는 <span>텍스트의 일부 또는 문서의 일부를 표시하는 데 
사용되는 인라인 컨테이너입니다.

요소 <span>에는 필수 속성이 없지만 , style및 class가 id공통입니다. 
CSS와 함께 사용하면 <span>요소를 사용하여 텍스트 부분의 스타일을 지정할 수 있습니다.

<p>My mother has 
<span style="color:blue;font-weight:bold;">blue</span> 
eyes and my father has 
<span style="color:darkolivegreen;font-weight:bold;">dark green</span> 
eyes.</p>

HTML 클래스 속성

HTML class속성은 HTML 요소의 클래스를 지정하는 데 사용됩니다.
여러 HTML 요소가 동일한 클래스를 공유할 수 있습니다.

클래스 속성 사용

속성 class은 종종 스타일 시트에서 클래스 이름을 가리키는 데 사용됩니다.
특정 클래스 이름을 가진 요소에 액세스하고 조작하기 위해 JavaScript에서 사용할 수도 있습니다.

다음 예제에는 값이 "city"인 속성이 <div>있는 세 개의 요소가 있습니다.
class세 요소 모두 헤드 섹션의 스타일 정의 <div> 에 따라 동일하게 
.city 스타일이 지정됩니다

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

다음 예제에는 값이 "note"인 속성이 <span>있는 두 개의 요소가 있습니다 . 
class두 요소는 head 섹션의 스타일 정의 <span> 에 따라 동일하게 
.note 스타일이 지정됩니다 .

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

HTML ID 속성

HTML id속성은 HTML 요소의 고유 ID를 지정하는 데 사용됩니다.
HTML 문서에는 동일한 ID를 가진 요소가 두 개 이상 있을 수 없습니다.

id 속성 사용

속성은 id HTML 요소의 고유 ID를 지정합니다. 속성 값은 id HTML 문서 내에서 고유해야 합니다.
속성 id은 스타일 시트에서 특정 스타일 선언을 가리키는 데 사용됩니다. 또한 JavaScript에서 특정 ID를 가진 요소에 액세스하고 조작하는 데 사용됩니다.
id의 구문은 다음과 같습니다 : 해시 문자(#) 다음에 id 이름을 씁니다. 그런 다음 중괄호 {} 안에 CSS 속성을 정의합니다.

다음 예제에는 <h1>"myHeader"라는 ID 이름을 가리키는 요소가 있습니다. 
이 요소는 head 섹션의 스타일 정의 <h1> 에 따라 #myHeader 스타일이 지정됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

클래스와 ID의 차이점

클래스 이름은 여러 HTML 요소에서 사용할 수 있지만 ID 이름은 페이지 내의 하나의 HTML 요소에서만 사용해야 합니다.

<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

HTML 레이아웃

웹사이트는 종종 여러 열(예: 잡지 또는 신문)에 콘텐츠를 표시합니다.

HTML 시맨틱 요소

비의미적 요소의 예 : < div >및 < span > 내용에 대해 아무 것도 알려주지 않습니다.
의미론적 요소의 예 : < form >, < table >및 < article > 내용을 명확하게 정의합니다.

HTML의 의미 요소

많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 < div id="nav" >, < div class="header">, < div id="footer">와 같은 HTML 코드가 포함되어 있습니다.

HTML < section > 요소

< section > 요소는 문서의 섹션을 정의합니다.
"섹션은 일반적으로 제목이 있는 콘텐츠의 주제별 그룹입니다."

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is... </p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. ...</p>
</section>

HTML < article > 요소

< article >요소는 독립적이고 자체 포함된 콘텐츠를 지정합니다.

기사는 그 자체로 의미가 있어야 하며 웹 사이트의 나머지 부분과 독립적으로 배포할 수 있어야 합니다.

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google...</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla...</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft...</p>
</article>

참고: 보통 < section >에 < article >을 중첩 시키거나 < article >에 < section >을 중첩시키지 않는다

< header >요소는 소개 콘텐츠의 컨테이너 또는 탐색 링크 집합을 나타냅니다.

참고: 하나의 HTML 문서에 여러 < header > 요소를 포함할 수 있습니다. 그러나 < header >는 < footer > < address > < header > 또는 다른 요소 내에 배치할 수 없습니다.

< footer >요소는 문서 또는 섹션의 바닥글을 정의합니다.
참고: 하나의 문서에 여러 < footer >요소를 포함할 수 있습니다.

HTML < nav > 요소

< nav >요소는 탐색 링크 세트를 정의합니다.
문서의 모든 링크가 < nav >요소 안에 있어야 하는 것은 아닙니다.
요소 < nav >는 탐색 링크의 주요 블록에만 사용됩니다.

탐색 링크 세트:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

HTML < aside > 요소

< aside >요소는 배치된 콘텐츠 이외의 일부 콘텐츠를 정의합니다(예: 사이드바).
< aside >콘텐츠는 주변 콘텐츠와 간접적으로 관련되어야 합니다.

HTML < figure > 및 < figcaption > 요소

< figure >태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 독립적인 콘텐츠를 지정합니다.
< figure >태그는 < figcaption >요소의 캡션을 정의합니다.
< figcaption >요소는 요소의 첫 번째 또는 마지막 < figure >자식으로 배치될 수 있습니다.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

HTML 양식

HTML 양식은 사용자 입력을 수집하는 데 사용됩니다. 사용자 입력은 대부분 처리를 위해 서버로 전송됩니다.

< form > 요소

HTML < form >요소는 사용자 입력을 위한 HTML 양식을 만드는 데 사용됩니다.
< form >요소는 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소에 대한 컨테이너입니다.

<form>
.
form elements
.
</form>

< input > 요소

Text Field

< input type="text" >텍스트 입력을 위한 한 줄 입력 필드를 정의합니다.

텍스트 입력 필드가 있는 양식:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

< label > 요소

태그 < label >는 많은 양식 요소에 대한 레이블을 정의합니다.
이 < label >요소는 스크린 리더 사용자에게 유용합니다. 스크린 리더는 사용자가 입력 요소에 초점을 맞출 때 레이블을 소리내어 읽어주기 때문입니다.
이 < label >요소는 또한 매우 작은 영역(예: 라디오 버튼 또는 확인란)을 클릭하는 데 어려움이 있는 사용자에게 도움이 됩니다.
사용자가 요소 내의 텍스트를 클릭하면 < label >라디오 버튼/확인란이 전환되기 때문입니다.
태그의 for 속성은 < input > 요소의 id 속성과 같아야 < label >태그를 함께 묶을 수 있습니다.

Radio 버튼

< input type="radio" >라디오 버튼을 정의합니다 .

라디오 버튼을 사용하면 제한된 수의 선택 항목 중 하나를 선택할 수 있습니다.

라디오 버튼이 있는 양식:

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Checkbox

이 확인란을< input type="checkbox" > 정의합니다.

확인란을 사용하면 제한된 수의 선택 항목 중 ZERO 또는 MORE 옵션을 선택할 수 있습니다.

확인란이 있는 양식:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Submit 버튼

< input type="submit" >양식 데이터를 양식 처리기에 제출하기 위한 단추를 정의합니다.

양식 처리기는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버의 파일입니다.

양식 처리기는 양식의 action 속성에 지정됩니다.

제출 버튼이 있는 양식:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

< input >의 name 속성

name각 입력 필드에는 제출할 속성이 있어야 합니다.

속성 이 생략되면 name입력 필드의 값이 전혀 전송되지 않습니다.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

Action 속성

action속성은 양식이 제출될 때 수행할 작업을 정의합니다.

일반적으로 사용자가 제출 버튼을 클릭하면 양식 데이터가 서버의 파일로 전송됩니다.

아래 예에서 양식 데이터는 "action_page.php"라는 파일로 전송됩니다. 
이 파일에는 양식 데이터를 처리하는 서버측 스크립트가 포함되어 있습니다.

제출할 때 양식 데이터를 "action_page.php"로 보냅니다.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Target 속성

속성 target은 양식을 제출한 후 수신된 응답을 표시할 위치를 지정합니다.

Method 속성

속성 method은 양식 데이터를 제출할 때 사용할 HTTP 메서드를 지정합니다.

양식 데이터는 URL 변수( with method="get") 또는 HTTP 포스트 트랜잭션( with method="post")으로 보낼 수 있습니다.

양식 데이터를 제출할 때 기본 HTTP 방법은 GET입니다.

이 예에서는 양식 데이터를 제출할 때 GET 메서드를 사용합니다.
<form action="/action_page.php" method="get">

이 예에서는 양식 데이터를 제출할 때 POST 메서드를 사용합니다.
<form action="/action_page.php" method="post">

GET에 대한 참고 사항:

	- 양식 데이터를 이름/값 쌍으로 URL에 추가합니다.
	- GET을 사용하여 민감한 데이터를 보내지 마십시오! (제출된 양식 데이터는 URL에서 볼 수 있습니다!)
	- URL의 길이는 제한되어 있습니다(2048자).
	- 사용자가 결과를 북마크하려는 양식 제출에 유용합니다.
	- GET은 Google의 쿼리 문자열과 같은 비보안 데이터에 적합합니다.

POST에 대한 참고 사항:

	- HTTP 요청 본문 내부에 양식 데이터를 추가합니다(제출된 양식 데이터는 URL에 표시되지 않음).
	- POST는 크기 제한이 없으며 많은 양의 데이터를 보내는 데 사용할 수 있습니다.
	- POST를 사용한 양식 제출은 북마크할 수 없습니다.

팁: 양식 데이터에 민감하거나 개인 정보가 포함된 경우 항상 POST를 사용하자!

자동완성 속성

이 autocomplete속성은 양식의 자동 완성 기능을 켜거나 끌지 여부를 지정합니다.

자동 완성이 켜져 있으면 브라우저는 사용자가 이전에 입력한 값을 기반으로 값을 자동으로 완성합니다.

자동 완성 기능이 있는 양식:

<form action="/action_page.php" autocomplete="on">

무효화 속성

novalidate속성은 부울 속성입니다.

존재하는 경우 양식 데이터(입력)가 제출될 때 유효성을 검사하지 않아야 함을 지정합니다.

novalidate 속성이 있는 양식:

<form action="/action_page.php" novalidate>

< Select >요소

<select>요소는 드롭다운 목록을 정의합니다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

다중 선택 허용

multiple 속성을 사용하여 사용자가 둘 이상의 값을 선택할 수 있도록 합니다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

< textarea > 요소

요소 <textarea>는 여러 줄 입력 필드(텍스트 영역)를 정의합니다.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

이 rows속성은 텍스트 영역에서 보이는 줄 수를 지정합니다.
속성 cols은 텍스트 영역의 가시적 너비를 지정합니다.

위의 HTML 코드가 브라우저에 표시되는 방식은 다음과 같습니다.

< fieldset > 및 < legend > 요소

요소 < fieldset >는 관련 데이터를 양식으로 그룹화하는 데 사용됩니다.

<legend>요소는 <fieldset>요소의 캡션을 정의합니다.


<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

< datalist > 요소

< datalist >요소는 < input >요소에 대해 미리 정의된 옵션 목록을 지정합니다.

사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록을 볼 수 있습니다.

list요소의 id속성은 < input >요소 의 < datalist >속성을 참조해야 합니다.

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

< Output > 요소

< output > 요소는 계산 결과를 나타냅니다 (예: 스크립트에 의해 수행됨).

계산을 수행하고 결과를 <output>요소에 표시합니다.

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

HTML input 유형 - Text

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

HTML input 유형 - Password

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

HTML input 유형 - submit

<input type="submit">양식 처리기 에 양식 데이터를 제출하기 위한 버튼을 정의합니다 .
양식 처리기는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버 페이지입니다.

양식 처리기는 양식의 action 속성에 지정됩니다.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

HTML input 유형 - reset

<input type="reset"> 모든 양식 값을 기본값으로 재설정하는 재설정 버튼을 정의합니다 .

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

HTML input 유형 - date

<input type="date">날짜를 포함해야 하는 입력 필드에 사용됩니다 .

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

HTML input 유형 - file

<input type="file"> 파일 선택 필드와 파일 업로드를 위한 "찾아보기" 버튼을 정의합니다 .

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

Wonkyun Jung

다음 포스트

프론트엔드 (HTML)