[HTML] HTML 총정리 (2) _ 문서 구조화

WEB/HTML

[HTML] HTML 총정리 (2) _ 문서 구조화

SOo • 2023. 4. 12. 19:36

🎀 시맨틱 웹

검색엔진은 웹 페이지에 대한 정보를 알 수 없다. 때문에 HTML5는 이런 문제를 극복하기 위해 <header>, <section>,<article>과 같은 문서의 구조와 의미를 표현하는 태그들을 추가했다. 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹을 시맨틱 웹이라고 한다. 또한 <header>, <section>, <article>,<summary>,<mark> 등의 태그를 시맨틱 태그라고 한다.

<!DOCTYPE html>
<html> <head> <meta charset="utf-8">
<title> HTML5 문서 구조 시맨틱 태그 사용</title>
<style>
    html, body {margin:0; padding: 0; height: 100%;}
    header { width: 100%; height: 15%; background: yellow;}
    nav { width: 15%; height: 70%; float: left; background: orange;}
    section { width: 70%; height: 70%; float: left; background: olivedrab;}
    aside { width: 15%; height: 70%; float: left; background: orange;}
    footer { width: 100%; height: 15%; clear: both; background: plum;}
</style>
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>section</section>
    <aside>aside</aside>
    <footer>footer</footer>
</body>
</html>

RESULT :

결과 값을 보며 설명하도록 하겠다.

<header> 태그 : 페이지나 섹션의 머리말을 표현하는 태그이다. 보통 머리말에는 페이지 제목, 페이지를 소개하는 간단한 내용이 들어간다.
<nav>태그: navigation의 준말로 하이퍼링크들을 모아놓은 섹션이다. 페이지 내 목차를 만들기 위해 주로 사용된다.
<section> 태그: 문서의 장 혹은 절을 구성하는 역할을 하며 섹션이라고 부른다. 헤딩태그로 섹션의 주제를 기재하는 것이 바람직하다.
<article> 태그: <section>이 본문에서 필수적인 내용을 담는다면 <article>은 웹 페이지의 본질을 훼손하지 않는 내용들을 담는 데 주로 사용된다.
<aside> 태그: 웹 페이지 본문 흐름에서 약간 벗어난 노트나 팁,신문,잡지에서 주요 기사 옆에 짤막하게 곁들이는 관련 기사, 삽입어구로 표시된 논평이나 글 등을 담는 태그이다.
<footer> 태그: 저자나 저작권 정보등을 주로 표시하는 꼬리말 영역 태그이다.

🎀 시맨틱 태그

<figure> 태그

<firgure>는 본문에 삽입된 그림을 블록화 하는 시맨틱 태그이다. <figure> 태그를 활용하면 이미지, 동영상, 소스 코드 등 콘텐츠를 블록화 할 수 있다. 그림 제목은 <figure> 태그 내에 <figcaption> 태그로 작성한다.

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> 
    <title> figure 태그 활용 </title>
    </head>
<body>
    <h3> figure 태그 활용 </h3> <hr>
    <figure id="1-1">
        <figcaption> alert() 함수 활용 </figcaption>
        <pre>
            <code>function f() {alert("경고합니다");}</code>
        </pre> <hr>
        <small>실행결과</small>
        <pre>
            <img src="media/alert.png" alt="실행결과">
        </pre>
    </figure>
</body>
</html>

RESULT:

<details> 는 상세 정보를 담는 시맨틱 블록 태그이다. <details>로 만든 블록에 대해 브라우저 화면에 핸들이 나타나며, 사용자가 핸들을 클릭하여 상세 정보를 감추거나 보이게 할 수 있다. <summary>태그는 <details>로 구성되는 블록의 제목을 표현한다.

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8">
        <title> details 와 summary 태그 </title>
    </head>
    <body>
        <h3> details와 summary 태그 </h3>
        Q &amp; A 리스트
        <hr>
        <details>
            <summary>Question 1</summary>
            <p> 웹 개발자가 알아야 하는 언어 3가지 ? </p>
        </details>
        <details>
            <summary>Answer 1</summary>
            <p> HTML5,CSS,JAVASCRIPT </p>
        </details>
    </body>
</html>

RESULT :

시맨틱 인라인 태그

<marks> - 중요한 텍스트임을 표시
<time> - 시간 정보임을 표시
<meter> - 주어진 범위나 %의 데이터 양 표시
<progress> - 작업의 진행정도 표시, 점진적으로 변하는 양을 나타내는데 사용

!DOCTYPE html>
<html>
    <head> <meta charset="utf-8">
    <title> 인라인 시맨틱 태그 </title>
    </head>
    <body>
        <h3> 인라인 시맨틱 태그 사례 </h3> <hr>
        <p>
            내일 <mark> HTML 시험 </mark> <br>
            시간은 <time> 09:00 </time> <br>
            난이도 <meter value="0.8" max="1.0"> 80% </meter> <br>
            자료 업로딩(20%) <progress value="2" max="10"></progress> <br>
        </p>
    </body>
</html>

RESULT :

🎀 웹 폼

웹 페이지를 통해 사용자 입력을 받는 폼을 웹 폼 (webform) 혹은 폼 (form)이라고 한다. 폼 태그들을 폼 요소(form element)라고 부른다. 폼은 로그인, 등록, 검색, 예약, 쇼핑 등의 다양한 웹 서비스에서 사용자의 입력을 받기 위해 사용된다.

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8">
    <title> 로그인 폼 </title></head>
    <body>
        <h3> 로그인 폼 </h3> <hr>
        <form name="fo" method="get">
            사용자 ID: <input type="text" size="15" value=""> <br> 
            비밀번호: <input type="password" size="15" value=""> <!-- 사용자가 입력한 문자가 드러나지 않도록 *가 대신 출력-->
            <input type="submit" value="완료"> 
  <!--SUBMIT 버튼을 만드는 태그, 버튼의 표면에는 완료 글자 출력 / 버튼을 누르면 사용자가 폼 요소들에 입력한 내용을 웹 서버에 전달 -->
        </form>
    </body>
