[HTML] 4.HTML form 요소 , dl, 텍스트 강세, 제목, 헤더, footer

1. HTML dl

HTML의 dl 요소는 문장의 설명을 나타낼때 사용합니다. <dl>은 <dt>로 표기한 용어와 <dd>요소로 표기한 그룹의 목록을 감싸서 설명 목록을 만들어냅니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-2-1.html-dd</title>
    <link rel="stylesheet" href="css/1-2-1.html-dd.css">
</head>
<body>
    <div class="dd-background">
    <p>Html 이란:</p>

    <dl>
        <dt>개발자</dt>
        <dd>팀 버너스리</dd>
    </dl>

    <dl>
        <dt>개발 년도</dt>
        <dd>1990</dd>
    </dl>

    <dl>
        <dt>언어</dt>
        <dd>마크업 언어</dd>
    </dl>
</div>
</body>
</html>

접근성 고려

각각의 스크린 리더는 <dl>을 다르게 표현합니다. 총 아이템 개수, 용어/정의 컨텍스트 및 탐색 방법등을 다르게 노출합니다. 이러한 차이가 반드시 버그를 일으키는게 아닙니다.

 <div>
    <dt>Chrome</dt>
    <dd>
        프리웨어 웹 브라우저이며 웹킷 엔진을 애플이 복제하여 만든 블랭크 엔진을 채용
    </dd>
</div>

복수 용어와 단일 정의

<dl>
<dt>Chrome</dt>
   <!-- 복수 용어와 단일 정의 -->
    <dt>Google Chrome</dt>
   <dt>GC</dt>
   <dd>
      프리웨어 웹 브라우저이며 웹킷 엔진을 애플이 복제하여 만든 블랭크 엔진을 채용
   </dd>
</dl>

복수 용어와 복수 정의

메타데이터

<dl>은 메타데이터를 키 -값 쌍으로 표시할 때 유용합니다.

<dl>
    <dt>이름</dt>
    <dd>구글 크롬</dd>
    <dt>개발회사</dt>
    <dd>마이크로소프트</dd>
    <dt>OS</dt>
    <dd>윈도우, macOS, 크롬OS, 리눅스, 윈도우10 등</dd>
    <dt>엔진</dt>
    <dd>블랭크 엔진</dd>       
</dl>

이름-값 그룹을 <div>로 감싸기

HTML에서 <dl> 요소의 각 이름-값 그룹을 <div>로 감쌀 수 있습니다. css에서 이 div요소는 스타일링 목적으로 유용하게 사용합니다.

<dl>
  <div>
        <dt>이름</dt>
       <dd>구글 크롬</dd>
   </div>     
  <div>   
      <dt>개발회사</dt>
       <dd>마이크로소프트</dd>
  </div>     
  <div>    
       <dt>OS</dt>
       <dd>윈도우, macOS, 크롬OS, 리눅스, 윈도우10 등</dd>
  </div>     
   <div> 
    <dd>윈도우, macOS, 크롬OS, 리눅스, 윈도우10 등</dd>
       <dt>엔진</dd>
       <dd>블랭크 엔진</dd>          
   </div>
 </dl>

페이지에서 들여쓰기를 사용할 때는 <dl>(또는 <ul> 요소를 사용하지 말아야합니다. 작동을 하나 좋지않는 방법입니다.

2.HTML Form 요소

HTML의 form을 나타내기 위해서 <form> 태그를 사용해야 합니다.

  <form action="" method="get">
      <div class="form-example">
       <label for="name">이름을 입력해주세요:</label>
        <input type="text" name="name" id="name" required/>
     </div>
        <div class="form-example">
         <label for="email">이메일을 입력해주세요:</label>
         <input type="email" name="email" id="email" required/>
      </div>
      <div class="form-example">
         <input type="submit" value="Check">
      </div>
</form>

<form> 요소를 꾸밀땐, 모든 엘리먼트의 유효성을 나타내는 CSS :valid와 :invalid의 의사 클래스를 사용할 수 있습니다.

3. HTML <h1> - <h6> 제목

HTML에서 <h1> ~ <h6> 요소는 6개의 제목으로 나타내고, <h1>이 가장 크며, <h6>이 가장 작은 크기의 제목입니다

<h1>제일 큰 글자</h1>
<h2>안녕</h2>
<h3>세번째</h3>
<h4>Koras02</h4>
<h5>글씨가 작아요</h5>
<h6>끝</h6>

4. Head 요소

HTML의 <head> 요소는 기계가 식별할 수 있는 정보(메타데이터)를 담습니다.

  <header>
    <a class="logo" href="#">약사의 혼잣말 피규어</a>
  </header>

  <article>
    <header>
        <h1>[애니 소식] 약사의 혼잣말 피규어 5월 발송예정!</h1>
        <time>2025.1.26</time>
    </header>
    <p>약사의 혼잣말 <em>2025 5월</em> 피규어 1월 17일 11시 부터 예약 발송 예정</p>
  </article>

5.footer 요소

<article>
  <header>
    <h1>[애니 소식] 약사의 혼잣말 피규어 5월 발송예정!</h1>
    <time>2025.1.26</time>
   </header>
   <p>약사의 혼잣말 <em>2025 5월</em> 피규어 1월 17일 11시 부터 예약 발송 예정</p>
</article>

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

GitHub - HTML5-STR/html-bloging: https://thinky.tistory.com/category/%EC%9B%B9/HTML

https://thinky.tistory.com/category/%EC%9B%B9/HTML - HTML5-STR/html-bloging

github.com

LIST

'Front-End > HTML' 카테고리의 다른 글

[HTML] 6.HTML nav, ol, option, span, strong (0)	2025.02.01
[HTML] 5.HTML label 요소, legend, 리스트, 링크 스타일,메뉴 (1)	2025.02.01
[HTML] 3.HTML 강조표시-몸-버튼 (0)	2025.01.29
[HTML] 2.HTML의 링크걸기 a 태그 주소 adress (0)	2025.01.28
[HTML] 1. HTML의 탄생 (2)	2025.01.27

'Front-End > HTML' 카테고리의 다른 글

티스토리툴바