블로그 버튼 만들기 실전 적용, 방법 마무리

버튼을 만들어 쉽게 사용하기 위하여 기본적인 세팅을 해 두었다면, 이제는 블로거로서 실전에서 써먹어야 하겠습니다. 그렇게 하기 위해서는 기본적인 세팅에 맞추어 어떻게 적용하는지가 매우 중요합니다. 누구나 처음에는 익숙하지 않아서 어색하고 실수도 많고 시간이 걸리기 마련입니다. 하지만, 정확하게 잘 습득해 둔다면 누구에게나 강력하게 사용할 수 있는 나만의 블로그를 만들 수 있습니다. 오늘은 지난 포스팅에 이어서 실전에서 버튼 연결하는 실전 팁에 대해 알아보겠습니다.

 

무료 버튼 생성 사이트 바로가기

A useful tool for designing css buttons

 

 

위 사이트는 무료로 쉽게 버튼을 만들 수 있고, 생성된 코드를 복사할 수 있어서 기본으로 활용할 때 큰 도움이 되는 곳입니다.

내가 만들고 싶은 버튼을 지정하고 크기와 다른 옵션들의 값을 설정하고, 화면에 보이는 버튼을 클릭하면 바로 코드가 보입니다.

서식으로 저장하기 [스킬 장착]

지금까지 만들어 두었던 모든 세팅을 이제 우리가 블로그로 발행을 할 때마다 적재적소에 잘 사용하기 위한 것이 필요합니다. 그것이 바로 서식으로 저장을 해두는 것입니다. 즉, 스킬을 장착하는 것이죠. 혹시 바로 글쓰기로 들어가서 적용하려고 애를 쓰는 사람이 있을 텐데. 일단 순서대로 실습을 먼저 해 보는 것이 시간을 절약하는 것이 되니 끝까지 다 해보시고 진행하시기 바랍니다.

1. 블로그 관리 홈으로 이동을 합니다. 
2. 콘텐츠에서 [서식 관리]를 선택합니다.
3. 오른쪽 상단에 [서식 쓰기🖋️]를 선택합니다. 자주 활용하기 위한 나만의 스킬 장착 목록이 되겠네요.
4. 글쓰기 형식의 창으로 바뀝니다. 저는 제목을 [버튼 만들기]로 하겠습니다. 
5. 이제 오른쪽에 있는 [기본모드 v]를 눌러서 [HTML]을 선택합니다. 검은 화면에 코드 입력 모드로 바뀝니다.

 

 

6. 그리고 빈 공간에 복사해 두었던 HTML 코드를 붙여 넣기 합니다.

7. 오른쪽 하단에 있는 [완료] 버튼을 누릅니다. 그럼 글쓰기 화면에 링크가 걸린 것으로 'blue'라고 되어 있을 겁니다. 

 

 

 

언제든 내 블로그에서 활용할 수 있는 [버튼 만들기]라는 스킬 장착이 완료되었습니다.

 

 

아직 버튼 만들기 기초 세팅을 안하셨다면 고고싱~~

 

버튼 만들기 기초 세팅 하러 바로가기

블로그 스킬 업! 버튼 만들기 기초 세팅, 실전 활용 방법 마스터하기

 

포스팅 작성 시 서식 활용하기 [실전 팁]

이제 내가 쓰고자 하는 글을 잘 작성해 보겠습니다. 이제 글을 쓰는 것에 시간이 걸릴 뿐. 그리고 무엇을 쓸지 고민이 있을 뿐 어려운 점은 없을 것으로 생각합니다. 자 그럼 이제 준비해 두었던 서식을 활용해 볼까요!

1. 링크를 넣을 버튼이 필요한 곳에서 오른쪽 상단에 […]을 누릅니다.
2. 선택 후 나온 것에서 [서식]을 선택합니다.
3. 그리고 [버튼 만들기]라는 제목을 선택해줍니다. 실전에서 쓸 버튼의 이름은 어떻게 바꾸는가?

원하는 이름으로 바꾸고 링크 연결하기 [실전 팁]

원하는 버튼의 이름으로 바꾸고 링크 주소를 어떻게 그리고 어디에 연결하는지가 궁금하시죠?

순서대로 차근차근 시도해 보도록 하겠습니다.

1. 글을 쓰고 있던 중이거나 작성이 종료되면 오른쪽 상단의 [기본모드 v]를 눌러 [HTML]로 전환해 주시고,
2. 버튼을 만든 위치로 이동하셔서 오른쪽에 있는 코드를 찾으세요.  <a href="#" class="myButton">blue</a> 이 코드에서 'blue'라고 쓰여있는 곳에 원하는 이름을 적어 넣으면 됩니다. 예: <a href="#" class="myButton">다음 바로가기</a>가 되겠네요.

 

 3. 링크의 주소는 코드 속에 있는 # 부분에 링크 주소를 입력해 주면 됩니다. 연결할 링크 주소 예: https://www.daum.net/ 를 입력하거나 복사 붙여 넣기 하면 됩니다. 위의 방법대로 잘 실행을 했다면 이렇게 되어 있을 것입니다. 결과 : <a class="myButton" href="https://www.daum.net/">다음 바로가기</a> 

 4. 오른쪽 하단에 [완료]를 클릭해 주면 이제 내가 원하는 버튼이 완성되었습니다. 

 

 

정말 쉽죠!

내가 만든 버튼이 어떻게 배치되는지 확인을 위해서 왼쪽 하단의 [미리 보기] 누르면 아래사진과 같이 잘 생성된 것이 보입니다. 

 

 

 

이상으로 버튼을 만드는 것부터 기본 세팅과 서식으로 스킬을 장착하여 실전에서 활용하는 방법까지 다 마쳤습니다. 저에게 이 스킬은 너무나도 해보고 싶었던 정말 정말 갖고 싶었던 스킬입니다. 너무 궁금해서 어떻게 하는지 조차 막막했던 것이 생각나네요. 그리고 나름 정말 고민하고 또 고민하고 했던 부분인데, 쉽게 해결할 수 있어서 정말 행복함을 느꼈던 스킬입니다. 반면에, 너무 쉬워서 허탈한 느낌도 들기도 했습니다. 그러나, 기쁜 것은 변함이 없었습니다. 대신 한 번 해보았다고 내 것이 되진 않더군요. 꾸준히 그리고 잘 연습해 보는 것이 반드시 필요합니다. 감사합니다 ^^~

 

 

기초 세팅을 어떻게 해야하는지 알고 싶은 분들은 버튼을 누르시면 됩니다. 

 

버튼 만들기 기초 세팅 하러 바로가기

블로그 스킬 업! 버튼 만들기 기초 세팅, 실전 활용 방법 마스터하기