본문 바로가기
Front/HTML

HTML5 type & tags

by 자바꿈나무00 2023. 1. 5.

태그의 기초

  • 태그의 사용법 : <> </> 기호를 사용해서 콘텐츠의 시작과 끝을 표시한다. 각 태그는 콘텐츠를 감싸며, 태그명은 콘텐트의 성격과 의미를 나타낸다.
  • 단일 태그 : 경우에 따라서는 시작과 끝을 구분할 필요가 없다. 여는 태그나 닫는 태그 중 어떤 것을 써도 상관 없는 경우에 해당한다.
  • 속성 태그 : 태그의 부가적인 기능을 정의한다. (선택사항) 태그명과 속성 정의는 공백으로 구분하며 큰따옴표를 사용한다.
  • 주석 : 컴퓨터는 읽지 않고 사람에게만 보이게 처리할 때 사용한다.

 

 

HTML 구성요소

  • <!DOCTYPE html> : 이것이 html 최신 표준 문법으로 작성되었음을 나타낸다. 
  • <head></head> : 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다.
  • <meta charset="utf-8"> : 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 적는 단일 태그이다. 
  • 문자 인코딩 : 한글을 표시하기 위해 문자 세트를 지정하는 작업. 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.
  • <title></title> : 문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.
  • <body></body> : 실제 사용자에게 보여지는 내용을 입력하는 태그이다. 

 

 

줄바꿈 태그<br>와 공백문자&nbsp;

Enter와 Space는 여러 번을 사용해도 공백이 한 번만 인정되서 &nbsp;나 <br>태그를 사용해야 한다.

 

 

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

인라인 요소: 자기가 필요한 만큼의 공간만 차지한다.

=> 블록레벨 요소 안에 인라인 요소를 넣어서 활용하기도 한다. 그런데 블록레벨 안에 블록레벨을 넣어서 쓰면 그 사이에 층이 생겨서  원하지 않는 공백이 발생할 수 있다.

 

 

img태그

  • src속성 :  이미지의 url을 입력받아서 이미지를 지정한다. 
  • url : 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)이다.
  • alt(alternative) : 대체 텍스트 역할을 한다. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다. alt를 사용하면 음성인식기가 이미지 대신 그것을 활용하도록 해서 이미지를 볼 수 없는 사람들에게 웹페이지를 서비스해야 하는 상황에 대비할 수 있다. 
  • 이미지크기 지정 : 너비(width), 높이(height)를  픽셀(px)과 함께 사용해서 지정 가능하다. 만약 지정하지 않는다면 원본파일의 크기 그대로이다. 단위 없이 정수 값만 지정 가능하다.

 

컨테이너 태그(container tag)

  • 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 '컨테이너'라고 한다. 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용할 때 추천한다.
  • <div></div> : 블록레벨
  • <span></span> : 인라인레벨

 

대표적인 전역 속성들(Global attributes)

  • id : 사용자가 지정하는 것으로 요소에 고유한 이름을 부여하는 식별자 역할 속성이다.
  • class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성이다.
  • style : 요소에 적용할 CSS 스타일을 선언하는 속성이다.
  • title :  요소의 추가 정보를 제공하는 텍스트 속성이다. 사용자에게 툴 팁을 제공한다.
  • 참고 사이트 > https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
 

HTML: HyperText Markup Language | MDN

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/be

developer.mozilla.org

 

 

링크 태그(link tag)

  • <a></a>(anchor) 
  • href 속성을 통해 다른 페이지, 전화번호 등 다른 url로 연결할 수 있는 링크(연결)을 만든다.
  • 인라인 요소
  • 콘텐츠는 주로 링크의 목적지를 나타낸다. 
  • <a href="" target="_self"></a> : 현재 창에서 열림 
  • <a href="" target="_target"></a> :   새 창으로 열림
  • <a href="tel:000-0000-0000">000-0000-0000</a> : 전화 거는 기능이 있는 프로그램이 있다면 전화를 걸 수 있다.
  • <a href="mailto:메일주소@naver.com">mailto:메일주소@naver.com</a> : 메일 보내는 창이 열림

 

 

