코딩두의 포트폴리오

TAG 본문

Web/웹프로그래밍응용

TAG

코딩두 2025. 4. 12. 15:49

Ex)

<!DOCTYPE html>
<html>

<heda>
	<meta charset="UTF-8">
    <title>
    	HELLO
    </title>
</head>

<Body>
	Hello World
</Body>

</html>
Hello World

 

<!DOCTYPE html>
<html lang="ko">

<heda>
	<meta charset="UTF-8">
</head>

<body>
	
    <h1>제목 1</h1>
    <h2>제목 2</h2>
    <h3>제목 3</h3>
    <p>단락 1</p>
    <p>단락 2</p>
    
</body>

</html>

제목 1

제목 2

제목 3

단락 1

단락 2

 

 

태그 종류

태그 설명
<!-- --> 주석 정의
<!DOCTYPE> 해당 문서의 타입 정의
<a> 다른 콘텐츠와 연결되는 하이퍼링크 정의
<abbr> 축약형이나 머리글자로만 된 단어를 정의
<acronym> 머리글자로만 된 단어를 정의
HTML5에서는 지원 X -> <abbr> 요소 사용
<address> 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시
<applet> 문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램) 정의
HTML5에서 지원 X -> 대신 <embed> 요소 & <object> 요소 사용
<area> 이미지 맵에서 하이퍼링크가 연결된 영역을 정의
<article> 해당 문서나 페이지 or 사이트와는 완전히 독립적으로 구성할 수 있는 요소 정의
<aside> 페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있음
but, 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역 정의
<audio> 음악, 오디오 스트림과 같은 사우드 정의
<base> 해당 문서의 모든 상대 주소(relative URL)에 대한 기본 URL과 target 속성값을 정의
<basefont> 해당 문서의 모든 텍스트에 대한 색상, 크기 및 폰트의 기본값을 정의
HTML5에서 지원 X, 대신 CSS 사용
<bdi> 주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의
<bdo> 자식 요소의 텍스트 방향성을 정의
<big> 글자 크기가 큰 텍스트를 정의
HTML5에서 지원 X, 대신 CSS 사용
<blockquote> 다른 출처로부터 인용된 영역 정의
<body> 해당 문서의 콘텐츠 영역 정의
<br> 행 바꿈을 정의
<button> 클릭할 수 있는 버튼 정의
<canvas> 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용
<caption> 테이블의 캡션을 정의
<center> 가운데로 정렬되는 텍스트 정의
HTML에서 지원 X, 대신 CSS 사용
<cite> 예술 작품과 같은 창작물의 제목을 정의
<code> 컴퓨터 코드의 일부분을 나타냄
<col> <colgroup> 요소에 속하는 각 열(column)의 속성을 정의
<colgroup> 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용
<data> 특정 콘텐츠에 기계가 읽을 수 있는(machine-readable) 형태의 값(Value)을 덧붙여 나타낼 때 사용
<datalist> <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의
<dd> 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명 부분을 정의
<del> 텍스트 한가운데 라인을 추가하여 문서에서 삭제된 텍스트를 표현
<details> 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항을 명시
<dfn> HTML에서 용어(term)의 정의를 나타냄
<dialog> 대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의
<dir> HTML 리스트를 정의
HTML5에서 지원 X, 대신 <ul> 요소 사용
<div> HTML 문서에서 특정 영역이나 구획을 정의
<dl> 용어와 그에 대한 설명을 리스트 형식으로 정의
<dt> 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어 부분을 정의
<em> 강조된 텍스트를 표현
<emded> 외부 애플리케이션, 대화형 콘텐츠를 포함시킬 수 있는 컨테이너 정의
<fieldset> <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용
<figcaption> <figure> 요소의 캡션을 정의
<figure> 삽화, 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의
<font> 텍스트의 폰트, 색상, 그리고 크기를 정의
HTML에서 지원 X, CSS 사용
<footer> 문서나 특정 섹션의 푸터(footer)를 정의
<form> 사용자로부터 입력 받을 수 있는 HTML 입력 폼 정의
<frame> <frameset> 요소에 포함되는 하나의 프레임을 정의
HTML5에서 지원 X
<frameset> 문서의 레이아웃을 구성하기 위해 사용되는 프레임들의 집합 정의
HTML5에서 지원 X
<h1> ~ <h6> HTML 문서에서 제목(headings)을 정의
<header> 문서나 특정 섹션의 헤더를 정의
<hr> 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선 정의
<html> HTML 문서의 루트 요소를 정의
<i> 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의
<iframe> 인라인 프레임을 정의
<img> 이미지를 정의
<input> 사용자로부터 입력을 받을 수 있는 입력 필드를 정의
<ins> 텍스트 아래쪽에 라인을 추가하여 문서에 추가된 텍스트를 표현
<kbd> 키보드 입력을 나타냄
<label> 사용자 인터페이스(UI) 요소의 라벨을 정의
<legend> <fieldset> 요소의 캡션을 정의
<li> HTML 리스트에 포함되는 아이템 정의
<link> 해당 문서와 외부 소스(external resource) 사이의 관계를 정의
<main> 해당 문서의 <body> 요소의 주 콘텐츠를 정의
<map> 클라이언트 사이드 이미지맵을 정의
<mark> 형광펜으로 칠한 것처럼 하이라이트된 텍스트를 정의
<meta> 해당 문서에 대한 정보인 메타데이터를 정의
<nav> 다른 페이지 or 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합 정의
<noframes> 프레임 기능을 사용하지 않도록 설정했거나, 프레임 기능을 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의
HTML5에서는 지원 X
<noscript> 클라이언트 사이드 스크립트를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘테츠를 정의
<object> 외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할  수 있는 임베디드 객체를 정의
<ol> 순서가 있는 HTML 리스트를 정의 
<optgroup> 옵션 메누를 제공하는 드롭다운 리스트에서 사용되는 옵션들의 그룹을 정의
<option> 옵션 메뉴를 제공하는 드롭다운 리스트에서 사용되는 하나의 옵션을 정의
<output> 스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타냄
<p> 문단(paragraph)dmf wjddml
<param> <object> 요소에 의해 호출되는 플러그인의 매개변수(parameter)를 정의
<pre> 미리 정의된 형식(performatted)의 텍스트를 정의
<progress> 작업의 진행률을 나타냄
<q> 짧은 인용구를 정의
<rp> 루비 주석을 지원하지 않는 브라우저를 위한 대체 내용을 정의
<rt> 루비 주석에서 발음이나 설명을 나타내는 윗첨자를 정의
<ruby> 해당 문자의 발음이나 설명을 작은 크기의 윗첨자를 알려주는 루비 주석(ruby annotation)을 정의
<s> 텍스트 한가운데 라인을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현
<samp> 컴퓨터 프로그램의 샘플 또는 인용 출력을 나타냄
<script> 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의
<section> HTML 문서에 포함된 독립적인 섹션을 정의
<select> 옵션 메뉴를 제공하는 드롭다운 리스트를 정의
<small> 글자 크기가 작은 텍스트를 정의
<source> <audio>, <video> 요소에서 사용할 수 있는 다중 미디어 지원을 정의
<span> HTML 문서에서 인라인 요소들을 하나로 묶을 때 사용
<strike> 텍스트 한가운데 라인을 추가할 때 사용
HTML5에서 지원 X, 대신 <del>, <s> 요소 사용
<strong> 해당 콘텐츠의 중요성, 심각함, 긴급함 강조
<style> 해당 HTML 문서의 스타일 정보 정의
<sub> 아랫첨자(subscript) 텍스트를 표현
<summary> <details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의
<sup> 윗첨자(superscript) 텍스트를 표현
<svg> SVG 그래픽을 위한 컨테이너를 정의
<table> 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의
<tbody> 테이블에서 내용 콘텐츠(body contents)들을 하나의 그룹으로 묶을 때 사용
<td> 테이블에서 하나의 셀을 정이
<template> 추가되거나 복사될 수 있는 HTML 요소들을 정의
<textarea> 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의
<tfoot> 테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용
<th> 테이블에서 제목이 되는 헤더 셀(header cell)들을 정의
<thead> 테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶을 때 사용
<time> 사람이 읽을 수 있는(human-readable)형태의 날짜와 시간 데이터를 정의
<title> 해당 문서의 제목을 정의
<tr> 테이블에서 셀들로 이루어진 하나의 행(row)을 정의
<track> <audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙을 정의
<tt> 텔레타이프 텍스트를 나타냄
HTML5에서 지원 X, 대신 CSS 사용
<u> 철자가 틀린 단어나 중국어의 고유 명사처럼 문체상 일반적인 텍스트와는 달라야만 하는 텍스트를 표현
<ul> 순서가 없는 HTML 리스트를 정의
<var> 변수를 정의
<video> 무비 클립, 비디오 스트림과 같은 비디오를 정의
<wbr> 단어 중간에서 행바꿈될 수 있는(line-break) 위치를 정의

 

 

