Part 6-2-7. 웹 기초 : HTML #5

 

 

🌐 웹 기초

 

 지난 시간에는 HTML의 DOCTYPE, HTML, BODY, HEAD 등 파일 구조 태그에 대해서 학습하였다. 이번 시간에는 HTML의 UI 요소인 Button과 Input 태그들에 대해서 배워보도록 하자.

 

---

 

🚂 Tag

 

 이전 시간과 마찬가지로 HTML의 태그를 학습하기 전에 앞서, HTML의 태그를 한눈에 볼 수 있도록 정리한 사이트 https://www.w3schools.com/tags/tag_comment.asp를 통해 태그를 확인하고 이를 실습한다.

 

---

 

Button

 

<!--
<button> onclick을 통해 클릭할 때 동작할 이벤트를 정의할 수 있다.
다만, 해당 영역에 자바 스크립트를 넣어서 함수를 통해 동작하도록 설정할 수 있다.
또한 버튼과 input의 차이점은 버튼 내부에는 <i>, <strong>과 같은 태그들을 사용할 수 있지만, input에서는 이러한 것들의 사용이 불가능하다.
 -->
 

<!-- 방법 1 -->
<button type="button">Click Me!</button>

<!-- 방법 2 -->
<button type="button" onclick="testFunc()">Click Me!</button>
<script>
function testFunc()
{
  alert('Hello World!')
}
</script>

<!-- 방법 3 -->
<button type="button" onclick="testFunc()">
  <img src="img_girl.jpg" alt="Girl in a jacket" width="50" height="60">
</button>

 

Input

 

 <!--
<input> 여러가지 label과 input을 하나로 그루핑해서 하나의 큰 폼(form)으로 관리한다.
보다 자세한 내용은 w3를 참조한다. 

https://www.w3schools.com/tags/tag_input.asp

-->