목록 태그(list tag)

  • ul(unordered list) : 순서가 없는 목록
  • ol(ordered list) : 순서가 있는 목록
  • li(list) : 목록에 들어가는 항목을 표현 할 때 사용한다.
  • 위의 태그 모두 블록 레벨 요소이다. 목록을 나타내는 의미의 공백이 포함된다.

 

 

인풋 태그(input tag)

  • 사용자에게 값을 입력받을 수 있는 대화형 컨트롤(필드)를 나타낸다.
  • 기본적으로 인라인 요소이다.
  • 단일태그이다.
  • type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다.
 

Global attributes - HTML: HyperText Markup Language | MDN

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

developer.mozilla.org

 

 

 

<태그 참고 링크>

 

HTML Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

5.2. text 타입 : 한 줄의 텍스트를 입력받을 수 있는 타입

<input type="text" name="이름">
  • text 타입 속성 설명
    size 텍스트 필드의 길이를 지정한다.
    value 텍스트 필드에 표시될 내용을 지정한다. (생략 시 빈 텍스트 필드가 보임)
    maxlength 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정한다.

5.3. password 타입 : 비밀번호를 입력받을 수 있는 타입

  • text 타입과 다르게 사용자가 입력하는 값이 표시되지 않고 '*' 또는 '●' 표시된다. 
    <input type="password" name="이름">

5.4. search 타입 : 검색 값을 입력받기 위한 타입

  • text 타입과 다르게 검색어 입력 시 'X'가 표시되고 검색어를 쉽게 지울 수 있다. 
    <input type="search" name="이름">

5.5. url 타입 : URL을 입력받기 위한 타입

  • 입력받은 값이 URL 형식이 맞는지 자동으로 체크해 준다. 
    <input type="url" name="이름">

5.6. email 타입 : email 주소를 입력받기 위한 타입이다. (공백 X, 영문자, 마침표, 슬래시)

  • 입력받은 값이 email 주소 형식이 맞는지 자동으로 체크해 준다. 
  • <input type="email" name="이름">

5.7. tel 타입 : 전화번호를 입력받기 위한 타입

  • 모바일 기기의 경우 가상 키보드 배열이 전화번호를 입력받을 수 있도록 바뀐다. 
    <input type="tel" name="이름">

5.8. number 타입 :  숫자를 입력받기 위한 타입

  • 브라우저에 따라서 스핀 박스가 표시되기도 한다. (스핀 박스: 입력창 오른쪽에 위/아래 화살표 버튼)
  • number 타입 속성속성설명
    min 입력할 수 있는 최소값 (기본값: 0)
    max 입력할 수 있는 최대값 (기본값: 100)
    step 증감되는 숫자의 간격을 지정한다. (기본값: 1)
    value 표시할 초기값 
    <input type="number" name="이름">

5.9. range 타입 :  슬라이드바를 통해 숫자를 입력받기 위한 타입

<input type="range" name="이름">
  • range 타입 속성속성설명
    min 입력할 수 있는 최소값 (기본값: 0)
    max 입력할 수 있는 최대값 (기본값: 100)
    step 증감되는 숫자의 간격을 지정한다. (기본값: 1)
    value 표시할 초기값

5.10. color 타입 : 색상을 입력받기 위한 타입으로 색상표에서 원하는 색상을 선택가능

  • value 속성으로 초기 색상을 지정할 수 있다. 
    <input type="color" name="이름" value="#ffffff">

5.11. file 타입 : 파일을 첨부하려고 할 때 사용하는 타입

  • multiple 속성을 통해 파일을 다중으로 선택할 수 있다. 
    <input type="file" name="이름">

5.12. radio 타입 : 여러 항목 중 한 가지만 선택할 수 있는 타입

  • 여러 개를 선언하여 하나의 용도로 사용할 경우 name 속성의 값이 같아야 한다.
  • value 속성은 서버로 넘길 라디오 버튼의 값을 지정한다.
  • checked 속성은 기본적으로 선택할 항목이 있다면 사용한다. 
    <input type="radio" name="gender" value="남자" checked>