웹브라우저와 멀티미디어

예전 방법 - HTML 안에서는 <embed>나 <object> 태그를 사용 / 웹브라우저에서는 플래시나 ActiveX를 설치

HTML5: <audio>와 <video> 태그 추가

 

 

오디오

<audio src="old_pop.mp3" autoplay controls>
  • audio - 오디오 삽입 태그
  • src="old_pop.mp3" - 오디오 소스 파일 경로(URL)
  • autoplay - 자동 재생
  • controls - 화면에 제어기를 보일 것

 

 

<audio> 요소의 속성

속성 설명
autoplay 이 속성이 존재하면 음악을 자동적으로 재성
controls 이 속성이 존재하면 브라우저가 오디오 재생을 제어하는 제어기를 표시
loop 이 속성이 존재하면 브라우저가 오디오를 반복하여 재생
preload 사용자가 사용할 생각이 없더라도 오디오를 미리 다운로드
scr 재생할 오디오가 존재하는 URL을 지정
volume 오디오의 재생 볼륨을 설정(0.0~1.0)

 

 

오디오 파일 형식

  • MP3 - 'MPEG-1 Audio Layer-3"의 약자로 MPEG 기술의 음성 압축 기술
  • Wav - 윈도우에서 사용되는 표준 사운드 포맷
  • Ogg - 특허권을 반대하고 보다 좋은 음질을 위하여 오픈소스로 개발되었음

 

