Everything has an expiration date
HTML 20231128 [프로그램 소스] - Test015, Test016, Test017, Test018 본문
[HTML]/Program source (HTML)
HTML 20231128 [프로그램 소스] - Test015, Test016, Test017, Test018
Jelly-fish 2023. 11. 28. 15:01
WebApp01
Test015.html
Test015.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test015.html</title>
</head>
<body>
<div>
<h1>움직이는 태그 실습</h1>
<hr>
</div>
<!-- 그냥 알고만 있자~! -->
<div>
<marquee>기본적인 방향 왼쪽으로 이동</marquee>
<marquee behavior="alternate">좌우 왕복 이동</marquee>
<marquee direction="right">오른쪽으로 이동</marquee>
<marquee direction="up">위쪽으로 이동</marquee>
</div>
<br><br>
<div>
<h2>속도 조절 : scrollamount</h2>
<marquee behavior="alternate" scrollamount="1">
<img alt="" src="images/img_04.gif">
</marquee>
<marquee behavior="alternate" scrollamount="100">
<img alt="" src="images/img_04.gif">
</marquee>
<marquee behavior="alternate" scrollamount="50" bgcolor="pink">
<img alt="" src="images/img_04.gif">
</marquee>
</div>
<br><br>
<div>
<h2>속도 조절 : scrolldelay</h2>
<manequee behavior="alternate" scrolldelay="1">
<img alt="" src="images/img_04.gif">
</manequee>
<manequee behavior="alternate" scrolldelay="100">
<img alt="" src="images/img_04.gif">
</manequee>
<manequee behavior="alternate" scrolldelay="50" bgcolor="pink">
<img alt="" src="images/img_04.gif">
</manequee>
</div>
<br><br>
<div>
<h2>위아래로 움직이며 옆으로 이동</h2>
<marquee>
<marquee direction="down" behavior="alternate" height="100">
우리 모두 기운냅시다~!!!
</marquee>
</marquee>
</div>
</body>
</html>
Test016.html
Test016.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test016.html</title>
<!-- <meta> 문서의 정보를 구성하는 것이 무엇인지 작성해 두는 것.
<mata> : 데이터에 대한 데이터. 데이터를 수식하는 데이터를 의미한다 -->
<meta name="keywords" content="html, 연습, 웹, 예제, 태그, 속성">
<mata name="description" content="html 연습 페이지입니다.">
<meta name="author" content="kimjimin">
<meta name="generator" content="eclips">
<!-- url 사이트로 refresh 시켜.
그런데 5; → 5초의 간격을 두고 새로고침! -->
<meta http-equiv="refresh" content="5; url=http://www.naver.com">
</head>
<body>
<div>
<h1>메타 태그 실습</h1>
<hr>
</div>
하나~ 두울~ 세엣~ 네엣~ 짠~!!!
</body>
</html>
Test017.html
Test017.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test017.html</title>
</head>
<body>
<div>
<h1>한 줄 데이터 입력 상자 / 암호 입력 상자</h1>
<hr>
</div>
<!-- maxlength : 최대로 입력 가능한 글자수 제약. -->
<div>
<form>
회원아이디
<input type="text" name="name" size="20"
maxlength="12" placeholder="아이디"><br>
패스워드
<input type="password" name="pwd" size="10"
maxlength="8" placeholder="8~12 글자"><br>
</form>
</div>
<br><br>
<!-- maxlength 활용 -->
<div>
<form>
휴대폰 번호
<input type="text" name="phone1" size="5" maxlength="3"> -
<input type="text" name="phone2" size="6" maxlength="4"> -
<input type="text" name="phone3" size="6" maxlength="4">
</form>
</div>
</body>
</html>
Test018.html
Test018.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018.html</title>
</head>
<body>
<div>
<h1>여러 줄 데이터 입력 글상자</h1>
<hr>
</div>
<!--
많은 내용을 기재할 수 있는 엘리먼트로
태그 사이의 공백 문자 인식
엔터키 입력을 통한 개행 처리
-->
<!--
<textarea></textarea> 내부에서는 개행 : (\n)
사이에 작성하는 모든 텍스트가 브라우저에 반영된다.
<textarea rows="10" cols="50">
많은 내용을 기재
</textarea>
-->
<div>
<form>
<textarea rows="10" cols="50">많은 내용을 기재할 수 있는 엘리먼트,
태그와 태그 사이의 공백 문자 인식한다.
엔터키 입력을 통한 개행(\n) 반영된다.</textarea>
</form>
</div>
<br><br>
<div>
<form>
<input type="text" value="입력 내용">
</form>
</div>
</body>
</html>
'[HTML] > Program source (HTML)' 카테고리의 다른 글
| HTML 20231128 [프로그램 소스] - Test023 (1) | 2023.11.28 |
|---|---|
| HTML 20231128 [프로그램 소스] - Test019, Test020, Test021, Test022 (0) | 2023.11.28 |
| HTML 20231128 [태그 정리] ① (2) | 2023.11.28 |
| HTML 20231128 [프로그램 소스] - Test014 (0) | 2023.11.28 |
| HTML 20231128 [프로그램 소스] - Test012, Test013 (0) | 2023.11.28 |
'[HTML]/Program source (HTML)' Related Articles
more