<input type="radio" name="gender" value="여자">

5.13. checkbox 타입 : 여러 항목 중 여러 가지를 선택할 수 있는 타입

  • 여러 개를 선언하여 하나의 용도로 사용할 경우 name 속성의 값이 같아야 한다.
  • value 속성은 서버로 넘길 체크박스의 값을 지정한다.
  • checked 속성은 기본적으로 선택할 항목이 있다면 사용한다. 
    <input type="checkbox" name="food" value="한식" checked>
<input type="checkbox" name="food" value="중식">
<input type="checkbox" name="food" value="일식">

5.14. date 타입 : 년/월/일의 날짜 데이터를 입력받기 위한 타입

<input type="date" name="이름" value="2022-05-20">

5.15. month 타입 :  년/월의 날짜 데이터를 입력받기 위한 타입

<input type="month" name="이름" value="2022-05">

5.16. week 타입 :  주(Week)에 대한 데이터를 입력받기 위한 타입

<input type="week" name="이름" value="2022-W10">

5.17. time 타입 :  시간(시/분/초) 정보를 입력받기 위한 타입

<input type="time" name="이름" value="23:59">

5.18. datetime 타입 : 년/월/일/시/분/초에 대한 데이터를 입력받기 위한 타입

<input type="datetime" name="이름">

5.19. datetime-local 타입 : datetime 타입은 크롬, 엣지 등의 브라우저에서 지원하지 않기 때문에 datetime-local 타입을 사용

<input type="datetime-local" name="이름">

5.20. button 타입 : 클릭할 수 있는 버튼을 만드는 타입

  • value 속성을 사용해 버튼에 표시할 내용을 지정할 수 있다. 
    <input type="button" name="이름" value="확인">

5.20. submit 타입 : form 태그 안에 작성된 모든 input 태그의 값을 서버로 전송하는 타입 (action 속성에 지정한 서버(페이지)에 전송)

  • value 속성을 사용해 버튼에 표시할 내용을 지정할 수 있다. 
    <input type="submit" name="이름" value="전송">

5.21. reset 타입 : form 태그 안에 작성된 모든 input 태그의 값을 지울 때 사용하는 타입

  • value 속성을 사용해 버튼에 표시할 내용을 지정할 수 있다. 
    <input type="reset" name="이름" value="취소">

6. 여러 값 표현 태그 :  여러 개의 데이터를 보여주고  선택할 수 있도록 하는 태그

6.1. select  : 태그드롭 다운을 이용해서 여러 개의 데이터 목록 중에 하나의 값을 선택하도록 하는 태그

  • option 태그를 사용해서 데이터 목록을 추가한다. 
    <label for="national">국적 : </label>

<select name="national" id="national">
  <option value="ko">한국</option>
  <option value="ch">중국</option>
  <option value="jp">일본</option>
</select>
  • select 태그 속성속성설명
    size 드롭 다운 목록의 개수를 지정한다. (기본값: 1)
    multiple Ctrl 키를 누른 상태로 여러 개의 드롭 다운 목록을 선택할 수 있도록 한다.
  • option 태그 속성속성설명
    value 옵션을 선택했을 때 서버로 전송된 값을 지정한다.
    selected 드롭 다운 목록 중에 기본적으로 선택되어 있는 옵션을 지정한다.

6.2. datalist 태그 : 텍스트 필드에서 데이터 목록 중에 하나의 값을 선택하도록 만들어주는 태그

  • option 태그를 사용해서 데이터 목록을 추가한다. 
    <label>취미 : <input type="text" name="hobby" list="hobbies"></label>
      
<datalist id="hobbies">
  <option value="baseball">농구</option>
  <option value="football">축구</option>
  <option value="baseball">야구</option>
</datalist>

7. 기타 폼 태그

7.1. button 태그 : 클릭할 수 있는 버튼을 만드는 태그

  • button 태그를 통해서도 폼을 전송하거나 리셋하기 위한 버튼을 삽입할 수 있다. 
    <!-- type 생략 시 submit으로 동작한다. -->
