HTML에서 버튼 색상 변경하는 방법

PDF 다운로드

이 글은 HTML에서 버튼 색상을 변경하는 방법에 대해 설명한다. HTML만으로 버튼 색상을 변경하거나 HTML5의 CSS (Cascading Style Sheets) 를 사용하여 변경할 수 있다.

방법 1

방법 1 의 2:

HTML 사용하기

PDF 다운로드

HTML 코드의 버튼 태그의 시작부분이다. HTML 의 본문 내용이 <body> , </body> 태그 사이에 들어간다. body 부분은 HTML를 사용한 웹 페이지 요소들이 보이는 부분이다.
이를 입력하면 버튼 태그에 스타일 요소를 입력한다는 것을 가리킨다. 모든 스타일 요소는 "=" 기호 다음에 입력한다.
HTML 버튼 태그안에 모든 스타일 요소는 쌍 따옴표 안에 들어가야 한다.
이 요소는 버튼의 배경 색상을 변경하는데 사용된다.
5
다음에 색상명 또는 16진법 코드를 입력한다. 색상명(예: blue) 또는 16진법 색상코드를 입력한다.
- 16진법 코드를 찾으려면 웹 브라우저에서 https://www.google.com/search?q=color+picker 로 이동한다. 하단의 슬라이더바를 사용하여 색상을 고른다. 윈도우의 원을 사용하여 색상 틴트를 선택한다. 사이드바 왼쪽에 6자리 코드를 하이라이트로 표시하여 복사하고(# 표시까지 포함)버튼 태그에 붙여넣기 한다.
- 배경 색상에 "transparent" 를 사용할 수도 있다.^{[1]X출처 검색하기}
세미콜론을 사용하면 HTML 버튼 태그의 다른 스타일 요소와 분리할 수 있다.
를 입력한다. 이 요소는 버튼 테두리의 색상을 정하는데 사용한다. "style=" 다음에 쌍 따옴표 안에 스타일 요소를 순서에 상관없이 쓸 수 있다. 각 요소는 세미콜론(;)으로 구분되어야 한다.
8
색상명 또는 16진법 코드를 테두리 색상에 사용한다. "border-color:" 다음에 색상명 또는 16진법 코드를 입력하면 된다.
- 테두리를 제거하고 싶다면 "border-color:" 대신에 border:none 를 입력한다.
세미콜론을 사용하여 HTML 버튼 태그 안에 있는 다른 스타일 요소와 구분할 수 있다.
를 입력한다. 이 요소는 버튼의 텍스트 색상을 변경하는데 사용된다. "style=" 다음의 쌍 따옴표 안에 원하는 요소를 원하는 순서대로 입력할 수 있다. 각 요소는 세미콜론(;)으로 구분해야 한다.
"color:" 다음에 입력하면 된다. 이는 버튼의 텍스트 색상을 결정한다.
모든 스타일 요소는 버튼 태그 안의 "style=" 이후에 쌍 따옴표 안에 입력해야 한다. 스타일 요소를 모두 추가했다면 끝에 쌍 따옴표(")를 입력하여 스타일 요소를 닫아준다.
이렇게 입력하면 버튼 태그를 닫아준다.
버튼 태그를 만들기 위한 여는 태그를 입력한 다음, 버튼에 들어갈 텍스트를 입력한다.
15
버튼 텍스트 다음에 </button> 를 입력한다. 그러면 버튼 태그가 완전히 닫힌다. 버튼이 만들어졌다. HTML 코드가 다음과 같이 만들어질 것이다.
```
<!DOCTYPE html><html><body><button style="background-color:red; border-color:blue; color:white">Button Text</button></body></html>
```
광고

방법 2

방법 2 의 2:

CSS 사용하기

PDF 다운로드

그러면 HTML 문서에 head 가 만들어진다. 문서 head에는 웹 페이지에 보이지 않는 정보가 들어간다. 메타 데이터, 페이지 제목, 스타일 시트 등이 들어간다.
2
<style>을 입력한다. 이는 웹 페이지에 CSS 를 입력할 수 있게 해준다. 이 부분은 HTML 문서 head 안에 입력한다.
- 어떤 HTML 문서는 외부 스타일 시트를 사용한다. 이 경우, 외부 CSS 파일 위치를 찾아서 해당 문서에서 버튼 스타일을 편집한다.
3
style 다음에 .button { 을 다른줄에 입력한다. 그러면 버튼을 꾸밀 스타일 시트가 열린다. ^{[2]X출처 검색하기}
- 여는 태그로 .button:hover { 를 입력하면 마우스 커서를 해당 위치에 올려놓았을 때 버튼 색상이 바뀌게 할 수도 있다.
background-color:를 입력한다. 버튼 스타일 시트에 다른 줄에 입력한다. 이 요소는 버튼 배경색을 정해준다.
5
색상명 또는 16진법 코드를 입력하고 세미콜론(;)을 찍는다. 버튼 스타일 시트에서 "background-color:" 이후에 입력해야 한다. 그러면 버튼 배경색이 정해진다.
- 16진법 코드를 찾으려면 웹 브라우저에서 https://www.google.com/search?q=color+picker 로 이동한다. 하단의 슬라이더바를 이용해서 색상을 고른다. 창에 뜨는 원을 이용하여 색상을 선택한다. 사이드바 왼쪽에 6자리코드를 드래그하여 복사한다(#포함).
- 배경색을 안보이게 하려면 "transparent"를 입력할 수도 있다.
border-color:를 입력한다. 이는 버튼 테두리 색상을 정해준다. 스타일 시트에서 다른 줄에 입력한다.
7
색상명 또는 16진법 코드를 입력하고 세미콜론(;)을 찍는다. 버튼 테두리 색상을 정할 수 있다. "border-color:" 요소 다음에 입력하면 된다.
- 테두리를 제거하고 싶다면, "border-color:colorname"대신에 border:none; 를 입력한다.
color:를 입력한다. 스타일 시트에서 다음 줄에 입력한다. 이 요소는 버튼의 텍스트 색상을 정해준다.
버튼 안의 텍스트 색상을 정해준다. "color:" 다음에 적으면 된다.
버튼 스타일 시트를 닫는 태그다. 버튼에 다른 이름을 따로 줘서 여러가지 버튼 스타일 시트를 만들 수 있다.
스타일 시트를 다 만들었다면, 다음 줄에 "</style>" 를 입력하여 HTML 문서의 style 을 닫아준다.
</head>를 입력한다. 그러면 HTML 문서의 head 를 닫을 수 있다.
13
HTML 문서의 body 안에 <a href="url" class="button">button text</a> 를 입력한다. 그러면 버튼 HTML의 style 부분에서 정한 스타일 시트를 사용하여 HTML에 버튼이 보여질 것이다. "url" 에는 버튼에 링크를 달 주소를 입력한다. HTML 문서의 본문 내용은 <body> , </body> 태그 안에 넣는다. HTML 코드가 다음과 같이 보일 것이다.
```
<!DOCTYPE html><html><head><style>.button {  background-color:blue;  border-color:red;  color:white;}<body><a href="https://www.wikihow.com" class="button">홈</a></body></html>
```
광고