HTML 기본 정리

📌 HTML

HTML (Hypertext Markup Language)
- 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드

 

HTML은 콘텐츠의 구조를 정의하는 마크업 업어

 

마크업 언어

문서의 구조와 서식을 표현하기 위해 사용되는 언어입니다.

태그등을 통해 문서나 데이터의 의미, 구조를 명시하는 언어.

• HTML, XML, Markdown

 

📖 HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>페이지 제목</title>
  </head>
  <body>
    </body>
</html>

• <!DOCTYPE html>
  • 이 문서가 HTML 문서임을 선언
  • 모든 HTML 문서에서 가장 먼저 나와야 합니다.
• <html>
  • 전체 HTML 문서의 시작과 끝을 나타내는 루트 요소
  • 페이지 전체의 콘텐츠를 감쌉니다.
• <head>
  • 웹 페이지의 제목, 스타일(CSS), 스크립트(JavaScript) 등 페이지에 보이지 않는 메타 정보
• <body>
  • 웹 페이지에 실제로 보이는 모든 콘텐츠 (본문 - 텍스트, 이미지, 링크 등)가 포함됩니다.

 

🏷️ HTML 시맨틱 태그 (Semantic Tags)

Semantic

• 의미의, 의미론적인

 

시맨틱 태그는 의미를 가진 태그로 포함된 콘텐츠의 목적이나 역할을 명확히 설명합니다.

 

<div>나 <span>처럼 의미가 없는 태그와 달리 시맨틱 태그를 사용해 문서의 구조와 의미를 더 쉽게 이해할 수 있습니다

• 콘텐츠를 각 부분의 역할과 기능을 전달하는데 도움을 줍니다.
• 좀 더 명시적이면서 직관적인 구조의 설계가 가능!

 

🏷️ 시맨틱 태그 종류

HTML Semantic Tag	설명
<header>	페이지의 머리글, 로고, 탐색 메뉴 등을 포함합니다.
<nav>	내비게이션(Navigation) 링크들을 모아 놓은 영역입니다.
<main>	문서의 주요 콘텐츠를 담는 영역으로 페이지당 한 번만 사용해야 합니다.
<article>	독립적인 콘텐츠(예: 블로그 글, 뉴스 기사)를 나타냅니다.
<section>	관련 있는 콘텐츠들을 그룹화합니다.
<aside>	본문 콘텐츠와는 직접적인 관련이 적은 부가적인 콘텐츠(예: 광고, 사이드바)를 나타냅니다.
<footer>	페이지의 바닥글, 저작권 정보 등을 포함합니다
<time>	섹션이나 영역에 자동으로 날짜를 추가하는데 사용

 

 

ℹ️ HTML Form 요소

HTML Form은 사용자로부터 데이터를 입력받기 위해 사용되는 요소들의 집합입니다.

• 사용자와 웹사이트 / 애플리케이션이 서로 상호 작용

 

1️⃣  form 태그

<form name="test" action="/test.html" method="get">
  <input type="text" name="id">
  <select>
    <option value="blue">first</option>
    <option value="blue">second</option>
  </select>
  <input type="submit" value="Submit"> 
</form>

폼의 시작과 끝을 정의합니다. (입력 양식 전체를 감싸는 태그)

 

name	폼의 이름
action	폼 데이터를 전송할 서버의 URL 또는 html 링크
method	서버로 데이터를 전송할 HTTP Method 지정

 

 

method

• GET
  • URL에 폼 데이터가 추가되어 전송됩니다.
  • 간단한 검색이나 데이터 요청에 사용됩니다.
• POST
  • HTTP 메시지 본문에 폼 데이터가 담겨 전송됩니다.
  • 비밀번호나 대용량 데이터 전송에 사용됩니다.

 

2️⃣ input 태그

<form>
  <input type="text" name="firstname" maxLength="3" required><br> 
  <input type="text" name="lastname"><br>
  <input type="text" name="alias" placeholder="없을시 생략"> 
</form>

 

input 태그 속성

• type ⭐ : input 태그의 타입 지정
• maxLength: 텍스트 필드에 최대로 입력할 수 있는 문자 개수 지정
• placeholder: 입력 필드에 사용자가 입력해야 할 내용을 힌트처럼 보여줍니다.
• required: 필수 입력 필드 지정

 

📍 type 속성 종류

text	한 줄짜리 일반 텍스트 입력 필드
password	입력 내용이 가려지는 비밀번호 입력 필드
checkbox	여러 개를 선택할 수 있는 체크박스
radio	여러 옵션 중 하나만 선택할 수 있는 라디오 버튼
submit	폼을 제출하는 버튼
file	파일을 선택할 수 있는 버튼

 

3️⃣  textarea 태그

<form action="/test.html" method="get">
    <textarea name="opinion" cols="30" rows="5" placeholder="작성!">
    </textarea>
    <br>
    <input type="submit">
</form>

textarea 요소는 input 요소의 "text" 타입과 비슷한 형태이지만 "text" 타입의 input 요소는 한 줄만 입력이 가능하지만 <textarea> 태그는 여러 줄의 긴 내용을 입력하는 것이 가능합니다.

 

4️⃣  button 태그

<button type="button" onclick="...">
   Click!
</button>

페이지에 버튼을 넣고 form을 전송하거나 리셋할 때 사용

button type 속성	설명
submit	form 제출
reset	form 리셋
button	버튼의 형태 → 함수를 연결해 눌렸을 때 다른 동작을 하도록 한다.

 

 

🆚 class 와 id

class와 id는 HTML 요소에 이름을 부여하여 CSS로 스타일을 적용하거나 JavaScript로 특정 요소를 제어할 때 사용됩니다.

 

id: 문서 내에서 유일한 식별자입니다.

• 한 페이지에 동일한 id는 단 하나만 존재해야 합니다.
• 예시:

class: 여러 요소에 동일한 이름을 부여할 수 있습니다.

• 여러 요소에 같은 스타일을 적용할 때 주로 사용됩니다.
• 예시: <p class="highlight">, <div class="card">

 

HTML 접근성

HTML 접근성은 장애를 가진 사용자를 포함하여 모든 사용자가 웹 콘텐츠에 쉽게 접근하고 이용할 수 있도록 하는 것을 의미합니다.

시각 장애 사용자를 위한 스크린 리더, 키보드만 사용하는 사용자를 위한 기능 등을 고려해야 합니다.

 

시맨틱 태그 사용: 콘텐츠의 의미를 명확히 하여 스크린 리더가 내용을 올바르게 읽을 수 있도록 돕습니다.

 

alt 속성: 이미지에 대한 설명을 제공하여 시각 장애 사용자가 이미지의 내용을 파악할 수 있게 합니다.

• 예시: <img src="dog.jpg" alt="귀여운 강아지가 풀밭에서 놀고 있는 사진">

 

aria 속성: 동적 콘텐츠나 복잡한 위젯의 접근성을 높이기 위해 사용

 

레이블(label): 폼 입력 요소와 해당 입력 필드의 설명을 연결하여 사용성을 높입니다.

• 예시: <label for="name">이름</label><input type="text" id="name">

 

📚 Ref.

https://developer.mozilla.org/ko/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content

https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Accessibility/HTML

https://developer.mozilla.org/ko/docs/Glossary/Semantics

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Reference/Attributes

https://mailchimp.com/resources/html-semantic-elements-and-webflow-the-essential-guide/

https://inpa.tistory.com/entry/HTML-📚-폼Form-태그-정리