티스토리 블로그의 최대 장점은 자신이 운영하는 블로그의 html, css를 수정 및 보완할 수 있다는 점입니다. 이 점은 개인의 개성과 활용을 잘 사용할 수 있다는 것이기도 하죠. 대표적으로 css를 많이 수정하는데, 버튼 css를 수정하고 블로그 본문에 적용하는 방법에 대해서 알아볼까 합니다.
css는 해당되는 페이지를 멋지게 꾸며줄 수 있는 언어입니다. html이 페이지 뼈대를 만들었다면 css는 겉모습을 만들어 주는 것이죠. 여기에 별도의 웹프로그맹 언어를 이용하여 보다 역동적인 웹사이트를 구성할 수 있습니다.
이런 css가 누구는 어렵다, 누구는 쉽다 이야기를 합니다. 개인적으로 어렵다고 생각합니다. 익숙하지 않다면요. 그리고 원하는 기능을 구현하기 위한 다양한 노력도 필요합니다. 적용하는 방법부터 수정하는 방법까지 말이죠. 다만, 하나씩 하다보면 언젠가 원하는 기능을 손쉽게 만들 수 있으리라 생각합니다.
버튼 CSS 소스부터 구해볼까요.
정말 많은 css 소스가 있습니다. 버튼에도 다양한 모습으로 커스튬을 하고, 공유하는 멋진 사람들이 있습니다. 이들에게 도움을 받기도 합니다. 인터넷에서 '버튼 css'를 검색하시면 다양한 소스 코드를 보실 수 있습니다.
우선 몇가지의 사이트를 소개합니다. 여기서 멋진 디자인의 css 코드를 참고하시면 도움이 될 수 있습니다.
1️⃣ css 디자인 스타일 모음 (inpa.tistory.com)
[CSS] 🎨 버튼(Button) 디자인 스타일 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 버튼 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가
inpa.tistory.com
- 프론트앤드 개발자이신 것 같습니다. 블로그 자체도 멋지게 꾸며두셨구요. 개발에 대한 다양한 내용을 주제로 다루고 있습니다. 해당 페이지로 이동하시면 버튼 css 소스 코드를 참고하실 수 있습니다.
2️⃣ A useful tool for designing css butoons
A useful tool for designing css buttons
Button generator is a free online tool that allows you to create cross browser css button styles.
www.bestcssbuttongenerator.com
- 해당 사이트는 상당히 깔끔하고 직관적으로 설계되어 있습니다. 소개해드린 페이지를 보시면 느껴지실 것 같네요. 다양한 css 버튼들의 모습이 메뉴로 보여지고, 해당 버튼을 선택하면 간단하게 수정해볼 수 있는 기능도 제공하고 있습니다.
티스토리 css 소스코드 적용.
자, 이제 원하는 버튼의 코드를 선택했다면 블로그에 적용할 차례입니다. 처음이라면 복잡해 보일 수 있지만, 몇번 해보시면 그리 어렵지 않을 수 있습니다. 순서부터 볼까요.
- css 소스코드 선택
- 블로그 편집 > css 편집 화면으로 이동
- css 소스코드 붙여넣기 > 저장
- css 코드가 잘 적용하고 활용하기 위해서는 css 선택자에 대한 개념이 필요합니다. 또한, 경우에 따라 가상요소인 before, after와 같은 속성값도 필요할 수 있습니다.
- 블로그 서식 설정하기
- 본문 작성에서 활용하기
1. css 소스코드 확인 및 선택
위에서 소개한 2개의 페이지 중, 저는 2번째를 이용해서 글을 작성해 갑니다. 편하신 것으로 활용하실 것을 추천드리며, 간단하게 만들어볼 수도 있습니다.
제가 선택한 버튼입니다. 예시 그대로 'Get Code'를 선택하여, 해당 버튼의 css와 html코드뷰를 확인합니다. 오른쪽 붉은 박스 내용을 복사하면 됩니다.
- 위 코드를 그대로 가져와 본문 html 블럭을 이용해 적용한 모습입니다. 잘 적용된 것이 확인되네요. 우리가 원하는 것은 이런 버튼이 본문에 등장하는 것이죠. 매번 이렇게하면 불편하니 블로그에 css를 적용시켜 두려는 것입니다.
- 간략하게 코드를 살펴봅니다.
- 붉은 선 위에 있는 내용이 앵커태그, 다시 말해 링크 태그이구요. 아래쪽이 css 코드입니다. 그리고 .myButton, .myButton:hover, .myButton:active라고 적힌 부분이 css 선택자입니다.
- css를 적용시키는 방법은 크게 3가지가 있습니다. 여기서 우리가 사용하는 방법은 스타일시트를 이용하는 방법이라고 하며, 적용 대상을 지정해주는 것이 css 선택자라고 할 수 있습니다.
- class를 선택하는 방법이 class이름 앞에 '.'을 찍는 것입니다.
- 이제 대충 코드를 확인했으니 스타일 시트에 css를 저장해 볼께요.
2~3. 블로그 스타일시트 (css 편집기)에 css 코드 저장하기.
블로그 자체에 적용되는 css 코드들을 모아둔 것을 편집할 수 있는 기능도 제공합니다. 알고보면 참 편리한 부분들이 많습니다. 블로그스팟과 비교해서 친절하고, 편리하게 티스토리 블로그를 이용할 수 있습니다. 물론, 자신이 능력이 뛰어나다면 어떤 환경도 크게 문제되진 않을 것입니다.
위 순서로 css 시트 편집기로 접근합니다. 대충 다양한 코드들이 있는데, 오늘의 목표는 해당 버튼 css를 적용하는 것이기에 싸그리 무시하고 스크롤을 가장 하단으로 내려 줍니다. 빈 공간에 적당히 붙여넣기 합니다.
- 한가지 tip!
- /* 내용 */
- 위 내용은 주석입니다. 적용되지 않는 코드라는 의미이며, 개발자나 사용자에게 알림으로 사용될 수 있습니다. 우리도 이렇게 적당한 내용으로 지정해두면, 다음에 빠르게 찾을 수 있겠죠
4. 서식 작성하기.
서식은 본문에서 빠르게 해당 기능을 불러와 사용할 수 있는 기능입니다. 여기서는 태그를 저장해두면 됩니다. 해당 태그를 다시 볼게요.
<a href="#" class="myButton">twitter</a>기본으로 주어진 태그입니다. href='#'으로 된 #부분이 원하는 링크주소가 들어갈 부분입니다. twitter부분이 본문에서 보여질 내용에 해당합니다. 사용하실 때 두 부분을 잘 수정해서 원하는 위치에 입력하시면 됩니다.
쓰다보니 정리가 잘 안되는 것 같기도 하네요. 차분히 하시면 충분히 하실 수 있으리라 생각합니다. 만약, 막히는 부분이 있다면 댓글로 알려주시면 다시 보완 할 수 있도록 할게요.
위에서 언급한 방법으로만 사용해도 충분히 활용도가 좋습니다. 단지 조금 귀찮죠. 버튼을 사용할 때 마다 링크와 택스트를 수정해야 합니다. 조금 더 편한 방법이 없을까요. 귀찮을 걸 싫어하기 때문에, 생각해 봤습니다.
어차피 사용하는 버튼은 하나의 영역을 모두 차지하게 됩니다. 잘 보여야 사람들의 행동을 유도할 수 있으니까요. 그럼 가로 영역을 모두 지정해주고, class를 설정하면 어떨까요. 네, <div>태그를 활용해 보기도 합니다. 이어지는 포스팅은 조금더 편하게 티스토리 블로그에서 버튼 css를 지정하는 방법에 대해서 알아보겠습니다.
댓글