Vue.js에서 버튼 생성하기

Vue.js 3에서 버튼은 어떻게 만들까요? 사실 버튼을 만드는 것은 정말 쉽죠. 그냥 버튼 태그만 붙이면 되니까요. 그럼 버튼을 만들 수 있습니다. 버튼을 만드는 것을 모른다면 아마 이 글을 읽을게 아니라 HTML 기본서를 읽고 있어야하겠죠. 맞아요. 사실 이 글을 쓸 필요가 없을지도 모르겠습니다. 그런데 매일매일 포스팅하리라고 마음 먹었지만, 어느새 저장해놓은 글이 다 사라지고 지금 작성하지 않으면 오늘 업로드할 포스트가 없어서 어쩔 수 없이 버튼 만드는 방법이라도 글을 써야할 것 같습니다.

 

그래서 이번 포스팅에서는 버튼을 생성하고, 그 버튼을 원하는 스타일로 변경시켜가는 것을 세세하게 해보도록 하겠습니다. 그냥 quasar 프레임워크나 bootstrap 프레임워크를 통해서 해도 되는데 왠지 그러면 오히려 더 막히는 것 같아서 버튼을 실제로 원하는 스타일에 맞춰서 만들도록 할거에요. 

 

버튼 만들기 - Html 태그 생성.

 

 

먼저 제가 만들 버튼은 위의 그림과 같은 단순하게 Search(F3)이라고 생긴 버튼을 만들 예정입니다. 먼저 html태그를 만들어보도록 할게요.

 

<button>Search(F3)</button>

 

이렇게 <button></button>이라는 태그 사이에 Search(F3)이라는 글자를 두고 만들었습니다. 이렇게 만들면 어떻게 실제 화면에 표시될까요.

 

이렇게 표시됩니다. 뭐 위의 버튼과 큰 차이는 없지만 기본적으로 옛날 홈페이지에서 많이 보던 그런 버튼이죠? 이제 이 버튼을 스타일링 해보도록 하겠습니다.

 

 

728x90

버튼 스타일링

 

1. 버튼 색 바꾸기

가장 먼저 버튼의 색깔을 바꿔볼게요. 버튼의 스타일을 바꾸는 방법은 많이 있습니다. 일단 먼저 인라인으로 해당 버튼 태그에 실제 css 문법을 넣어서 그냥 바로 적용시키는 방법이 있습니다. 그리고 전체 css문서에서 해당 버튼을 잡아서 스타일을 변화시킬 수도 있습니다. 그리고 자바스크립트에서 해당 버튼을 잡고 스타일을 변경하는 방법이 있습니다. 기본적으로 이렇게 있는데 이번에 스타일은 vue.js 에서 하는 방법인데요. 해당 버튼에 클래스를 부여하고, 그 클래스를 해당 vue파일의 style 태그 안에서 스타일을 주는 방식으로 하겠습니다.

 

<button class="search-btn">Search(F3)</button>

 

먼저 해당 버튼에 클래스를 search-btn이라고 붙여줍니다.

 

<style scoped>
    .search-btn {
      background-color: blue;
    }
</style>

 

그리고 그 vue 파일에 안에서 style 태그를 열고, 클래스 선택자를 사용해서 search-btn 클래스를 선택하고, background-color를 bule로 정해줍니다. 그리고 나서 확인하면 이렇게 바뀌어있습니다.

 

 

네, 엄청 촌스럽네요. 그럼 이 버튼의 색을 조금 덜 촌스러운 색으로 변경해줘봅시다.

 

 

저는 이 색깔로 선택을 했습니다. 

 

.search-btn {
  background-color: #5e5efa;
}

 

그런데 색깔을 변경하고 보니 글자색이 검정색이라 잘 안보이네요. 글자색을 변경해볼까요?

 

2. 글자색 변경하기

 

글자색을 변경하는 것은 그렇게 어렵지 않아요. 아까 만들어둔 search-btn 클래스의 선택자로 선택한 style 태그에서 background-color를 변경한 부분 바로 밑에 color: white를 해서 글자를 흰색으로 변경해줍니다. 그럼 최종적으로 이런 코드가 완성이 될 것입니다.

 

.search-btn {
  background-color: #5e5efa;
  color: white;
}

 

그리고 아마 실제로 보이는 버튼은 이렇게 생겼을 거에요.

 

 

폰트도 변경하고 싶어지지만 일단 주변에 검은 테두리를 없애보도록 할게요.

 

3.  테두리 없애기

 

버튼의 테두리를 설정할때는 border라는 키워드를 사용하면 됩니다. 이번의 경우에는 테두리를 없앨거기 때문에 border: none이라는 코드를 아까 search-btn  css 코드에 붙여주면 됩니다.

 

.search-btn {
  background-color: #5e5efa;
  color: white;
  border: none;
}

 

그럼 실제로는 이렇게 보이게 됩니다.

 

 

뭔가 점점 세련되져 가네요.

 

그럼 다음은 테두리에 약간 각진걸 깍아보도록 할게요.

 

4. 테두리에 라운드 주기

 

똑같이 테두리기때문에 키워드를 border를 이용합니다. 그런데 우리는 네개의 모서리를 다 바꿀거기 때문에 border-radius를 사용해서 모서리의 둥글기를 설정해줍니다.

 

.search-btn {
  background-color: #5e5efa;
  color: white;
  border: none;
  border-radius: 3px;
}

 

border-radius를 3px정도 주게되면 아래와 같이 만들어집니다.

 

 

모서리가 확실이 뭔가 둥글해졌죠?

 

이제 크기를 설정해보도록 하겠습니다.

 

반응형

5. 버튼 크기 설정

 

가로크기를 설정하는 width와 높이를 설정하는 height를 원하는 크기를 줘서 설정하면됩니다. 저는 width에 90px, height에 30px를 줘서 버튼을 만들어보도록 하겠습니다.

 

.search-btn {
  background-color: #5e5efa;
  width: 90px;
  height: 30px;
  color: white;
  border: none;
  border-radius: 3px;
}

 

코드는 이렇게 되구요. 이렇게 했을 때 버튼의 실제 모양은

 

 

이렇게 되게 됩니다. 많이 바뀌게 되었죠?

 

여기서 끝내려고 했는데 글씨가 너무 마음에 안드네요. 폰트까지만 살짝 바꿔 보도록 할게요.

 

6. 폰트 변경

Noto Sans KR이라는 폰트에 font 의 weight을 600으로 줘보도록 할게요. 그럼 최종 css 코드는 이렇게 되구요.

 

.search-btn {
  background-color: #5e5efa;
  font-family: "Noto Sans KR";
  font-weight: 600;
  width: 90px;
  height: 30px;
  color: white;
  border: none;
  border-radius: 3px;
}

 

그리고 버튼의 최종 모양은