[html/css] a / button tag 로 버튼 만들기

기본적으로 화면에서 버튼을 만드는 방법은 여러가지가 있다. 

1. a 태그로 만들기

2. button 태그로 만들기 

3. div 혹은 span 등등의 엘레멘트로 만들기 

나는 주로 a 태그나 button으로 많이 만든다. 

개발자들과의 협업도 많고, 키보드 제어를 위해서는 a태그 및 button으로 많이 만든다. 

a 태그로 만들경우 

	버튼

기본 틀이 되겠다. 

href 에는 클릭 시 이동할 페이지의 주소를 보통 넣는다. 

만약 javascript 를 실해야한다면, 

href="#" onclick='함수/스크립트' 

이렇게 넣는다 이 때 만드시, 뒤에 return false; 를 붙여줘야 

href='#' 가 동작하지 않는다. 

class='btn'은  css 로 스타일을 주기 위해서 내가 임의로 넣은 코드이다. 

button의 경우는 

버튼 태크를 사용할 때는 type='button'을 넣어준다. 

만약 form 태그 안에 있는 submit 용도라면 그냥 두어도 좋지만, 

그 것이 아니라면 type='button' 를 넣어야 submit을 하지 않는다. 

class='btn'은  css 로 스타일을 주기 위해서 내가 임의로 넣은 코드이다. 

	a.btn{
	/* 가로 세로 사이즈를 만들고 싶다면, */
	/* display:block 또는 inlne-block 를 써야 한다. */
	}

	button.btn{
	/* button은 기본적으로 border와 background를 가지고 있다. */
	/* 스타일을 변경하려면 border와 background를 변경해야한다. */
	}

이렇게 css를 시작해본다. 

	a.btn{
		display:block;
		width:80px;
		line-height:30px;
		text-align:center;
		background-color:#222;
		color:#fff;
	}

	button.btn{
		width:80px;
		height:30px;
		border:none;
		background-color:#222;
		color:#fff;
	}

여기서 button 은 기본적으로 가운데 정렬 및 line-height를 높이와 동일하게 가지고 있다. 

버튼 앞에 아이콘을 넣고 싶은 경우 

	  검색

이렇게 할 수도 있다. 

그리고 아래와 같이 할 수도 있다. 

	a.btn,
	button.btn{
		display:block;
		width:120px;
		line-height:30px;
		text-align:center;
		/* 이미지 크기를 30*30 정사각형으로 지정하는 경우 */
		padding-left:40px; /* 이미지와 글자사이 10px의 간격을 줌 */
		background-image:url(search.png);
		background-repeat:no-repeat;
		background-position:left center;
	}

버튼안에 padding으로 공간을 만들어 배경이미지로 아이콘을 넣을 수도 있다. 

다른방법은 :before / :after를 사용하는 방법도 있다.