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

기본적으로 화면에서 버튼을 만드는 방법은 여러가지가 있다. 1. a 태그로 만들기2. button 태그로 만들기 3. div 혹은 span 등등의 엘레멘트로 만들기 나는 주로 a 태그나 button으로 많이 만든다. 개발자들과의 협업도 많고, 키보드 제어를 위해서는 a태그 및 button으로 많이 만든다. a 태그로 만들경우  <a href="#" class="btn">버튼</a>기본 틀이 되겠다. href 에는 클릭 시 이동할 페이지의 주소를 보통 넣는다. 만약 javascript 를 실해야한다면, href="#" onclick='함수/스크립트' 이렇게 넣는다 이 때 만드시, 뒤에 return false; 를 붙여줘야 href='#' 가 동작하지 않는다. class='btn'은  css 로 스타일을 주기 위해서 내가 임의로 넣은 코드이다. button의 경우는  <button type='button' class="btn"> 버튼 </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 href="#"><img src="search.png">  검색</a>이렇게 할 수도 있다. 그리고 아래와 같이 할 수도 있다.  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를 사용하는 방법도 있다.