블로그 스킬 업할 수 있는 좋은 정보를 사용자에게 보다 쉽게 전달해 줄 수 있는 코드 스킬이 있습니다. 바로 버튼을 만들어 활용하는 방법인데요. 남들은 다 알고 하는데 나는 모른다? 이처럼 막막하기만 하고 답답한 상황에 놓이면 소외감이 느껴지고, 머리가 아픕니다. 그러나, 이제 그런 염려는 다 버려도 좋습니다. 오늘은 버튼 만들기를 완벽히 마스터 해 보도록 하겠습니다. 코드를 적용하여, 기초 세팅하는 방법부터 실전에 활용하는 방법까지 이것만 알면 누구나 쉽게 할 수 있기 때문인데요.
버튼 만들기 스킬을 익히기 위해서 첫 단추를 잘 끼워야 합니다. 일단 무료 사이트로 이동하는 것은 알았으니
어떻게 적용해서 사용하는지 알아야 하겠죠!
집중해 주세요!
1. 시작은 복사부터! [코드 복사해 두기]
- HTML코드와 CSS 코드, 두 부분을 분리해서 각각 복사해 두어야 합니다.
- HTML 코드 <a href="#" class="myButton">blue</a> 이것은 우리가 보는 글작성 화면에 버튼을 생성하는 코드 입니다.
- CSS 코드는 길이가 길고 내용이 좀 많습니다. HTML과는 차이가 있습니다. 두 코드를 각각 분리해서 적용을 해주어야 합니다.
- 먼저, CSS 코드 설정이 제일 중요합니다. 코드 복사는 아래 사진을 클릭하거나 버튼을 누르면 복사하기로 넘어갑니다.
세팅을 잘하면 정말 쉬워요!!!
2. CSS 코드 적용하기 [기초 세팅하기]
복사한 CSS코드는 어디에 붙여 넣어야 하는가 입니다. 쉬우니 잘 따라와 보세요.
- 티스토리 [블로그 관리 창]으로 이동을 합니다.
- 왼쪽에 있는 창에서 꾸미기 ▶[스킨 편집]을 선택합니다.
- 오른쪽 상단에 보이는 [HTML 편집]을 누릅니다. 팝업 창 [확인] 누르면 화면전환이 되고,
4.위 쪽에 보이는 [CSS]를 선택합니다.
5.스크롤을 내려서 입력 창 맨 아래에, 복사해 두었던 CSS 코드를 붙여넣기 합니다.
6.반드시 매우매우 중요한 것!! 오른쪽 상단에 있는 [적용] 버튼을 꼭 눌러야 합니다. 그리고 [확인] .
여기까지 블로그에서 활용할 [버튼 만들기] 기본세팅이 끝났습니다. 이제는 이렇게 세팅 된 버튼을 어떻게 활용하는 지 실전 활용방법을 알아보러 가겠습니다.
활용방법 마스터하러 바로가기
실전 활용 방법은
버튼 누르시면 이제 스킬 장착으로 넘어가볼까요!!!
CSS 코드 별 기능 설명 [이해하기]
- myButton : CSS에서 이 버튼을 스타일링하기 위한 클래스 이름. 포스팅 서 버튼 두개이상 사용시 이름을 각각 적용.
- display: inline-block : 버튼 처럼 크기를 조정할 수 있게 만듦.
- background-color : 버튼의 배경색 지정 기능.
- background:linear-gradient : 배경에 그라데이션 효과를 주는 기능.
- padding : 버튼 내부의 여백을 지정해서 글자 주변 공간 확보 기능.
- color : 글자 색상을 지정하는 기능. 흰색으로 설정하면 가독송이 좋게 할 수 있음.
- text-decoration: none : 밑줄 제거로 깔끔한 버튼 느낌을 주는 기능.
- border-radius : 버튼의 모서리를 둥글게 하는 디자인적 기능.
- hover : 마우스 올렸을 때 배경색이 바뀌는 효과를 설정하는 기능.
- transition: background-color 0.3s ease; hover시 변화가 부드럽게 보이도록 하는 기능.
- active : 버튼을 누르고 있는 순간에 적용되는 기능.
무료사이트 활용 이점
무료 버튼 생성 사이트의 이점은 쉽게 버튼을 만들수 있고, 자동으로 코드가 생성되어 복사해서 내 블로그에 적용하면 되기 때문입니다. 또한, 만들고 싶은 버튼의 모양과 색깔을 지정하고, 크기와 다른 옵션들의 값을 설정하는 것이 매우 쉽습니다. 그리고 무엇보다 코드를 모르는 초보자라도 자동으로 HTML 코드와 CSS 코드가 만들어진다는 점입니다.
이렇게 만들어진 코드는 원하는 버튼을 선택하여 이미지화 된 버튼을 클릭하거나 혹은 살짝 아래에 있는 [코드 가져오기]를 누르면 우측에 HTML과 CSS 코드가 각각 보입니다.
이상으로 [블로그 스킬 업! 버튼 만들기 기초 세팅부터 실전까지 활용 방법 마스터하기] 의 포스팅을 마치겠습니다.
감사합니다 ^^~