[HTML] 입력칸 안내 문구 / 엔터로 submit 하기 / 새로고침 버튼 / <footer> / <canvas>

 

 

 

input에 안내문구 넣기

placeholder : 텍스트 입력 칸에 안내 문구를 넣어 입력에 도움을 준다.

<input type="text" name="tel" placeholder="Your phone number.">

 

 

 

 

엔터로 submit 하기

<input type="text" onkeydown="javascript: if(event.keyCode == 13) searchList();">

• 이벤트 키 값이 13이면 searchList() 함수 실행 (엔터 키의 값은 13)
• 폼 안에 text 박스가 1개일 때만 가능

 

 

 

페이지를 새로고침하는 버튼 만들기

• a 태그의 링크를 window.location.reload()로 설정하기

<button>
	<a onClick="window.location.reload()" style="cursor: pointer;">새로고침</a>
</button>

 

 

 

 

 

 

<footer> 태그

웹 페이지 하단의 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타내는 영역

<footer role="contentinfo">
    <address>
        © 2023 웹 페이지 제작자
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>

• role 속성의 값은 contentinfo
  * role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공하는 도구

 

 

 

 

 

<canvas> 태그

• width과 height 속성을 지정하지 않으면 처음 너비는 300px, 높이는 150px로 자동 설정

 

.getContext("2d")

: canvas의 드로잉 컨텍스트(=연필)를 반환

var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

• 인자로 “2d”를 넘기고 반환값으로 canvasRenderingContext2D를 받는다.

 

<canvas> 지원 여부 검사

• getContext() 메소드의 존재 여부를 테스트

var canvas = document.getElementById("tutorial");

if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  // drawing code here
} else {
  // canvas-unsupported code here
}

 

 

 

 

---

 

참고

 

[HTML]input에 안내문구 넣기 Placeholder속성 사용하기

 

엔터로 submit 시키기

 

[HTML] 페이지 새로고침 버튼(태그) 만들기

 

 

HTML <footer> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디