ex)

<!DOCTYPE html>
<html>
<body>

  <audio src="old_pop.mp3"" autoplay controls>
    Your browser does not support the audio element.
  </audio>

</body>
</html>

 

 

 

<source> 태그 사용

모든 브라우저가 지원하는 오디어 형식은 아직까지 없음

호환성 높이기 위해 <source> 태그를 사용

<!DOCTYPE html>
<html>
<body>
 <audio controls autoplay >
 <source src="old_pop.ogg" type="audio/ogg">
 <source src="old_pop.mp3" type="audio/mp3">
 Your browser does not support the audio element.
 </audio>
</body>
</html>

 

 

 

비디오

<video scr="movie.mp4" autoplay controls>
  • video - 비디오 삽입 태그
  • scr="movie.mp4" - 비디오 소스 파일 경로(URL)
  • autoplay - 자동 재생
  • controls - 화면에 제어기를 보일 것

 

 

<video> 요소의 속성

속성 설명
autoplay 이 속성이 존재하면 비디오를 자동으로 재생
controls 이 속성이 존재하면 브라우저가 비디오 재생을 제어하는 컨트롤을 표시
loop 이 속성이 존재하면 브라우저가 비디오를 반복하여 재생
poster 비디오를 다운로드하는 중일 때 표시하는 이미지
preload 사용자가 사용할 생각이 없더라도 전체 오디오를 다운로드
muted 비디오의 오디오 출력을 중지
src 재생할 오디오가 존재하는 URL을 지정
width, height 비디오 재생기의 너비와 높이를 나타냄

 

ex)

<video controls src="movie.ogv">
Your user agent does not support the HTML5 Video element.
</video>

 

ex2)

