기본 형태에서 벗어나 스타일시트를 적용하면 버튼의 외형을 예쁘게 바꿀 수 있습니다. 그래서 버튼 css 제공 사이트를 통해서 예쁜 버튼을 한번 만들어 보겠습니다.
제가 소개해 드릴 웹사이트는 바로 css3buttongenerator 라는 사이트 인데요. 폰트나 외형등을 마우스 클릭등의 손쉬운 조절로 자신이 원하는 모양의 css를 생성하게 도와주는 역할을 합니다.
1. 사이트 소개
사이트 진입 시 다음과 같은 화면이 뜨는데요.
좌측은 버튼을 설정 하는 부분이며 오른쪽은 왼쪽의 설정된 부분이 반영된 모습을 보여줍니다.
2. 세팅
1) Font/Text : 버튼의 글자, 폰트, 색상, 배경색 등을 설정
2) Box : 버튼의 그림자 지정과, 상하좌우 여백을 지정
3) Border : 버튼의 모서리의 둥글게 만들 수 있으며 선의 두께를 설정
4) Background/Hover : 배경색과 커서를 지정했을 때의 배경색을 지정
위의 구성요소를 통해 우측의 버튼의 모양을 변경할 수 있습니다.
세팅 메뉴를 통해 버튼의 스타일을 적용하면, 밑의 css 코드도 자동으로 변하게 되는데요.
이 css를 복사하여 자신이 사용할 웹페이지에 적용해 주시면 됩니다.
3. 적용 방법
1) 이클립스를 켠 뒤 btn.css 파일 생성합니다.
2) 웹사이트에서 복사한 css 코드를 붙여넣고 저장합니다.
3) 버튼을 구현할 jsp 헤더 부분에 btn.css를 링크시킵니다.
4) input을 통한 버튼을 생성하고 class=”btn”을 지정합니다.
위와 같이 설정하신 뒤에 서버를 구동하면 위와 같이 버튼 css 코드가 적용됨을 확인할 수 있습니다.
위의 사이트 외에도 구글 같은 포털에서 검색하면 여러가지 사이트가 있으니 자신에게 맞는 사이트를 한번 찾아보시는 것도 추천드립니다.
답글 남기기