본문 바로가기
코딩

html_input_button과 <button>

by 행운월드 2020. 11. 18.
반응형

 

 

이번 포스팅은 input태그의 타입중에 하나인 button과, 독립적인 태그로 쓰이고 있는 <button>에 관한 내용입니다.

 

 

● input태그의 타입 button과 <button>은, 각각 어디에 사용되는가?

 

input태그는 html태그들 중에서, 사용자로부터 어떠한 정보를 입력받고, 웹상에서 실행을 유도하는 기능을 담고 있는 태그입니다. input태그의 다양한 타입을 표현하는 방법은 <input type="button">처럼, type를 써서 표현합니다.

 

● input태그의 타입 button과 <button>은, html에서 어떻게 표현하는가?

 

<input type="button">만으로는 브라우저상에 버튼모양만 생성되기 때문에, 사용자에게 텍스트를 보여주기 위해서는, value=""요소를 추가합니다.

 

 

아래의 코드를 보아주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>input_button과 <button></title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px; padding: 0; }
  </style>
</head>
<body>

<h3>input_button</h3>

<input type="button" value="클릭">

</body>
</html>

 

위의 코드가 적용된 화면은 아래의 이미지와 동일하게 나타납니다.

 

버튼에 링크태그를 넣으면, 입력 url로 이동할 수 있습니다.

아래의 코드를 보아주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>input_button과 <button></title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px; padding: 0; }
  </style>
</head>
<body>

<h3>input_button</h3>

<a href="https://hhwd.tistory.com/" target="_blank">
<input type="button" value="클릭">
</a>

</body>
</html>

위의 코드를 보시면, <input>태그를 감싸는 <a>태그를 확인할 수 있습니다. 위의 코드가 표현된 화면은 아래의 이미지와 같습니다.

링크태그를 사용했을때와, 사용하지 않았을때의 차이는 css를 사용하면 더 확연하게 표현할 수 있습니다.

 

그럼, <button>은 html태그에서 어떻게 표현하는지 알아보겠습니다.

아래의 태그를 보아주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>input_button과 <button></title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px; padding: 0; }
  </style>
</head>
<body>

<h3>button</h3>

<a href="https://hhwd.tistory.com/" target="_blank">
<button> 버튼 클릭 </button>
</a>

</body>
</html>

위의 태그로 표현된 화면은 아래와 같이 나타납니다.

보시면, input type의 button과 화면상으로는 전혀 차이점이 없다는 것을 확인할 수 있습니다.

input button과는 다르게, <button>은 여는태그와 닫는 태그가 필요합니다.

 

 

그리고, 태그사이에 버튼에 표현될 텍스트를 코딩해 주어야 화면에 제대로 보여집니다.

<a>태그를 사용한, 링크걸기도 <button>태그를 감싸는 방식으로 사용하면, input button과 동일하게 작동합니다.

 

● input태그의 타입 button과 <button>의 차이점은 무엇인가?

 

input태그 type의 button과, html태그상의 독립적인 태그로써의 <button>태그의 차이점은, <button>태그가 좀 더 현대화된 태그라는 점입니다.

 

그 이유는 input button은 input의 타입중에 하나인 버튼이고, 모바일시대의 코드상으로 볼때 버튼이라는 기능을 가진 태그로 단번에 알아보기 힘들다는 점입니다. 코딩하는 사람들은 코드상으로 어느정도 화면의 상태를 유추할수 있어야 하고, 코드를 읽을 줄 알아야 하는데, 그런점에 있어서 <button>태그에 비해서 한단계를 더 거쳐야 한다는 점이 단점으로 작용합니다.

 

반면에 <button>태그는 직관적인 태그로써의 버튼이기때문에, 버튼을 표현한는것에 있어서, 모바일시대에는 더많이 사용되고 있습니다.

 

여러분들이 보시기에는 둘중에 어떤 방식이 버튼을 표현하기에, 직관적이으로 보이나요?

<a href="https://hhwd.tistory.com/" target="_blank"> <input type="button" value="클릭"> </a>

<a href="https://hhwd.tistory.com/" target="_blank"> <button> 버튼 클릭 </button> </a>

 

● input태그의 타입 button과 <button>에 스타일(css) 적용해 보기.

 

위의 태그들은 화면상으로 볼때, 스타일이 전혀 적용되어진 상태가 아닙니다. 그런데, 좀 더 다양하고 동적이고 예쁜 화면을 표현하기 위해서는 필수불가결하게 css를 적용해야 합니다.

 

 

아래의 코드를 보아주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>input_button과 <button></title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px; padding: 0; }
  button,input {color:red; background:pink; border: 0; padding: 20px 50px; font-size: 20px; font-weight:bold;
    text-align: center; border-radius: 10px; cursor:pointer;}
  button:hover,input:hover {background:yellow;color:black;}
    
  .bt2t {margin-top:40px;}
  </style>
</head>
<body>

<h3>input_button</h3>
<a href="https://hhwd.tistory.com/" target="_blank">
<input type="button" value="클릭">
</a>


<h3 class="bt2t">button</h3>
<a href="https://hhwd.tistory.com/" target="_blank">
<button> 버튼 클릭 </button>
</a>

</body>
</html>

 

보더값을 0으로 하면서 모서리를 둥글게 하고, button에 padding을 주고, text에도 굵기와 색상을 주고, 버튼에 오버하는 동작을 했을때의 마우스효과를 적용하고, 링크태그가 적용된 태그의 hover효과도 주었습니다. 코딩할때 참고해 보세요.

 

위의 코드가 표현된 화면은 아래의 링크를 클릭해서, 확인해 주세요.

 

button스타일 적용화면 확인하기 ▶

 

input_button과

 

 

hhgongjang.cafe24.com

 

저작자표시

'코딩' 카테고리의 다른 글

스크래치_피아노(pc버전)_건반음악  (0) 2020.12.01
스크래치_피아노(모바일)  (0) 2020.11.25
html_iframe 활용하기(파일 인크루드 include)  (0) 2020.11.11
html_iframe  (0) 2020.11.04
html_span 태그  (0) 2020.10.28

관련글



티스토리툴바