HTML 기본 이해: 웹 콘텐츠 구조화

웹 페이지, 웹 애플리케이션 및 모바일 애플리케이션 사용자 인터페이스를 구축하는 데에는 HTML, CSS, JavaScript 세 가지 핵심 기술이 사용됩니다. 이들은 프론트엔드 개발의 기반을 이룹니다.

HTML이란 무엇인가?

HTML(HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. 물리학자 팀 버너스-리에 의해 제안되고 개발되었으며, HTML은 웹 페이지의 구조를 기술하며, 프로그래밍 언어가 아닌 마크업 언어입니다.

HTML 요소는 HTML 문서의 기본 구성 단위이자 웹 사이트 구축의 핵심입니다. HTML은 이미지와 객체를 포함할 수 있으며, 상호 작용하는 양식을 만드는 데도 사용될 수 있습니다. 텍스트에 다양한 의미(예: 제목, 단락, 목록 등)를 부여하여 정보를 구조화하며, 문서의 시각적 표현과 의미를 어느 정도 정의할 수 있습니다.

웹 브라우저는 HTML 태그(예: <html>)와 스크립트(JavaScript)를 사용하여 웹 콘텐츠를 해석하지만, 태그 자체는 페이지에 표시하지 않습니다.

HTML의 발전 과정

HTML은 HTML1(IETF 작업 초안), HTML2.0(1995년 발표), HTML4.0 및 HTML4.01(W3C 권장 표준), XHTML을 거쳐 현재의 HTML5에 이르렀습니다. HTML5는 HTML 표준의 다섯 번째 개정판으로, 그 자체는 기술이 아닌 표준을 의미합니다. 일반적으로 국내에서 말하는 'HTML5'는 실제로는 HTML과 CSS3, JavaScript 및 다양한 API의 조합을 나타냅니다. 대략적으로 'HTML5 ≈ HTML + CSS3 + JavaScript + API'로 설명할 수 있습니다.

CSS는 무엇인가?

웹 페이지를 더욱 아름답게 꾸미고 싶다면, CSS가 필수적입니다!

CSS(Cascading Style Sheets)는 HTML 문서나 XML 애플리케이션과 같은 구조화된 문서에 스타일(글꼴, 간격, 색상 등)을 추가하기 위한 컴퓨터 언어입니다. 주요 역할은 페이지 레이아웃과 요소의 시각적 표현을 정의하는 것입니다.

CSS는 단독으로 사용될 수 없으며, HTML 또는 XML과 함께 작동하여 이들을 꾸미는 역할을 합니다. HTML이 웹 페이지의 내용을 결정한다면, CSS는 해당 요소들을 어떤 모습(크기, 두께, 색상, 정렬, 위치)으로 보여줄지 결정합니다. CSS는 페이지 레이아웃 설정, 개별 요소 스타일 지정, 그리고 모든 웹 페이지에 적용되는 전역 스타일 설정에 사용될 수 있습니다.

다음 예시는 CSS가 HTML 요소의 스타일을 변경하는 방법을 보여줍니다.

간단한 단락을 작성합니다:

<p>HTML은 웹의 핵심 언어입니다!</p>

이제 글자 색상을 변경해 봅시다:

p {
  /* 설명: 단락(p)의 글자 색상을 어두운 파란색으로 설정합니다 */
  color: #0056b3;
}

글자 정렬 방식을 변경하여 가운데 정렬해 봅시다:

p {
  color: #0056b3;
  /* 설명: 텍스트 정렬을 가운데로 설정합니다 */
  text-align: center;
}

이처럼 CSS는 HTML 요소의 외형을 조절합니다. CSS의 등장은 페이지 내용과 스타일의 분리를 가능하게 했습니다. HTML 파일은 구조와 내용 정보만을 담고, CSS 파일은 스타일 정보만을 담게 되어 HTML 파일을 간소화하고 CSS 파일을 더 쉽게 유지보수할 수 있게 되었습니다.

JavaScript는 무엇인가?

JavaScript(줄여서 JS)는 고급 인터프리터 방식의 프로그래밍 언어로, 웹 페이지를 상호작용 가능하게 만듭니다(예: 복잡한 애니메이션, 클릭 가능한 버튼, 드롭다운 메뉴, 양식 유효성 검사, 페이지 효과, 요소 조작 등). 사용자에게 더욱 유동적이고 시각적으로 매력적인 탐색 경험을 제공하기 위해 다양한 동적 기능을 웹 페이지에 추가하는 데 주로 사용됩니다.

JavaScript는 객체 지향 프로그래밍, 명령형 프로그래밍, 함수형 프로그래밍을 지원합니다. 텍스트, 배열, 날짜, 정규식 등을 조작하는 구문을 제공합니다. 이는 ECMA(유럽 컴퓨터 제조업체 협회)에 의해 ECMAScript로 언어 표준화가 이루어졌습니다.

헷갈리기 쉬운 JavaScript와 Java

Java와 JavaScript는 서로 다른 프로그래밍 언어입니다. JavaScript라는 이름이 붙은 이유는 당시 Java가 가장 인기 있는 프로그래밍 언어였고, 이름에 "Java"를 포함하면 새로 나온 언어가 더 널리 퍼지는 데 도움이 될 것이라고 생각했기 때문입니다. 두 언어는 이름과 구문에서 C 언어와 유사한 점이 많지만, 설계 초기부터 많은 차이가 있었습니다. JavaScript는 주로 Self(프로토타입 기반 프로그래밍 언어)와 Scheme(함수형 프로그래밍 언어)의 영향을 받았습니다. JavaScript는 브라우저에서 실행되는 동적이고 약한 타입의 스크립트 언어인 반면, Java는 객체 지향적이고 정적인 강한 타입의 프로그래밍 언어로 플랫폼 독립적인 애플리케이션 개발에 사용됩니다.

HTML 요소의 구성

HTML은 <p>와 같은 태그로 둘러싸인 HTML 요소 형태로 구성됩니다.

HTML 태그

<p>는 일반적인 HTML 태그의 예시입니다. HTML 태그는 다음과 같은 특징을 가집니다:

꺾쇠 괄호(<>)로 둘러싸인 키워드로 구성됩니다. 예: <p>, <h1>, <div>, <span> 등.
일반적으로 쌍으로 나타나며, <div>와 </div>처럼 첫 번째는 시작 태그, 두 번째는 종료 태그입니다. 종료 태그는 시작 태그에 /가 추가됩니다.
태그는 주로 쌍으로 나타나지만, <input>, <img> 등 일부 태그는 종료 태그가 없습니다. 이들은 단독으로 존재합니다.

참고: HTML에서 태그 이름은 대소문자를 구분하지 않습니다. <p>와 <P>는 동일하게 작동하지만, 일반적으로 태그는 모두 소문자로 작성하는 것이 권장됩니다.

HTML 요소 분석

다음 그림에서 볼 수 있듯이, 일반적인 HTML 요소는 보통 시작 태그, 종료 태그, 그리고 내용으로 구성됩니다.

단독으로 존재하는 태그의 경우, 해당 태그 자체가 하나의 요소를 나타냅니다.

HTML의 중첩

HTML에서는 요소들이 중첩될 수 있습니다. 다음 HTML 코드 예시를 봅시다:

<div>
  <p>웹 개발은 흥미롭습니다!</p>
</div>

위 코드에는 두 개의 요소가 있습니다.

첫 번째 요소: <p>웹 개발은 흥미롭습니다!</p>

시작 태그: <p>
종료 태그: </p>
내용: "웹 개발은 흥미롭습니다!"

두 번째 요소: <div><p>웹 개발은 흥미롭습니다!</p></div>

시작 태그: <div>
종료 태그: </div>
내용: "<p>웹 개발은 흥미롭습니다!</p>"

첫 번째 요소 전체가 <div></div>의 내용으로 포함되어, <div></div> 내부에 중첩되어 있습니다. 구조적으로 중첩 관계가 발생한 것입니다.

div 요소는 p 요소의 부모 요소이고, p 요소는 div 요소의 자식 요소입니다.

완전한 HTML 문서 구조

다음은 간단하고 완전한 HTML 문서의 예시입니다. 각 부분을 하나씩 살펴보겠습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 웹 페이지</title>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>이것은 나의 첫 번째 HTML 문서입니다.</p>
</body>
</html>

1. `<!DOCTYPE html>`

역할: 이 문서가 어떤 HTML 버전으로 작성되었는지 웹 브라우저에 알려주는 선언입니다. 브라우저가 페이지를 올바르게 렌더링하도록 돕습니다.
위치: HTML 문서의 가장 첫 줄에 위치해야 하며, <html> 태그보다 앞에 와야 합니다.
<!DOCTYPE> 선언은 대소문자를 구분하지 않습니다.
<!DOCTYPE> 선언은 종료 태그가 없습니다.

2. `<html lang="ko">...</html>`

역할: 이 요소는 문서 자체가 HTML 문서임을 브라우저에 알립니다.
<html>과 </html> 태그는 문서의 시작과 끝을 정의하며, 그 안에 문서의 헤더와 본문이 포함됩니다. 문서의 헤더는 <head> 태그로 정의되고, 본문은 <body> 태그로 정의됩니다.
lang 속성(언어 속성): 이 속성은 문서의 기본 언어를 지정합니다. 검색 엔진이나 브라우저가 이 언어 속성을 활용하여 특정 언어에 맞는 보조 작업을 수행할 수 있습니다. 'ko'는 한국어를 의미합니다.

3. 태그 속성

태그는 0개 이상의 속성을 가질 수 있습니다. 태그 이름과 속성, 그리고 속성들 사이는 공백으로 구분해야 합니다.
태그 속성은 태그에 추가적인 정보를 부여하며, 일반적으로 key="value" 즉, 이름="값"의 형태로 나타납니다.
자주 사용되는 태그 속성에는 class, id, style, lang, src 등이 있습니다.

4. 문서의 헤더 `<head>...</head>`

head 요소는 문서의 헤더 부분을 정의하며, 주로 스타일 시트를 연결하거나 메타 정보를 제공하는 데 사용됩니다.
<head> 내의 <title>...</title>은 문서의 제목을 정의하며, 웹 페이지 탭에 표시되는 제목이 됩니다.
하나의 <head> 요소는 반드시 하나 이상의 <title> 요소를 포함해야 합니다.

메타 정보: 데이터에 대한 데이터를 의미하며, 주로 문서의 요약 정보나 설명 정보를 나타냅니다.

5. 문서의 본문 `<body>...</body>`

body 요소는 문서의 본문을 정의하며, 텍스트, 하이퍼링크, 이미지, 표, 목록 등 웹 페이지에 표시될 모든 콘텐츠를 포함합니다.

HTML 주석

모든 프로그래밍 언어에는 주석이 있듯이, HTML에도 주석이 있습니다. HTML에서는  태그를 사용하여 주석을 표시합니다:

<!-- 이것은 웹 페이지에 표시되지 않는 주석입니다. -->
<p>이 문단은 웹 페이지에 나타납니다.</p>

웹 페이지에는 다음과 같이 표시됩니다:

이 문단은 웹 페이지에 나타납니다.

주석 태그는 소스 코드에 설명을 삽입하는 데 사용됩니다. 주석은 브라우저의 웹 페이지에 표시되지 않습니다.

MDN 알아보기

MDN이란?

Mozilla 개발자 네트워크(Mozilla Developer Network, MDN)는 Mozilla, Microsoft, Google, Samsung, W3C가 협력하여 구축한 최고의 웹 문서 자료입니다. 웹 개발 학습을 위한 권위 있고, 포괄적이며, 고품질의 웹사이트로, 풍부한 문서와 자료를 제공하여 학습에 매우 적합합니다. 웹 개발 학습 시 백과사전처럼 활용하세요.

일반적으로 MDN의 태그 문서에는 여러 태그 사용 예시, 태그 속성 설명, 각 브라우저에서의 태그 호환성 통계, 관련 태그 링크 등의 내용이 포함되어 태그 관련 지식을 더 잘 이해하는 데 도움을 줍니다.

지금 바로 MDN - HTML 요소 레퍼런스를 방문해 보세요.

MDN 사용법

이제 <img> 태그를 예로 들어 MDN 문서를 사용하는 방법을 보여드리겠습니다.

검색
MDN 웹사이트에 접속하여 페이지 상단 또는 검색창에서 'img'를 검색합니다.

검색 결과 중 HTML 태그 관련 항목(예: "<img>: The Image Embed element")을 선택하여 문서 페이지로 이동합니다.
문서 읽기
문서를 열면 일반적으로 HTML 태그(html tag) 문서에는 해당 태그의 개요, 속성 설명, 사용 예시, 브라우저 호환성 등의 내용이 포함되어 있습니다.

태그 속성 소개 부분으로 이동하면 <img> 태그의 다양한 속성들(예: src, alt, title 등)의 역할을 확인할 수 있습니다.

문서 초반에는 사용 예시가 나와 있어 <img> 태그를 어떻게 사용하는지 이해할 수 있습니다.

HTML 텍스트 관련 태그

블록 레벨 요소와 인라인 요소

다음은 간단한 단락 예시입니다:

<p>
  타의 추종을 불허하는 고급스러움, 멋진 백사장, 그리고 놀라운 수중 세계가
  몰디브를 평생 잊지 못할 휴가를 위한 명백한 선택으로 만듭니다.
  <img src="/assets/island-view.jpg" alt="몰디브 해변 풍경" />
</p>

표시 결과는 다음과 같습니다:

타의 추종을 불허하는 고급스러움, 멋진 백사장, 그리고 놀라운 수중 세계가 몰디브를 평생 잊지 못할 휴가를 위한 명백한 선택으로 만듭니다. 몰디브 해변 풍경

단락 안에 텍스트와 이미지가 함께 표시되지만, 이미지와 텍스트가 같은 줄에 있어서 시각적으로 깔끔하지 않을 수 있습니다. 만약 이미지와 텍스트를 다음과 같이 다른 줄에 표시하고 싶다면 어떻게 해야 할까요?

<p>
  타의 추종을 불허하는 고급스러움, 멋진 백사장, 그리고 놀라운 수중 세계가
  몰디브를 평생 잊지 못할 휴가를 위한 명백한 선택으로 만듭니다.
</p>
<p>
  <img src="/assets/island-view.jpg" alt="몰디브 해변 풍경" />
</p>

이 웹 페이지 콘텐츠 구조는 두 개의 단락으로 구성됩니다. 첫 번째는 텍스트이고, 두 번째는 이미지입니다.

이렇게 하면 텍스트와 이미지가 분리되어 표시되는 이유는 무엇일까요?

<img> 태그는 인라인(inline) 요소이고, <p> 태그는 블록(block) 레벨 요소이기 때문입니다.

수정 전: 인라인 요소인 <img> 태그는 자신의 내용(이미지)을 위해 새로운 줄을 차지하지 않으므로, 이미지와 텍스트가 같은 줄에 표시됩니다.
수정 후: 이미지를 단락 태그 <p>로 감싸면, <p>는 블록 레벨 요소이므로 자신의 내용(이미지)을 위해 새로운 줄을 차지하게 됩니다. 따라서 텍스트 단락과 이미지 단락이 두 줄에 걸쳐 표시됩니다.

블록 레벨 요소와 인라인 요소는 HTML의 두 가지 주요 요소 유형이며, 가장 큰 차이점은 블록 레벨 요소는 자신의 내용을 위해 항상 새로운 줄을 차지하는 반면, 인라인 요소는 그렇지 않다는 것입니다.

일반적인 블록 레벨 요소로는 단락 <p>, 제목 <h1>, <div> 등이 있으며, 일반적인 인라인 요소로는 <span>, 이미지 <img>, <strong> 등이 있습니다. HTML에는 많은 태그가 있지만, 처음부터 모든 태그를 기억하려고 노력할 필요는 없습니다. 학습과 반복을 통해 자주 사용되는 태그들을 자연스럽게 익히게 될 것입니다.

아래 간단한 웹 페이지는 기사를 보여줍니다. 기사에는 제목, 단락, 이미지가 있습니다. 제목 태그 <h1>과 단락 태그 <p>는 한 줄을 독점하는 블록 레벨 요소입니다. 반면 <span>, <img>, <strong> 태그는 한 줄의 일부만을 차지하는 인라인 요소입니다. 인라인 요소는 종종 블록 레벨 요소 내부에 중첩됩니다.

자주 사용되는 텍스트 태그

단락 태그 `<p>`

이제 기사의 단락을 작성해 봅시다.

가장 흔히 사용되는 HTML 태그 중 하나인 <p> 태그(블록 레벨 요소, paragraph)를 사용합니다. HTML에서 많은 태그는 다른 태그를 중첩할 수 있으며, 단락 태그 <p>도 예외는 아닙니다. 텍스트, 이미지, 양식 항목 등 단락으로 표시하고 싶은 모든 내용은 <p> 태그 안에 넣을 수 있습니다.

<p>이것은 웹 페이지에 표시될 첫 번째 단락입니다.</p>

위 코드는 간단한 단락을 만듭니다.

인라인 태그 `<strong>`

이제 기사에서 강조하고 싶은 문구에 굵은 글씨를 적용해 봅시다.

여기서 <strong> 태그를 사용합니다. <strong>은 인라인 요소이며, 포함된 내용이 매우 중요함을 나타내어 주의를 기울여야 함을 의미합니다. 브라우저는 이 내용을 굵게 표시합니다.

<p>문장 중에서 <strong>강조할 내용</strong>입니다.</p>

표시 결과: 문장 중에서 강조할 내용입니다.

팁: <b> 태그도 내용을 굵게 만들 수 있지만, <strong>과는 다르게 의미가 없으며 단순히 스타일만 굵게 표시합니다.

인라인 태그 `<span>`

아래 단락에서, 특정 단어 "SEO 최적화"를 <span>으로 감싸 봅시다. <span>은 인라인 요소(즉, 줄 바꿈을 발생시키지 않음)이며, 일반적으로 인라인 구문을 나타냅니다. <span>을 사용하면 웹 페이지를 더 체계적으로 만들 수 있습니다. <strong> 태그가 텍스트를 굵게 만들 수 있는 반면, <span>은 스타일 파일이 적용되지 않으면 일반 텍스트와 시각적으로 차이가 없습니다.

<p>이 문장은 <span>SEO 최적화</span>에 대한 중요한 정보를 담고 있습니다.</p>

표시 결과: 이 문장은 SEO 최적화에 대한 중요한 정보를 담고 있습니다.

이미지 태그

이제 기사에 이미지를 삽입하여 더욱 풍부하고 흥미롭게 만들어 봅시다.

이미지를 삽입하려면 <img> 태그를 사용합니다. 여러 번 보셨듯이, 사용 방법은 다음과 같습니다:

<img src="/images/sunset.jpg" alt="아름다운 일몰 풍경" width="500" height="300">

표시 결과: 아름다운 일몰 풍경

src 속성에는 이미지의 상대 경로 또는 절대 경로를 입력하면 됩니다.

이미지 태그에는 alt 속성도 있습니다. 이 속성은 이미지에 대한 대체 텍스트를 정의합니다. 이미지 URL이 잘못되었거나, 지원되지 않는 형식인 경우, 또는 이미지가 아직 다운로드되지 않았을 때 사용자에게 이 대체 텍스트가 표시됩니다.

링크 태그

마지막으로, 기사에 원본 링크를 추가해 봅시다.

HTML은 링크 태그 <a>를 제공하여 기사에 링크를 추가할 수 있게 합니다.

<a> 태그는 인라인 요소이며, 사용자가 클릭하면 브라우저는 지정된 URL로 이동합니다. 다음은 일반적인 링크의 예시입니다.

<a href="https://www.example.com">더 많은 정보 보기</a>

표시 결과: 더 많은 정보 보기

브라우저는 "더 많은 정보 보기" 텍스트 아래에 기본적으로 밑줄을 표시하여 링크임을 나타냅니다. 사용자가 클릭하면 브라우저는 href 속성으로 지정된 URL로 이동합니다.

<a> 태그 내부에는 텍스트뿐만 아니라 단락, 이미지, 멀티미디어 등 다른 요소도 배치할 수 있습니다. 예를 들어:

<a href="https://www.example.com/gallery">
  <img src="/images/thumbnail.jpg" alt="갤러리 썸네일">
  <p>사진 갤러리</p>
</a>

표시 결과:

사진 갤러리

이제 링크 태그의 중요한 속성들에 대해 알아보겠습니다.

링크 태그의 속성

`href`

href 속성은 링크가 가리키는 웹 주소를 제공합니다. 값은 URL 또는 앵커(문서 내 특정 위치)여야 합니다.

URL: Uniform Resource Locator의 약자로, 인터넷 상의 표준 자원 주소입니다 (흔히 웹 주소 또는 줄여서 URL이라고 불림).

`title`

title 속성은 링크에 대한 추가 설명 정보를 제공합니다. 마우스를 링크 위에 올리면 브라우저가 이 속성의 값을 툴팁 형태로 표시합니다.

<a href="https://www.example.com" title="새 창에서 웹사이트 방문">예시 웹사이트</a>

`target`

target 속성은 열린 링크를 어떻게 표시할지 지정합니다.

target 속성의 값은 "_self", "_blank", "_parent", "_top" 네 가지 키워드 중 하나일 수 있습니다.

"_self"일 경우, 현재 페이지에서 링크를 엽니다. target의 기본값은 "_self"입니다.
"_blank"일 경우, 새 페이지 또는 새 탭에서 링크를 엽니다.

<!-- 현재 페이지에서 열기 (기본값) -->
<a href="https://www.another-example.com" target="_self">현재 탭에서 열기</a>

<!-- 새 탭에서 열기 -->
<a href="https://www.another-example.com" target="_blank">새 탭에서 열기</a>

표시 결과:

현재 탭에서 열기

새 탭에서 열기

이전에 기사에서 사용했던 제목 태그 <h1>~<h6>, 단락 태그 <p>, 인라인 태그 <span>, <strong>, 이미지 태그 <img>(인라인 요소), 링크 태그 <a>(인라인 요소) 외에도, 목록 태그는 매우 자주 사용되는 텍스트 관련 태그입니다.

HTML은 순서 없는 목록 태그 <ul>와 순서 있는 목록 태그 <ol>를 제공합니다. 여기서는 순서 없는 목록 태그 <ul>을 선택하겠습니다. 각 목록 항목은 <li> 태그로 표시됩니다:

<ul>
  <li>매일 아침 운동하기</li>
  <li>새로운 기술 학습하기</li>
  <li>친구들과 저녁 식사하기</li>
</ul>

표시 결과:

매일 아침 운동하기
새로운 기술 학습하기
친구들과 저녁 식사하기

각 목록 항목 <li> 앞에는 채워진 작은 원이 있습니다. 이것은 순서 없는 목록의 기호입니다. 목록 항목의 순서가 중요하지 않을 때 주로 순서 없는 목록 태그 <ul>을 사용합니다.

목록 항목의 순서를 표시하고 싶다면 <ol> 태그를 사용합니다. 이 경우 목록 기호는 숫자나 문자 등이 됩니다:

<ol>
  <li>블로그 게시물 초안 작성</li>
  <li>코드 리뷰 참여</li>
  <li>새 기능 개발</li>
</ol>

표시 결과:

블로그 게시물 초안 작성
코드 리뷰 참여
새 기능 개발

폼(Form) 태그

`form` 태그

웹을 탐색할 때 사용자의 상호 작용은 주로 링크를 클릭하여 웹 페이지를 보는 방식으로 이루어집니다. 하지만 때로는 사용자가 정보를 입력하여 제공할 필요도 있습니다. 예를 들어:

웹사이트 회원가입 및 로그인
개인 정보 입력 (이름, 주소, 신용카드 정보 등)
콘텐츠 필터링 (드롭다운 메뉴, 체크박스 사용 등)
검색 수행
파일 업로드
...

이러한 요구 사항을 충족하기 위해 HTML은 다음과 같은 상호 작용하는 폼 컨트롤을 제공합니다:

텍스트 입력 (한 줄 또는 여러 줄)
라디오 버튼
체크박스
드롭다운 메뉴
파일 업로드 위젯
제출 버튼
...

`form` 태그

이제 아래 회원가입 폼 개발을 완료해 봅시다.

이 회원가입 폼에는 입력 상자, 버튼과 같은 폼 요소들이 포함되어 있습니다. 이러한 폼 컨트롤은 하나의 블록 레벨 요소인 <form>으로 감싸야 합니다. 동일한 폼에 속하는 폼 컨트롤은 모두 동일한 <form> 요소 안에 포함되어야 합니다.

이 태그에는 action과 method라는 두 가지 중요한 속성이 있습니다:

action: 폼 정보가 제출될 때 이 정보를 처리할 프로그램이 위치한 URL을 지정합니다.
method: 값이 GET 또는 POST일 수 있으며, 폼 정보를 어떻게 보낼지 규정합니다.

일반적으로 폼 정보는 서버로 전송됩니다. 데이터 처리 방법은 이번 과정의 내용이 아니며, 나중에 다루게 될 것입니다.

먼저 웹 페이지에 폼 영역을 정의하는 <form> 태그를 작성해 봅시다:

<!-- <form>은 블록 레벨 요소이며, <form> 태그는 <form> 태그를 중첩할 수 없습니다. -->
<form action="/submit-registration" method="post">
  <!-- 여기에 다양한 폼 컨트롤이 들어갑니다 -->
</form>

한 줄 텍스트 입력 상자

먼저 사용자 이름 입력 상자를 작성해 봅시다.

한 줄 텍스트 입력 상자:

<form action="/submit-registration" method="post">
  <input type="text" />
</form>

특히 주의할 점: input은 인라인 요소일 뿐만 아니라, 시작 태그만 있고 종료 태그가 없는 인라인 요소입니다. 즉, "단일 태그" 또는 "자체 닫힘 태그"로 볼 수 있습니다. 다른 자체 닫힘 태그를 기억하시나요?

1. 플레이스홀더 텍스트 "`placeholder`"

회원가입 폼의 사용자 이름 입력 상자에는 "사용자 이름"이라는 글자가 있습니다. 이 글자는 입력 상자를 클릭하고 내용을 입력하면 사라지는 플레이스홀더 텍스트입니다. 주로 사용자에게 무엇을 입력해야 하는지 힌트를 주는 데 사용됩니다. 이는 "placeholder" 속성을 통해 구현할 수 있습니다.

<input type="text" placeholder="사용자 이름" />

2. 입력 상자 이름 "`name`"

다른 <input> 요소와 구별하기 위해 사용자 이름 입력 상자에 name 속성을 추가해야 합니다. 폼 데이터를 제출할 때 다른 <input>과 혼동되지 않도록 입력 상자의 이름 역할을 합니다.

<input type="text" placeholder="사용자 이름" name="username" />

3. 입력 상자 값 "`value`"

입력 상자에 사용자의 이름을 미리 채워 넣고 싶다면, value 속성을 사용할 수 있습니다.

<input type="text" placeholder="사용자 이름" name="username" value="김철수" />

4. 수정 불가능한 입력 상자 "`readonly`"와 "`disabled`"

특정 상황에서는 사용자에게 닉네임을 할당하고, 사용자가 직접 수정하는 것을 원치 않을 수 있습니다. 이때 다음과 같이 할 수 있습니다:

<input type="text" placeholder="아이디" name="userid" value="user123" readonly />

이렇게 하면 입력 상자가 읽기 전용이 됩니다! 따라서 사용자는 미리 채워진 내용을 직접 수정할 수 없습니다.

"readonly" 속성 외에 "disabled" 속성도 사용할 수 있습니다. 이 속성 또한 사용자가 입력 상자의 내용을 변경할 수 없게 만듭니다.

<input type="text" placeholder="아이디" name="userid" value="user123" disabled />

하지만 이 두 속성에는 몇 가지 차이점이 있습니다:

속성	`disabled`	`readonly`
적용 대상	모든 폼 요소	`input` 및 `textarea`
기능	텍스트 상자에 입력할 수 없게 하며, 폼이 POST 또는 GET 방식으로 제출될 때 `disabled`된 요소의 값은 전달되지 않습니다.	텍스트 상자에 입력만 할 수 없게 합니다.
외형 *	텍스트 상자가 회색으로 변합니다.	외형 변화가 없습니다.

외형 *: 브라우저마다 입력 상자의 외형이 다를 수 있으므로, "readonly"와 "disabled" 입력 상자의 외형 차이는 위 표와 다를 수 있습니다.

여러 줄 텍스트 입력 상자와 비밀번호 입력 상자

다음으로 자기소개와 비밀번호 입력 상자를 작성해 봅시다.

여러 줄 입력 상자

자기소개는 여러 줄 입력 상자입니다. 여러 줄 텍스트 입력 상자는 입력 내용이 한 줄의 길이를 초과하면 자동으로 줄 바꿈이 되지만, 한 줄 텍스트 입력 상자는 그렇지 않습니다.

여기서 여러 줄 입력 상자를 작성하는 데 textarea 태그를 사용합니다.

<!-- name 속성은 폼 요소의 이름을, placeholder 속성은 폼 요소의 플레이스홀더 텍스트를 나타냅니다. -->
<textarea name="bio" rows="6" cols="40" placeholder="자기소개를 입력하세요."></textarea>

여기서 rows와 cols는 각각 행 수(높이)와 텍스트 영역의 가시 폭을 나타냅니다. 이 두 속성은 필수가 아니며, <textarea></textarea>만으로도 여러 줄 입력 상자를 나타낼 수 있습니다.

표시 결과:

여러 줄 텍스트 상자 우측 하단에는 대각선 선들이 보일 수 있습니다. 이 선 위에서 마우스 왼쪽 버튼을 누른 채 드래그하면 입력 상자의 크기를 조절할 수 있습니다.

비밀번호 입력 상자

비밀번호 입력 상자는 사용자 이름 입력 상자와 약간 다릅니다. 사용자가 입력한 내용은 검은색 점 형태로 표시됩니다.

입력 내용이 직접 표시되지 않게 하는 방법은 매우 간단합니다. 폼 태그 <input>의 type="text" 속성을 type="password"로 변경하기만 하면 됩니다:

<!-- type 속성은 폼 요소의 유형을, name 속성은 폼 요소의 이름을, placeholder 속성은 폼 요소의 플레이스홀더 텍스트를 나타냅니다. -->
<input type="password" name="user_password" placeholder="비밀번호" />

라디오 버튼과 체크박스

성별 선택 (라디오 버튼)

여기서는 남성과 여성 두 가지 성별만 고려하며, 사용자는 하나의 성별만 선택할 수 있습니다. 단일 선택 문제처럼, 사용자는 남성 또는 여성 중 하나만 선택할 수 있습니다.

여기서는 라디오 버튼을 사용해야 합니다:

<!-- type 속성은 폼 요소의 유형을, name 속성은 폼 요소의 이름을, value 속성은 폼 요소의 값을 나타냅니다. -->
<input type="radio" name="sex" value="male" />
<input type="radio" name="sex" value="female" />

라디오 버튼은 단순히 컨트롤 유형 type="text"를 type="radio"로 변경한 것입니다. 대부분의 폼 요소는 type 속성 값을 변경하여 구현됩니다.

* 동일한 "단일 선택" 문제에 속하는 각 라디오 버튼은 동일한 name 속성 값을 가져야 합니다.

value="male"은 남성을, value="female"은 여성을 나타내지만, 위의 웹 페이지 표시 결과에는 이 단어들이 나타나지 않습니다. 사실 이 단어들은 폼 데이터 제출 시 전송되는 내용입니다.

그렇다면 옵션 내용을 웹 페이지에 어떻게 표시할까요? 간단합니다. input 태그 뒤에 직접 내용을 추가하면 됩니다:

<input type="radio" name="sex" value="male" />남자
<input type="radio" name="sex" value="female" />여자

이제 사용자가 텍스트 앞의 작은 원을 클릭하면 해당 성별이 선택됩니다. 클릭해서 시도해 보세요.

하지만 이렇게 하면 클릭 범위가 너무 작습니다. 텍스트를 클릭해도 해당 성별이 선택되면 더 좋을 것입니다. 이를 위해 라디오 버튼과 <label> 태그를 함께 사용하는 경우가 많습니다:

<label><input type="radio" name="sex" value="male" />남자</label>
<label><input type="radio" name="sex" value="female" />여자</label>

다른 작성 방법:
<input id="gender_male" type="radio" name="sex" value="male" />
<label for="gender_male">남자</label>
<input id="gender_female" type="radio" name="sex" value="female" />
<label for="gender_female">여자</label>
여기서는 라디오 버튼 <input>에 id="gender_male" 속성을 추가하고, <label> 태그에는 for="gender_male" 속성을 추가했습니다. 이렇게 하면 둘 사이에 일대일 대응 관계가 설정됩니다.

관심사 다중 선택 (체크박스)

사용자는 여러 분야에 관심을 가질 수 있으므로, 관심사 선택에는 체크박스를 사용해야 합니다.

체크박스는 다중 선택 문제와 유사하며, 사용자는 여러 옵션을 선택할 수 있습니다. 그 외에는 라디오 버튼과 비슷하며, 유형은 checkbox입니다:

<input type="checkbox" />

페이지에 작은 사각형이 보일 것입니다. 클릭하면 선택되고, 다시 클릭하면 선택이 취소됩니다.

관심사 체크박스를 잘 작성하기 위해, 이 간단한 체크박스에 텍스트(<label> 태그와 함께), name 속성, value 값을 추가해야 합니다:

<label><input type="checkbox" name="hobbies" value="reading" />독서</label>
<label><input type="checkbox" name="hobbies" value="movies" />영화 감상</label>
<label><input type="checkbox" name="hobbies" value="sports" />운동</label>

* 동일한 "다중 선택" 문제에 속하는 각 체크박스 요소는 동일한 name 속성 값을 가져야 합니다.

참고: 체크박스는 "선택됨" 또는 "선택되지 않음"의 두 가지 상태를 가진 폼 컨트롤입니다. 단일 체크박스의 경우, 사용자가 특정 조항에 "동의" 또는 "비동의"와 같이 예/아니오를 선택할 수 있게 합니다. 반면, 단일 라디오 버튼의 경우, 사용자가 한 번 선택하면 웹 페이지를 새로고침하기 전까지는 선택을 취소할 수 없습니다.

옵션 메뉴 (드롭다운)

직업 선택을 위해 "회사원", "프리랜서", "학생", "기타" 등 몇 가지 고정된 옵션을 사용자에게 제공합니다. 물론 실제 상황에서는 더 많은 옵션이 있을 수 있습니다. 옵션이 다소 많기 때문에 라디오 버튼 대신 새로운 태그인 <select>와 <option>을 사용한 옵션 메뉴를 활용합니다.

각 옵션은 <option> 태그로 표시되며, 전체 옵션 그룹은 <select> 태그로 감싸집니다:

<select name="occupation">
  <option value="">직업을 선택하세요</option>
  <option value="employee">회사원</option>
  <option value="freelancer">프리랜서</option>
  <option value="student">학생</option>
  <option value="other_job">기타</option>
</select>

참고: 이것은 단일 선택 메뉴입니다. 사용자가 "학생"을 선택하면 제출되는 데이터는 occupation:"student"가 됩니다.

발견하셨나요? 제출되는 내용은 "학생"이 아니라 <option> 태그의 value 속성 값입니다. 따라서 각 option의 value 값은 서로 달라야 합니다.

만약 다중 선택 메뉴를 원한다면 어떻게 해야 할까요?

간단합니다. <select> 태그에 multiple 속성을 추가하면, Ctrl(또는 ⌘)을 누른 채 옵션을 클릭하여 여러 옵션을 선택할 수 있습니다:

<select name="fav_languages" multiple>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
  <option value="csharp">C#</option>
</select>

버튼

마지막으로, 이 폼의 회원가입 버튼을 완성해 봅시다.

HTML에서 제공하는 <button> 태그를 사용합니다:

<button>회원가입</button>

<button> 태그는 닫는 태그가 있으므로, 시작 태그와 닫는 태그 사이에 텍스트, 이미지, 아이콘 등을 넣을 수 있습니다.

이 버튼은 form 안에 있을 때 클릭 시 자동으로 폼 데이터를 제출하지만, 버튼의 폼 데이터 제출 방식에는 브라우저 호환성 문제가 있을 수 있습니다. 일반적으로 데이터 제출을 확실히 하기 위해 type="submit"을 추가하는 것이 좋습니다:

<button type="submit">회원가입</button>

완전한 회원가입 폼 예시

<form action="/register" method="post">
  <p>
    <label for="user_nickname">닉네임:</label>
    <input type="text" id="user_nickname" name="nickname" placeholder="닉네임을 입력하세요" required />
  </p>

  <p>
    <label for="user_email">이메일:</label>
    <input type="email" id="user_email" name="email" placeholder="이메일 주소" required />
  </p>

  <p>
    <label for="user_password_field">비밀번호:</label>
    <input type="password" id="user_password_field" name="password" placeholder="비밀번호" required />
  </p>

  <p>
    <label for="user_bio">자기소개:</label>
    <textarea id="user_bio" name="bio" rows="5" cols="40" placeholder="자신을 소개해 주세요."></textarea>
  </p>

  <fieldset>
    <legend>성별 선택</legend>
    <label><input type="radio" name="user_gender" value="male" />남자</label>
    <label><input type="radio" name="user_gender" value="female" />여자</label>
    <label><input type="radio" name="user_gender" value="other" />기타</label>
  </fieldset>

  <fieldset>
    <legend>관심 분야</legend>
    <label><input type="checkbox" name="user_interests" value="tech" />기술</label>
    <label><input type="checkbox" name="user_interests" value="art" />예술</label>
    <label><input type="checkbox" name="user_interests" value="music" />음악</label>
  </fieldset>

  <p>
    <label for="user_occupation">직업:</label>
    <select id="user_occupation" name="occupation">
      <option value="">선택하세요</option>
      <option value="developer">개발자</option>
      <option value="designer">디자이너</option>
      <option value="student">학생</option>
      <option value="other">기타</option>
    </select>
  </p>

  <p>
    <button type="submit">회원가입 완료</button>
  </p>
</form>

`input` 태그 요약

다음 표는 input 태그의 각 유형에 해당하는 폼 컨트롤을 간략하게 요약한 것입니다.

`type` 속성 값	해당 폼 컨트롤	설명
`text`	한 줄 텍스트 입력	짧은 텍스트 정보(예: 사용자 이름)를 입력합니다.
`password`	비밀번호 입력	입력된 문자를 가리는 한 줄 텍스트 입력입니다.
`radio`	라디오 버튼	여러 옵션 중 하나만 선택할 수 있습니다.
`checkbox`	체크박스	여러 옵션 중 하나 이상을 선택하거나, 예/아니오를 선택할 수 있습니다.
`submit`	폼 제출 버튼	클릭하면 폼 데이터를 서버로 전송합니다.
`button`	일반 버튼	기본적으로 아무 동작도 하지 않으며, JavaScript와 함께 사용됩니다.
`email`	이메일 주소 입력	유효한 이메일 형식의 입력을 예상합니다.
`number`	숫자 입력	숫자만 입력할 수 있으며, 증가/감소 컨트롤을 가질 수 있습니다.

태그: HTML 웹 개발 프론트엔드 HTML 태그 폼 요소

7월 17일 00:32에 게시됨

괴물 클럽

HTML 기본 이해: 웹 콘텐츠 구조화

HTML이란 무엇인가?

HTML의 발전 과정

CSS는 무엇인가?

JavaScript는 무엇인가?

헷갈리기 쉬운 JavaScript와 Java

HTML 요소의 구성

HTML 태그

HTML 요소 분석

HTML의 중첩

완전한 HTML 문서 구조

1. <!DOCTYPE html>

2. <html lang="ko">...</html>

3. 태그 속성

4. 문서의 헤더 <head>...</head>

5. 문서의 본문 <body>...</body>

HTML 주석

MDN 알아보기

MDN이란?

MDN 사용법

HTML 텍스트 관련 태그

블록 레벨 요소와 인라인 요소

자주 사용되는 텍스트 태그

단락 태그 <p>

인라인 태그 <strong>

인라인 태그 <span>

이미지 태그

링크 태그

링크 태그의 속성

href

title

target

목록

폼(Form) 태그

form 태그

form 태그

한 줄 텍스트 입력 상자

1. 플레이스홀더 텍스트 "placeholder"

2. 입력 상자 이름 "name"

3. 입력 상자 값 "value"

4. 수정 불가능한 입력 상자 "readonly"와 "disabled"

여러 줄 텍스트 입력 상자와 비밀번호 입력 상자

여러 줄 입력 상자

비밀번호 입력 상자

라디오 버튼과 체크박스

성별 선택 (라디오 버튼)

관심사 다중 선택 (체크박스)

옵션 메뉴 (드롭다운)

버튼

완전한 회원가입 폼 예시

input 태그 요약

인기 태그

1. `<!DOCTYPE html>`

2. `<html lang="ko">...</html>`

4. 문서의 헤더 `<head>...</head>`

5. 문서의 본문 `<body>...</body>`

단락 태그 `<p>`

인라인 태그 `<strong>`

인라인 태그 `<span>`

`href`

`title`

`target`

`form` 태그

`form` 태그

1. 플레이스홀더 텍스트 "`placeholder`"

2. 입력 상자 이름 "`name`"

3. 입력 상자 값 "`value`"

4. 수정 불가능한 입력 상자 "`readonly`"와 "`disabled`"

`input` 태그 요약