#3 HTML 기초 - 버튼 태그를 이용해서 버튼 만들기

버튼을 사용하면, 프로그램은 사용자의 행동을 인식하여 웹페이지를 바꿉니다. 예를 들어서, Next 버튼을 누르면 사진이 바뀌게끔 코드를 실행할 수도 있습니다.

 

사진이 바뀌게끔 하는 코드는 나중에 자세히 배우도록 하고 지금은 button에만 초점을 맞춰 배워봅시다.

 

사용자가 클릭할 수 있는 버튼을 만들기 위해서는 button 태그를 이용하면 됩니다. <button>을 써준 후 </button>을 써서 닫아줍니다.

 

위의 사진처럼 작성하면 그림과 같은 결과물이 나옵니다. <button>과 </button> 사이에 쓴 글이 출력되는 것을 볼 수 있습니다.

 

<button> login </button>이라고 한 번 작성해 봅시다.

login이라고 써진 버튼이 생성된 것을 볼 수 있습니다.

 

button 안에 다른 요소들도 넣을 수 있습니다.

<button>

    <strong>continue anyway</strong>

</button>

과 같이 코드를 작성해 봅시다.

 

버튼 안에 있는 글씨가 진하게 표시된 것을 확인할 수 있습니다.

 

버튼 태그들을 여러개 적어봅시다.

<button>First</button>

<button>Second</button>

<button>Third</button>

 

결과는 한 줄로 버튼 3개가 나열되서 나옵니다.

 

만약 다음 줄로 버튼을 내리고 싶다면 <br> 태그를 이용하시면 됩니다.

<button>Login</button>

<br>

<button>Sign up</button>

 

이렇게 <br> 태그를 이용하면 다음 줄에 버튼이 보이는 것을 확인할 수 있습니다.

 

참고-Mimo 어플