<!DOCTYPE html>
<html>
<body>
 <video width="640" height="480" controls>
 <source src="trailer.mp4" type='video/mp4'>
 <source src="trailer.ogv" type='video/ogg'>
 <p>Your user agent does not support HTML5.</p>
 </video>
</body>
</html>

 

 

 

iframe

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My First paragraph. </p>

</body>
</html>

My First Heading

My First paragraph.

-> iframe에 의해 만들어진 윈도우

 

ex)

<!DOCTYPE html>
<html>
<body>
 <iframe src="inner.html" width="300" height="120"></iframe>
</body>
</html>
<html>
 <head>
 <title>INNER</title>
 </head>
 <body>
 <h1>이 웹페이지는 iframe 방식으로 표시됩니다.</h1>
 </body>
</html>

 

이 웹페이지는 iframe 방식으로 표시됩니다.

 

ex2)

<!DOCTYPE html>
<html>
<body>
<textarea rows="5" cols="50">
&lt;html&gt;
 &lt;body&gt;
 &lt;h1&gt;This is a header. &lt;h1&gt;
 &lt;/body&gt;
&lt;html&gt;
iframe을 이용하여서 source.html을 읽어서 여기에 표시한다.
</textarea>
<br />
<br />
<iframe src="source.html" width="420" height="80"></iframe>
</body>
</html>


 

 

<div>

<div>은 "divide"의 약자로서 페이지를 논리적인 섹션으로 분리하는데 사용되는 태그

<div style="border: 3px solid red">
 <h2>사자</h2>
 <p>사자는 아프리카에살며 ...</p>
</div>

사자

사자는 아프리카에살며 ...

 

ex)

<!DOCTYPE html>
<html>
<body>
 <div style="border: 3px solid red;">
 <h2>사자</h2>
 <p>
 사자는 아프리카에살며
 강한 다리와 턱,
 <span style="color: red;">긴 송곳니</span>를
 지니고 있다.
 </p>
 </div>
</body>
</html>

사자

사자는 아프리카에살며 강한 다리와 턱, 긴 송곳니를 지니고 있다.

 

ex2)

<!DOCTYPE html>
<html>
<body>
 <div style="height:20px; background-color:yellow"></div>
 <div style="height:20px; background-color:green"></div>
 <div style="height:20px; background-color:purple"></div>
</body>
</html>
 
 
 

 

 

HTML 입력 양식

사용자가 입력한 내용을 서버로 본래 때, 사용함

 

 

입력 양식의 작동 방식

 

 

<form> 요소

<form action="input.jsp" method="post">
	<input type="text" name="input" />
    <input type="submit">
</form>
  • <form> - 입력양식은 항상 <form>으로 시작
  • action="input.jsp" - 여기에 입력을 처리하는 서버 스크립트의 주소를 적어줌
  • method="post" - 입력 데이터가 서버로 보내지는 방법을 기술, GET과 POST 방식이 있음

 

GET & POST 방식

GET 방식 -> URL 주소 뒤에 파라미터를 붙여서 데이터 전달

 

POST 방식

사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP Request 헤더에 포함시켜서 전송하는 방식

길이 제한 X, 보안 유지

POST /test/input.jsp HTTP/1.1
Host: www.naver.com
name1=value1&name2=value2

 

 

입력 태그

<!DOCTYPE html>
<html>
<body>
 <form action="input.jsp" method="post">
 이메일 : <input type="email" name="email" /><br />
 URL : <input type="url" name="url" /><br />
 전화번호 :<input type="tel" name="tel" /><br />
 색상 : <input type="color" name="color" /><br />
 월 : <input type="month" name="month" /><br />
 날짜 : <input type="date" name="date" /><br />
 주 : <input type="month" name="week" /><br />
 시간 : <input type="time" name="time" /><br />
 지역 시간 : <input type="datetime-local" name="localdatetime" /><br />
 숫자 : <input type="number" name="number" min="1" max="10" step="2"/><br />
 범위 : <input type="range" name="range" min="1" max="10" step="2" /><br />
 <input type="submit" value="제출" />
 </form>
