웹사이트에서 가장 중요한 것은 방문자가 원하는 정보를 제공하는 콘텐츠라 할 수 있습니다. 사용자는 원하는 정보가 있는 페이지에서 만족감을 느끼고 재방문할 수 있습니다. 다음으로 중요한 부분은 디자인이기도 합니다. 다양한 정보를 방문자의 눈에 띄게하기 위해서는 적당한 CSS 버튼 디자인이 효과적인 결과를 낳기도 합니다. CSS 버튼 디자인을 참고할 수 있는 곳과 블로그에 적용하는 방법에 대해서 알아보도록 합니다.
CSS 버튼 디자인 참고 사이트 및 적용 방법
1. CSS 버튼 디자인 참고할 수 있는 곳.
web기술이 발전함에 따라 실시간으로 CSS 효과를 확인할 수 있는 방법이 다양하게 있습니다. 과거에는 적당한 코드와 예시를 보여주고, 별도의 웹앱을 이용해 디자인 효과를 검토합니다. 그 후, 원하는 페이지 혹은 사이트에 적용하여 최종 결정을 하기도 했습니다.
웹페이지에 css 적용 테스트를 빠르게 해보는 방법.(ft.크롬 개발자도구 사용 방법)
·웹사이트에서 디자인 요소를 언급한다면 당연히 CSS를 이야기할 수 밖에 없습니다. html이라는 태그에 효과를 적용하여 원하는 디자인의 페이지를 완성할 수 있기 때문입니다. 이런 명령어들을
nosw.tistory.com
이제는 다양한 CSS 디자인 요소를 바로 보여주고 효과를 체크할 수 있는 페이지들이 있습니다. 사용자 입장에서 너무나 감사하고 편리한 기능이기도 합니다. 몇가지의 사이트를 알아보도록 합니다.
① RWDB (http://rwdb.kr/interactionbutton/)
위 사이트는 codepen기능을 이용해 10가지의 CSS 버튼 디자인을 소개하고 있습니다. html, css 코드를 확인할 수 있으며, 코드가 적용된 모습도 볼 수 있습니다. 기본적은 구조를 알지 못해도 블로그에 적용하기에는 크게 어려움이 없을 것입니다.
② velog.io - whdnjsdyd111 (https://velog.io/@whdnjsdyd111/CSS-%EB%B2%84%ED%8A%BC-%EC%9D%B4%EC%81%98%EA%B2%8C-%EA%BE%B8%EB%AF%B8%EA%B8%B0)
위 페이지는 사진에 보이는 것과 같이 다양한 CSS 버튼 디자인을 보여주고 있습니다. ①번에서 알아본 방법과 마찬가지로 codepen을 이용하여 결과를 보여주게 됩니다. 원하는 버튼 디자인이 있다면 코드를 응용해서 적용할 수 있습니다.
③ html & css 내용 참고 - Mozilla (Web 개발 학습)
html & CSS는 웹개발에 필요한 코드를 의미합니다. 아무리 멋진 CSS 디자인 코드를 알고 있다고 해도 기본적인 구조를 이해하지 못한다면 어려움을 겪을 수 있습니다. 해당 내용들을 정리하기 위한 방법으로 책 또는 강의를 수강하는 것이 좋은데요. 위 사진의 사이트와 같이 인터넷에도 잘 정리된 내용들이 있습니다. 기초적인 부분은 해당 사이트와 같은 내용에서 도움을 받을 수 있습니다.
2. 티스토리 블로그에 CSS 버튼 적용하는 방법
css는 기본 선택자를 이용해 일괄적으로 적용할 수 있습니다. 또는, 필요한 부분에만 활용할 수도 있습니다. 티스토리 블로그에서는 스킨편집 부분에서 CSS를 편집할 수 있습니다. 이 방법은 해당되는 태그(선택자)에 일괄적으로 적용되는 내용입니다. 다른 방법으로 서식을 이용하는 방법이 있습니다. 글쓰기 모드에서 미리 준비된 '서식'을 불러와 필요한 곳에 적용하여 CSS버튼을 생성할 수 있습니다. 필요에 따라 여러 버튼을 활용하고 싶다면 서식으로 미리 만들어두는 것이 편리한 방법이 될 수 있습니다.
마치며.
CSS는 기존에 마련된 페이지를 조금 더 시각적으로 꾸며주는 역할을 하게 됩니다. 다시 말해, 꼭 필요한 요소는 아니라는 것이죠. html 태그만 이용해도 충분히 정적인 웹사이트를 만들 수 있습니다. 대표적으로 코딩 공식 문서들이 그런 모습입니다. 하지만, 심심하기도 합니다. 조금더 멋진 모습의 페이지를 구성하기 위해서는 CSS를 이용할 수 밖에 없으니까요. 블로그도 마찬가지입니다. 방문자에게 정보를 제공하는 핵심적인 요소 뿐만 아니라 CSS 버튼과 같은 디자인을 적절하게 활용한다면 보다 멋진 자신만의 블로그를 꾸밀 수 있습니다.