</html>

RESULT :

🎀 폼 태그 <form>

name 속성: 폼의 이름을 지정하는 속성
action 속성: 폼 데이터를 처리할 웹 서버 응용프로그램을 지정. submit 버튼이 클릭되면 브라우저는 action 속성에 지정된 웹 서버에 연결하고 웹 서버 응용프로그램을 실행할 것을 지시한다. 이때 사용자가 입력한 폼 데이터를 함께 전송한다.
method 속성: 폼 데이터를 웹 서버로 전송하는 형식을 지시. 대표적인 방법이 GET과 POST이다.

텍스트 입력, <input type="text|password">, <textarea>

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> 
    <title> 텍스트 입력 폼 </title> 
    </head>
    <body>
        <h3> 자기 소개서 작성 </h3>
        <hr>
        <form>
            이름: <input type="text" vlaue="" size="3" maxlength="5"><br>
            암호: <input type="password" value="" maxlength="4"><br>
            자소서: <textarea cols="10" rows="5" wrap="soft"> 초기 텍스트입니다. 이곳에 자기소개서를 작성하시오.
            </textarea>
        </form>
    </body>

</html>

RESULT:

<input type="text" value="초기에 출력되는 문자열> 
<textarea cols="20" rows="5"> 
	화면에 출력할 초기 텍스트입니다. 없으면 빈 공간만 출력됩니다.

위의 input은 주소나 이름 등 한 줄 텍스트를 입력받는 창이며 textarea 는 여러 줄의 텍스트를 입력받을때 사용하는 태그이다.

데이터 목록을 가진 텍스트 입력 창, <datalist>

<datalist></datalist> 태그를 활용하면 추천 검색어 목록을 펼치고 항목을 선택할 수 있다.

밑 예제를 보면 <input> 태그의 list 속성 값과 <datalist>의 id 속성 값을 동일하게 주어 이 둘을 연결한다.

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"> 
    <title>데이터 목록을 가진 텍스트 입력</title> </head>
    <body>
        <h3> 가보고 싶은 곳</h3> <hr>
        <form>
            나라: <input type="text" list="countries"><br>
            <datalist id="countries">
                <option value="가나">
                <option value="가봉">
                <option value="스위스">
                <option value="브라질">
            </datalist>
            보고싶은것: <input type="text" list="what"><br>
            <datalist id="what">
                <option value="산">
                <option value="바다">
                <option value="도시">
            </datalist>
        </form>
    </body>
</html>

텍스트/이미지 버튼 만들기

버튼은 <input> 태그나 <button> 태그로 만들 수 있으며 type 속성으로 버튼의 기능을 선택할 수 있다.

<input type="button|reset|submit|image"
	name="버튼 이름"
    value="문자열">
    버튼 문자열이나 이미지 
</button>

선택형 입력

체크박스 만들기, <input type="checkbox">

체크박스는 선택/ 해제 중 하나를 선택하는 폼 요소다. checked 속성을 가진 체크박스는 처음부터 선택이 된 채로 출력된다.

<!DOCTYPE html>
<html> 
    <head><meta charset="utf-8">
    <title> 체크 박스 만들기 </title></head>
    <body>
        <h3> 먹고 싶은 것 모두 체크하세요 </h3>
        <hr>
        <form method="get"> 
            짜장면 <input type="checkbox" name="food1" value="1">
            짬뽕 <input type="checkbox" name="food2" value="2" checked>
            탕수육 <input type="checkbox" name="food3" value="3">
            <input type="submit" value="제출">

        </form>
    </body>
</html>

라디오버튼 만들기, <input type="radio">

라디오 버튼은 name 속성 값이 같은 라디오 버튼들이 하나의 그룹을 형성하고 그 중 하나만 선택되는 폼 요소다. checked 속성을 가진 것이 선택상태로 출력된다.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title> 라디오버튼 만들기</title></head>
    <body>
        <h3> 먹고 싶은 것 하나만 선택 ?</h3>
        <hr>
        <form>
            <input type="radio" name="china" value="1">
                짜장면 <img src="media/jajang.png"><br>
            <input type="radio" name="china" value="2" checked>
                짬뽕 <img src="media/jjambbong.png"><br>
            <input type="radio" name="china" value="3">
                탕수육 <img src="media/tangsuyuk.png">
        </form>
    </body>
</html>

폼 요소들의 그룹핑, <fieldset>

<fieldset> 태그는 몸 요소들을 그룹으로 묶을 수 있으며 그룹의 제목은 <legend> 태그로 표현한다. 브라우저는 그룹을 둘러싸는 외각선 박스와 제목을 출력하여 그룹을 표시한다.

<!DOCTYPE html>
<html>
    <head> <meta charset="utf-8">
    <title> 폼 입력 그룹으로 묶기 </title></head>
    <body>
        <h3> 회원 정보를 입력하세요.</h3>
        <hr>
        <form>
            <fieldset>
                <legend> 회원정보 </legend>
                이메일: <input type="email"><br>
                홈페이지: <input type="url"><br>
                전화번호: <input type="tel">
            </fieldset>
            <small> 질문: Tel. 010-111-1111 </small>
        </form>
    </body>
</html>