</body>
</html>
이메일 :
URL :
전화번호 :
색상 :
월 :
날짜 :
주 :
시간 :
지역 시간 :
숫자 :
범위 :

 

 

<input> 형식

<input type="button" value="눌러보세요!" name="button1" />

 

 

type 속성값

type 속성값 설명
text 텍스트를 입력할 수 있는 한 줄짜리 필드 생성
password 비밀번호를 입력할 수 있는 한 줄짜리 필드 생성
radio 라디오 버튼 생성
checkbox 체크 박스 생성
file 파일 이름을 입력하는 필드 생성
reset 초기화 버튼 생성, 버튼을 누르면 모든 입력 필드가 초기화
image 이미지를 전송 버튼으로 만듦
hidden 사용자에게 보이지 않지만 서버로 전송
submit 제출 버튼 생성

 

 

텍스트 필드

<form>
이름: <input type="text" name="name"><br>
학번: <input type="text" name="number" size=10>
</form>

 

이름:
학번:

 

 

패스워드 필드

<form>
패스워드: <input type="password" name="pass">
</form>
패스워드:

 

 

라디오 버튼

<form>
 성별:
 <input type="radio" name="gender" value="male">남성
 <input type="radio" name="gender" value="female">여성
</form>
성별: 남성 여성

 

 

체크박스

<form>
 과일 선택:
 <input type="checkbox" name="fruits" value="apple" checked >Apple
 <input type="checkbox" name="fruits" value="grape">Grape
 <input type="checkbox" name="fruits" value="orange">Orange
</form>
과일 선택: Apple Grape Orange

 

 

제출 버튼 & 초기화 버튼

<form name="input" action="getid.jsp" method="get">
 사용자 아이디:
 <input type="text" name="user"> <br />
 <input type="submit" value="제출">
 <input type="reset" value="초기화">
</form>
사용자 아이디:

 

 

<input> 버튼

<form name="input" action="getid.jsp" method="get">
 물품가격:
 <input type="text" name="user"> <br />
 수량:
 <input type="text" name="user"> <br />
 <input type="button" value="계산" onclick="alert('10000원입니다.')">
</form>
물품가격:
수량:

 

 

<button> 버튼

<button type="button" onclick="alert('안녕하세요?')">눌러보세요!</button>

 

 

이미지 버튼

<form name="input" action="getid.jsp" method="get">
 아이디:
 <input type="text" name="name"> <br />
 <input type="image" src="submit.png" alt="제출 버튼">
</form>
아이디:

 

 

<textarea> 요소

<form name="input" action="getfeedback.jsp" method="get">
고객의 의견<br />
<textarea name="feedback" rows="5" cols="50"></textarea>
</form>
고객의 의견

 

<form action="">
<select name="cars">
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="hyundai" selected>현대자동차</option>
<option value="kia">기아자동차</option>
</select>
</form>

 

 

<fieldset> 태그

<form>
 <fieldset>
 <legend>인적사항입력</legend>
 이름: <input type="text"><br>
 전화번호: <input type="text"><br>
 주소: <input type="text">
 </fieldset>
</form>
인적사항입력 이름:
전화번호:
주소:

 

 

<label> 태그

<form action="proc_form.jsp">
 <label for="male">남성</label>
 <input type="radio" name="gender" id="male" value="male"><br>
 <label for="female">여성</label>
 <input type="radio" name="gender" id="female" value="female"><br>
 <input type="submit" value="제출">
</form>


 

 

파일 업로드 버튼

<form enctype="multipart/form-data">
 <input type="file" accept="image/jpg,image/gif">
</form>

 

 

HTML 입력 요소

추가된 <input> type 설명
date 날짜를 입력할 수 있는 컨트롤
datetime UTC 날짜/ 시간 형식을 이용한 날짜와 시간 표시 컨트롤
datetime-local 현지 날짜/ 시간
month 월/ 연도
time 시간
week 주와 연도를 선택할 수 있는 컨트롤
color 색상 코드를 입력할 수 있는 컨트롤
email 표준 이메일 주소를 입력받아서 검증하는 컨트롤
tel 전화번호를 입력받아서 검증하는 컨트롤
search 검색어 입력 양식을 생성
range 2개의 숫자 사이의 숫자를 선택할 수 있는 슬라이더 컨트롤
number 숫자만 입력받는 컨트롤
url URL만 입력받는 컨트롤

 

 

