[HTML] 버튼(button)과 버튼에 사용하는 CSS에 대해 알아보자

안녕하세요

가운데 정렬로 항상 글을 써내려 갔었는데 아무래도.. 좌측 정렬이 가장 깔끔한거 같습니다

 

오늘은 HTML의 버튼에 관해서 알아보겠습니다

 

<button></button> 으로 사용이 되고 있습니다

 

버튼이란??

버튼을 사용함으로써

클릭이 가능하게 하고 간단한 표준 버튼 기능이 필요한 곳이라면

어디에나 배치할 수 있다는 장점이 있습니다

 

기본적인 버튼의 모양은 이쁘지 않지만

CSS를 통하여 디테일하게 모양을 바꿀 수 있습니다

기본 적으로 특성을 좀 알려드리겠습니다

 

<button class="button_1" disabled></button>

위 와 같이 클래스 이름 뒤에 빨간색에 추가하여 사용 할 수 있습니다

 

번호	이름	설명
1	disabled	클릭을 막습니다
2	name	버튼의 이름, 제출 할 때
3	type	버튼의 행동 방식
4	value	버튼의 초기값

 

기본 적으로 버튼은 어떠한 행동을 취할때 하기 때문에

간단한 페이지를 넘어가는 버튼은 <a> 태그로 대신 하기도 합니다

 

<기본 버튼 모양>

 

기본 버튼의 모양입니다

참 재미없게 생겼지 않나요??

여기에 CSS를 첨가해서 이것보다는 좀 더 이쁘게 만들어 보도록 하겠습니다

 

 

버튼에서 자주 사용할 수 있는 CSS들을 소개 해드리겠습니다

 

CSS 소개

번호	특성	설명
1	border	버튼의 테두리 값 조정 - 저는 0을 자주 사용합니다
2	outline	버튼을 클릭 시 클릭 됨을 알려주기 위한 테두리 설정 입니다
3	cursor	버튼에 마우스를 올리면 알려주는 마우스 포인터 설정
4	border-radius	직사각형의 네모를 둥글둥글하게 만들어 줄 수 있게 해줍니다

 

자세한 설명

border

  -- 기본 버튼을 다시 보고 오시면 검은색 테두리가 있는것이 보입니다

      사실상 너무 거슬리기 때문에 border : 0; 을 주어서 테두리를 없애줍니다

 

 

outline

  -- 버튼을 클릭하면 제 컴퓨터 기준으로는 보라색 테두리가 씌워지게 됩니다

     이것 역시 제가 원하던 값들이 아니기 때문에 outline : none; 을 주어서 없애줍니다

 

 

cursor

  -- 버튼에 마우스를 기본 버튼을 만들어 보셨다면 마우스를 한번 올려보세요

      아무런 뭐 이게 버튼인지 그림인지 알 수가 없습니다

      보기 쉽게 하기 위하여 cursor : pointer; 값을 주어서 올리면 아!! 이게 클릭할 수 있는 버튼이구나를 알 수있게 해줍니다

 

 

border-radius

  -- 직사각형의 네모난 모양이 싫다!! 하실때

      이것을 사용하시면 됩니다

      border-radius : 0px 1px 2px 3px;

      이렇게 총 4번을 선택 할 수 있습니다

      번호 순대로 줄어들게 되며,

      전체 다 똑같은 픽셀로 주고 싶다!! 하시면

      border-radius : 30px;

      이렇게 주시면 전체 같은 값으로 주실 수 있습니다

      오른쪽 그림이 설명이 잘 된건지 모르겠습니다 ㅜㅜ

 

 

이 정도면 이제 버튼을 간단하게 이쁘게 꾸밀 수 있는 준비는 마치게 되었습니다

간단한 버튼에 관한 소개 였구요, 아래 코드를 남기겠습니다

한 번씩 테스트하시면서 다르게도 해보고 하시면 좋을 것 같습니다

 

제가 올려둔 코드들은 정말 간단한 버튼들의 모양이구요

<a> 태그에도 동일하게 적용하실 수 있으니 한번씩 연습해보시는 것도 좋을것 같습니다

 

See the Pen YzqZJKa by Kang Byeongcheol (@Devcheol) on CodePen.

 

언제나 더 좋은 코드 또한 궁금한 사항들이 있으시면 댓글 남겨주세요

함께 공부하면 좋을것 같습니다

좋아요 한번씩 누르고 가주시면 감사하겠습니다