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

페이지 정보

작성자 webpaper 댓글 0건 조회 19,939회 작성일 20-04-22 14:10

본문

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

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를 사용하는 방법도 있다.