추가된 <input>의 속성

  • autocomplete - 자동으로 입력을 완성
  • autofocus - 페이지가 로드되면 자동으로 입력 포커스를 갖음
  • placeholder - 입력 힌트를 희미하게 보여줌
  • readonly - 읽기 전용 필드
  • required - 입력 양식을 제출하기 전에 반드시 채워져 있어야 함
  • pattern - 허용하는 입력의 형태를 정규식으로 지정

ex)

<body>
 <form>
 date: <input type="date" /> <br />
 datetime: <input type="datetime" /> <br />
 datetime-local: <input type="datetime-local" /><br />
 month: <input type="month" /> <br />
 time: <input type="time" /> <br />
 week: <input type="week" /> <br />
 color: <input type="color" /> <br />
 email: <input type="email" /> <br />
 tel: <input type="tel" /> <br />
 search: <input type="search" /> <br />
 range: <input type="range" /> <br />
 number: <input type="number" /> <br />
 url: <input type="url" /> <br />
 <input type="submit" /> 
 </form>
</body>
date:
datetime:
datetime-local:
month:
time:
week:
color:
email:
tel:
search:
range:
number:
url:

 

 

정규식

  • 특정한 규칙을 가지고 있는 문자열들을 표현
  • 정규 표현식은 /과 / 내부에 위치
식 기능 설명
. 문자 한 개의 어떤 문자와도 일치
\d 숫자 한 개의 숫자와 일치
\w 문자와 숫자 한 개의 문자나 숫자와 일치
\s 공백 문자 공백, 탭, 줄 바꿈, 캐리지 리턴 문자와 일치
^ 시작 패턴의 시작을 표시
$ 끝 패턴의 끝을 표시
[ ] 문자 종류, 문자 범위 [abc]는 a 또는 b 또는 c를 나타냄
[a-z]는 a부터 z까지 중의 하나, 
[1-9]는 1부터 9까지 중의 하나

 

 

수량한정자

수량 한정자 기능 설명
() 문자를 그룹핑 "abc|adc"와 "a(b|d)c"는 같은 의미
* 0회 이상 반복 "a*b"는 "b", "ab", "aab", "aaab"를 나타냄
+ 1회 이상 "a+b"는 "ab", "aab", "aaab"를 나타내지만 "b"는 포함 X
? 0 또는 1회 "a?b"는 "b", "ab"를 나타냄
{m} m회 "a{3}b"는 "aaab"와 매칭

이메일을 검사하는 정규식

-> /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

 

 

이메일 입력

 이메일: <input type="email" name="email" required><br>
이메일:

 

 

숫자 입력

신발사이즈 <input type="number" min="230" max="290" step="10"
value="260" name="shoesize">
신발사이즈

 

 

range 입력

테니스 스킬 <input type="range" min="1" max="10" value="1">
테니스 스킬

 

 

날짜 입력

date - 날짜 입력

month - 월 입력

week - 주 입력

time - 시간 입력

datetime - 날짜와 시간을 입력할 수 있는 양식 제공, 국제 표준 시간대

datetime-local - 날짜와 시간을 입력할 수 있는 양식 제공, 지역 표준 시간대

생일 <input type="date" name=“dob”>
생일

 

 

색상 입력

색상선택: <input type="color" name="color"/>
색상선택:

 

ex) 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>이메일 전송화면</title>
</head>
<body>
    <h2>이메일 전송화면</h2>
    <form>
        <label for="name">이름:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">이메일 주소:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="message">내용:</label><br>
        <textarea id="message" name="message" rows="5" cols="40"></textarea><br><br>

        <input type="submit" value="Send">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

 

이메일 전송화면








 

 

 

 

'Web > 웹프로그래밍응용' 카테고리의 다른 글

CSS & HTML  (1) 2025.04.13
'Web/웹프로그래밍응용' Related Articles more