블로그에서 많이 쓰이는 링크 버튼 간단하게 만들기
안녕하세요, 여러분. 블로그를 보다가 어? 괜찮은 버튼모양이 있는데 가만 보니 어려운 코드를 만져야 하니 머리도 아프고 어렵고 하시죠? 오늘은 그런 분들을 위해 특별히 떠먹여 드리도록 준비했습니다. 이 글을 통해 쉽고 간단하게 버튼을 만들 수 있는 방법을 안내해드리겠습니다. 티스토리를 바탕으로 한 설명이니 설정 및 기본 메뉴들을 숙지 후 따라 해 보시고 또한, 간단하게 코드의 의미만 알고 있어도 여러분들도 만들 수 있으니 꼭 필요한 정보를 얻어 가시기 바랍니다.
1. 버튼 만들기 할 때 필요한 코드
HTML코드와 CSS코드가 필요합니다. 웹페이지상에 표현을 하려면 저 코드들이 있어야 표현을 할 수 있습니다. HTML코드를 간단하게 표현하자면, 블로그 상에서 뼈대를 형성하는 코드라고 이해하면 되고, CSS코드는 블로그를 화려하게 꾸미는 코드라고 생각하면 될 것 같습니다.
버튼 만들기 HTML요소의 구성
HTML의 구성은 위 그림과 같이 태그이름, 속성명, CSS에서 불러올 이름, 링크주소, 링크버튼이름, 태그 이름 종료로 이루어집니다. 이 형식을 기본으로 하되 좀 더 익숙해지면 태그를 변경하거나 수정을 할 수 있습니다. 이 HTML코드는 버튼내용(버튼 꾸미기 코드)을 불러오는 코드라고 이해하면 쉽게 이해게 될 겁니다.
HTML코드요소 속 속성값의 의미
위 그림에서 보면 a태그 안에 CSS에서 불러올 이름이 틀려지면 CSS에서 불러올 이름의 내용을 읽을 수 없기에 해당 내용의 코드를 적용을 못 시킵니다. 그래서 이름값을 정확히 넣어주셔야 됩니다. 이름값 안에 내용이 들어있는 버튼을 만들기 위한 상세한 내용을 넣기 위한 준비를 할 수 있습니다. ❗❗ 참고로 HTML코드를 서식이나 따로 만들어 사용하면 편리합니다.
2. 버튼 CSS코드 만들기
앞서 말했듯이 CSS코드는 버튼을 좀 더 꾸미기 위한 코드라고 말할 수 있습니다. CSS코드에 버튼 만들기에 관련된 상세한 코드들이 들어있습니다.
버튼의 상세한 형태와 색상 및 액션(motion) 만들기
CSS코드에 버튼의 형태를 둥글게 만들고 색상을 입혀주고, 움직임을 주어서 실감 나게 모션을 주고 하는 코드들이 들어있습니다. 그래서 앞서 언급한 HTML코드에 CSS에서 불러 올 이름에 연결시켜서 불러오게 하는 역할을 합니다. 그래서 주의할 점은 코드의 스펠링하나라도 지워지거나 하나라도 없어지면 작동이 안 됩니다. 작업을 하실 때 신중을 기하여 주세요.
버튼 CSS코드 사용법
해당 블로그에서 스킨편집➡ HTML편집➡ CSS편집 메뉴로 와서 빈칸을 만들고 입력을 시키면 됩니다. 줄맞춤이나 정렬을 하지 않아도 되니 입력 후 다른 것을 건들지 말고 저장을 눌러 저장을 시켜주시면 됩니다.
3. 버튼 별로 색상을 다르게 표현하기
버튼을 만들어 놓으면 하나의 색상만 선택을 할 수 있기 때문에 다른 색상을 입히려면 다른 CSS코드를 입력해주어야 합니다. 버튼 만드는 방법을 응용하여 색상을 다르게 만들어 봅시다.
파란색 버튼 만드는 코드
CSS코드에서 추가로 코드를 입력을 하면 파란색으로 변할 수 있습니다. 아래에 파란색 만드는 코드파일을 추가를 해놓았습니다.
버튼 CSS코드 사용법
CSS코드에서 ". myButton.blue { "라는 코드 라인 아래에 ". myButton.red:active { "라인 쪽 아래에 입력하고 저장을 하면 됩니다. 그리고 해당 "CSS에서 불러올 이름"을 red나 blue로 HTML코드에다가 넣어서 각 각 저장을 시켜주면 완성이 됩니다. 다소 어렵게 느낄 수 있어 코드를 마련해 두었으니 한번 적용해 보세요.
4. 버튼에 글자폰트를 원하는 글자폰트로 꾸미기
버튼에 글자폰트를 바꾸어서 나만의 글자폰트 버튼을 만들어보세요. 한층 더 색다르게 꾸밀 수 있습니다.
원하는 글자폰트 선택하기
우선 구글폰트 사이트로 가서 원하는 글자폰트를 선택하면 됩니다. 다만 글자폰트마다 고유의 글자의 크기가 선택되어 있으니 원하는 글자폰트를 선택하였다면 글자폰트의 크기가 어느 정도 지원이 되는지 체크를 해보고 선택하시기 바랍니다.
글자폰트를 버튼에 적용방법
우선 구글폰트 사이트로 가서 원하는 글자폰트를 선택하고 " Get font "를 클릭합니다. 그런 다음 " <> Get embedcode "를 클릭합니다. 어려운 코드들이 나오는데 어려워하지 마시고 천천히 따라 해 보시길 바랍니다. 여기서 빨간색박스에 있는 코드는 글자폰트에 대한 HMTL 코드입니다. 그래서 블로그의 HTML 메뉴로 들어가서 <head> 코드 아래에 입력하시면 됩니다. 그리고 파란색박스에 있는 코드들은 CSS코드에 대한 코드들입니다. 블로그의 CSS메뉴로 들어가서 앞서 만들어 놓은 버튼코드 중에. myButton 제목에 " { " 안쪽으로 밑에 라인에 맞춰서 빈칸을 만들어 녹색 밑줄에 대한 코드를 입력합니다. 그리고 저장하면 됩니다. 그 외에 밑에 코드들과 화살표로 표시된 부분은 글자크기 설정에 관한 코드로 건들지 않으셔도 됩니다. 이렇게 완성이 되었습니다. 다소 어렵게 느낄 수 있어 코드를 마련해 두었으니 한 번 적용해 보세요.
오늘 여러분께 소개해드린 간단하게 링크 버튼 만들기를 보시고 멋지게 블로그를 만들어 가시길 바랍니다. 각 코드가 가진 의미와 사용법을 정확히 숙지하시어, 여러분의 블로그운영이 더욱 원활하고 효율적으로 이루어지길 기원합니다. 또한, 이 글이 블로그를 처음 접하시는 분들에게도 유용한 정보가 되었기를 희망합니다. 앞으로도 유익한 정보로 찾아뵙겠습니다. 감사합니다!
같이 보면 도움 되는 정보
[다양한 생활정보] - 위치데이터기반 플랫폼 지오비전퍼즐로 보는 삶의 지도
[다양한 생활정보] - 우리나라에서 외환거래 시 꼭 알아야 할 금융기관 대표코드
[다양한 생활정보] - 사진 용량 가볍게 쓰자 - 사진 용량 줄이는 여러 가지 방법
'다양한 생활정보' 카테고리의 다른 글
| 지진과 태풍, KBS 재난포털의 실시간 정보 (0) | 2024.06.23 |
|---|---|
| 현대모비스 공식 스토어, 자동차용품의 최신 트렌드를 알아보자 (0) | 2024.06.22 |
| 다이소 쇼핑할 때 꿀팁, 딱 3가지만 알면된다! (1) | 2024.05.12 |
| 위치데이터기반 플랫폼 지오비전퍼즐로 보는 삶의 지도 (0) | 2024.05.11 |
| 우리나라에서 외환거래시 꼭 알아야할 금융기관 대표코드 (0) | 2024.05.09 |
댓글