<button>전송</button>
<button type="submit">전송</button>
<button type="reset">리셋</button>
<button type="button">버튼</button>

7.2.textarea 태그 : 여러 줄의 텍스트를 입력할 수 있는 태그

줄이 길어지면 자동으로 scroll이 생긴다.

<textarea name="이름"></textarea>

7.3. progress 태그 : 작업 진행 상태를 나타내는 태그

<progress value="10" max="100">
  • progress 태그 속성속성설명
    value 진행 상태를 나타낸다. (0 보다 크거나 같고 max 보다 작거나 같아야 한다.)
    max 진행 상태의 최댓값을 나타낸다.

7.4. meter 태그 : 전체 크기 중에서 얼마나 차지하는지를 표현하는 태그

<meter min="0" max="100" value="90">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 관련 태그</title>
</head>
<body>
    <h1>폼 관련 태그</h1>
    <h2>폼 태그의 기본 구조</h2>

    <h3>검색 폼</h3>
    <form name="search_form">
        <!--  
            name 속성
                form 태그 안에서 input 태그를 구분하는 역할을 한다.
                서버로 값을 전달할 때 name 속성과 value 값이 세트(name=value)로 묶어서 전송한다. 
        -->
        <label>
            검색할 내용 : <input type="text" name="search">
        </label>

        <!--
            submit 버튼을 눌렀을 때 method 속성에 지정된 전송 방식으로 action 속성에 지정한 서버로 입력한 값들을 전송한다.
        -->
        <input type="submit" value="검색">
    </form>

    <h3>회원가입 폼</h3>
    <form name="signUp_form" autocomplete="off">
        <fieldset>
            <legend>회원정보</legend>

            <label for="userId">아이디 : </label>
            <input type="text" id="userId" name="userId" required autofocus>
            
            <br><br>
            
            <label for="userPwd">패스워드 : </label>
            <input type="password" id="userPwd" name="userPwd" placeholder="패스워드를 입력해 주세요.">
        </fieldset>
        <fieldset>
            <legend>배송정보</legend>
            <label for="userName">수령인 : </label>
            <input type="text" id="userName" name="userName" readonly>

            <br><br>

            <label for="addr">주소 : </label>
            <input type="text" id="addr" name="addr" autocomplete="off">
        </fieldset>

        <br>

        <input type="submit" value="회원가입">
    </form>

    <hr>
    
    <h2>input 태그</h2>
    <h3>type="hidden"</h3>
    <form>
        <input type="hidden" name="hiddenValue" value="1234">

        <input type="submit" value="전송">
    </form>

    <h3>type="text|password|search|url|email|tel"</h3>
    <form>
        <!-- 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 -->
        <label for="id">아이디 : </label>
        <input type="text" name="id" id="id" value="KH"
            size="30" maxlength="14" placeholder="아이디를 입력하세요.">

        <br><br>

        <label for="pwd">패스워드 : </label>
        <input type="password" name="pwd" id="pwd"
            size="30" maxlength="8" placeholder="비밀번호를 입력하세요.">

        <br><br>
        
        <label for="searchValue">검색 : </label>
        <input type="search" name="searchValue" id="searchValue" 
            size="30" maxlength="10" placeholder="검색할 내용을 입력하세요.">

        <br><br>

        <label for="homePage">홈페이지 : </label>
        <input type="url" name="homePage" id="homePage" value="https://">

        <br><br>

        <label for="email">이메일 : </label>
        <input type="email" name="email" id="email" placeholder="이메일을 입력하세요.">

        <br><br>

        <label for="phone">전화번호 : </label>
        <input type="tel" name="phone" id="phone">

        <br><br>

        <input type="submit" value="전송">
        <input type="reset" value="초기화">
    </form>

</body>
</html>

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

HTML개요  (0) 2023.01.19
하리보 전시 입구 사진 HTML, 구현  (0) 2023.01.11
HTML5 태그2  (0) 2023.01.04
HTML5 태그1  (0) 2023.01.03

관련글

티스토리툴바