HTML BUTTON tag : 버튼 태그 사용법 - 버튼 만들기와 꾸미기 - 글자 폰트 테두리 색상 여백 스타일
블로그나 웹페이지에 잘 어울리는 예쁜 버튼을 만들어 다는 것은 그리 쉬운 일이 아닌 것 같습니다. 그림 이미지나 아이콘을 만들어 멋있게 만들 수 있지만, 경우에 따라서는 버튼 이미지가 표시되지 않아 보기가 좋지 못한 경우도 볼 수 있습니다.
HTML의 버튼 태그 <button>를 사용하면, 손쉽게 만들 수 있고, 표시되지 않는 문제도 없으니 좋은 것 같습니다. DIV 태그나 SPAN 태그와 A 링크 태그를 사용하여 만들어도 되지만, 자체로서 버튼의 기능을 가진 Button 태그가 편한 것 같습니다. 아래는 버튼 태그를 사용하여 만든 몇 가지 예입니다.
참고: HTML A tag: 글자(텍스트)로 버튼 만들기: DIV, SPAN
1. 버튼 만들기
[버튼 태그 기본 모양]
버튼 태그에서 버튼의 크기는 기본적으로 버튼안에 들어 가는 글자나 그림의 크기에 따라 자동으로 조절이 됩니다.
[홈(Home)으로 가기]
[이전 페이지로 가기 : 브라우저의 이전 페이지로 가기 기능 Go back]
[뒤쪽 페이지로 가기 : 브라우저의 뒤쪽 페이지로 가기 Go forward]
[현재 페이지에서 맨 위로 가기]
[특정한 페이지로 가기]
[안내 말 띄우기]
[폼 만들기]
[버튼을 페이지 폭 전체 크기로 만들기]
2. 버튼 태그 <button> 꾸미기
페이지에 여러개의 버튼을 두고, 동일한 속성으로 꾸미려면 클래스(class)로 지정하면 편할 것입니다. 그렇지 않고 버튼이 하나이거나, 여러개이지만 각각 속성을 달리 하려면, <button> 태그 안에 스타일(style) 속성을 주어 꾸미면 되겠습니다.
[버튼 태그에 직접 스타일 속성 주기 기본 모양]
[버턴 태그에 직접 속성을 준 예 1]
[버턴 태그에 직접 속성을 준 예 2]
[버턴 태그에 직접 속성을 준 예 3 : 버튼을 가로 가운데 두기]
[버턴 태그에 직접 속성을 준 예 3 : 버튼을 가로 오른쪽에 두기]
버튼을 위치시킬 때, 줄바꿈이 일어나지 않게 하려면, 위와 같이 줄바꿈이 일어나지 않는 <span>태그를 사용하면 되고, 줄을 바꾸어 영역을 설정하고, 그 영역 안에 버튼을 위치 시키려면, <div> 태그를 사용하면 됩니다.
[버튼 태그를 <div> 영역에 넣고, 위치를 지정한 태그 기본 모양]
ㅇ 버튼을 <div> 영역의 오른쪽에 위치시키려면, <div align="right">
ㅇ 버튼을 감싸고 있는 <div> 영역에 여백, 색상 등의 속성을 주려면, 아래와 같이 스타일(style)을 지정해 주면 됩니다.
<div align="center" style="border:1px solid red">
참고:
HTML DIV tag: 좌우정렬하기 ALIGN : left, center, right
HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법
HTML DIV tag: 영역내 글자(폰트) 종류, 크기, 색상, 굵기, 줄간격 등을 설정하는 방법
버튼이 여러개 일 경우에 일괄적으로 동일한 속성을 주려면, 아래와 같이 클래스(class)를 지정하여 주면 편리합니다.
[버튼 태그에 클래스(class)를 지정한 태그 기본 모양]
[버튼에 스타일 속성을 일괄 적용하기 위한 클래스(class) 예]
[ <Button> 태그를 <A> 링크 태그 안에 넣은 예제]
위의 예제들과는 달리, <button> 태그를 <A>태그 안에 넣은 경우입니다. 대체로는 위의 예제들과 같이 하면, 잘 작동을 하지만, 어떤 특수한 조건에 닿으면, 제대로 작동하지 않는 경우가 있습니다. 이럴 때에는, 이 예제와 같이 하면 해결이 될 수 있습니다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
HTML의 버튼 태그 <button>를 사용하면, 손쉽게 만들 수 있고, 표시되지 않는 문제도 없으니 좋은 것 같습니다. DIV 태그나 SPAN 태그와 A 링크 태그를 사용하여 만들어도 되지만, 자체로서 버튼의 기능을 가진 Button 태그가 편한 것 같습니다. 아래는 버튼 태그를 사용하여 만든 몇 가지 예입니다.
참고: HTML A tag: 글자(텍스트)로 버튼 만들기: DIV, SPAN
1. 버튼 만들기
[버튼 태그 기본 모양]
<button> .... </button>
버튼 태그에서 버튼의 크기는 기본적으로 버튼안에 들어 가는 글자나 그림의 크기에 따라 자동으로 조절이 됩니다.
[홈(Home)으로 가기]
<button onclick="window.location.href='https://ojji.wayful.com'">HOME</button>
실제 적용한 모양[이전 페이지로 가기 : 브라우저의 이전 페이지로 가기 기능 Go back]
<button onclick="goBack()">앞쪽 페이지로</button>
<script>
function goBack() {
window.history.back();
}
</script>
실제 적용한 모양 <script>
function goBack() {
window.history.back();
}
</script>
[뒤쪽 페이지로 가기 : 브라우저의 뒤쪽 페이지로 가기 Go forward]
<button onclick="goForward()">뒤쪽 페이지로</button>
<script>
function goForward() {
window.history.forward();
}
</script>
실제 적용한 모양<script>
function goForward() {
window.history.forward();
}
</script>
[현재 페이지에서 맨 위로 가기]
<button onclick="window.location.href='#top'">위로가기</button>
실제 적용한 모양[특정한 페이지로 가기]
<button onclick="window.location.href='https://ojji.wayful.com/2017/03/CIA-documents-hacking-of-smart-phones-routers-computers-televisions.html'">CIA 무차별 해킹</button>
실제 적용한 모양[안내 말 띄우기]
<button type="button" onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
실제 적용한 모양[폼 만들기]
<form action="/action_page.php" method="get">
이름: <input type="text" name="ireum"><br>
주소: <input type="text" name="juso"><br>
<button type="submit">보내기</button>
<button type="submit" formtarget="_blank">새 창에서 열기</button>
</form>
실제 적용한 모양 : 이 예제는 <button> 태그를 <form> 태그에서 사용하는 예를 보인 것으로, 폼의 데이타를 받는 서버가 설정되지 않았으므로, 제대로 작동하지 않습니다.이름: <input type="text" name="ireum"><br>
주소: <input type="text" name="juso"><br>
<button type="submit">보내기</button>
<button type="submit" formtarget="_blank">새 창에서 열기</button>
</form>
[버튼을 페이지 폭 전체 크기로 만들기]
<button type="button" style="display:block; width:100%; text-align:center; font-size:1em; padding:2px;" onclick="history.go(0)">새로고침 >></button>
실제 적용한 모양 : 이 예제는 버튼을 페이지 가로폭 전체 크기로 만든 예를 보인 것입니다. 버튼의 속성은 아래쪽 예제를 참고하여 알맞게 적용하면 됩니다.2. 버튼 태그 <button> 꾸미기
페이지에 여러개의 버튼을 두고, 동일한 속성으로 꾸미려면 클래스(class)로 지정하면 편할 것입니다. 그렇지 않고 버튼이 하나이거나, 여러개이지만 각각 속성을 달리 하려면, <button> 태그 안에 스타일(style) 속성을 주어 꾸미면 되겠습니다.
[버튼 태그에 직접 스타일 속성 주기 기본 모양]
<button style="color: gold"> ...</button>
[버턴 태그에 직접 속성을 준 예 1]
<button
type="button"
style="color: gold; background:black; font-size:2em;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
실제 적용한 모양type="button"
style="color: gold; background:black; font-size:2em;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
[버턴 태그에 직접 속성을 준 예 2]
<button
type="button"
style="color: #fff; background:blue; font-size:2em; border-radius:0.5em; padding:5px 20px;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
실제 적용한 모양type="button"
style="color: #fff; background:blue; font-size:2em; border-radius:0.5em; padding:5px 20px;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
[버턴 태그에 직접 속성을 준 예 3 : 버튼을 가로 가운데 두기]
<center>
<button
type="button"
style="color: #fff; background:blue; font-size:2em; border-radius:0.5em; padding:5px 20px;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
</center>
실제 적용한 모양<button
type="button"
style="color: #fff; background:blue; font-size:2em; border-radius:0.5em; padding:5px 20px;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
</center>
[버턴 태그에 직접 속성을 준 예 3 : 버튼을 가로 오른쪽에 두기]
<span style="float:right;">
<button
type="button"
style="color: #fff; background:blue; font-size:2em; border-radius:0.5em; padding:5px 20px;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
</span>
실제 적용한 모양<button
type="button"
style="color: #fff; background:blue; font-size:2em; border-radius:0.5em; padding:5px 20px;"
onclick="alert('이 버튼은 도움말 띄우기 예제 입니다')">도움말</button>
</span>
버튼을 위치시킬 때, 줄바꿈이 일어나지 않게 하려면, 위와 같이 줄바꿈이 일어나지 않는 <span>태그를 사용하면 되고, 줄을 바꾸어 영역을 설정하고, 그 영역 안에 버튼을 위치 시키려면, <div> 태그를 사용하면 됩니다.
[버튼 태그를 <div> 영역에 넣고, 위치를 지정한 태그 기본 모양]
<div align="center">
<button> ... </button>
</div>
<button> ... </button>
</div>
ㅇ 버튼을 <div> 영역의 오른쪽에 위치시키려면, <div align="right">
ㅇ 버튼을 감싸고 있는 <div> 영역에 여백, 색상 등의 속성을 주려면, 아래와 같이 스타일(style)을 지정해 주면 됩니다.
<div align="center" style="border:1px solid red">
참고:
HTML DIV tag: 좌우정렬하기 ALIGN : left, center, right
HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법
HTML DIV tag: 영역내 글자(폰트) 종류, 크기, 색상, 굵기, 줄간격 등을 설정하는 방법
버튼이 여러개 일 경우에 일괄적으로 동일한 속성을 주려면, 아래와 같이 클래스(class)를 지정하여 주면 편리합니다.
[버튼 태그에 클래스(class)를 지정한 태그 기본 모양]
<button class="buttons"> ... </button>
[버튼에 스타일 속성을 일괄 적용하기 위한 클래스(class) 예]
<style>
.buttons {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
.buttons {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
[ <Button> 태그를 <A> 링크 태그 안에 넣은 예제]
<a
href="https://ojji.wayful.com/" target="_blank" >
<button type="button">HOME</button>
</a>
<button type="button">HOME</button>
</a>
위의 예제들과는 달리, <button> 태그를 <A>태그 안에 넣은 경우입니다. 대체로는 위의 예제들과 같이 하면, 잘 작동을 하지만, 어떤 특수한 조건에 닿으면, 제대로 작동하지 않는 경우가 있습니다. 이럴 때에는, 이 예제와 같이 하면 해결이 될 수 있습니다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...