HTML a 링크 버튼 만들기 두 가지 (컨셉) 방법
개인적으로 링크 버튼을 만드는 두 가지의 방법에 대해 언급해보려고 합니다. 정답은 없지만 어떤 작업을 할 때 이 방법이 좋다라는 견해는 있으니 한번 참고해 보시기 바랍니다.
예시
먼저 아래의 링크 버튼을 살펴보시겠습니다.
See the Pen a링크 버튼 만들기 두 가지 컨셉 by rgy0409 (@rgy0409) on CodePen.
버튼1과 버튼2 두 가지가 완성되어 있습니다. CSS를 살펴보시면 버튼1의 클래스명인 ex1에 적용시킨 스타일과 버튼2의 클래스명인 ex2의 스타일 옵션들이 다르다는것을 알 수 있죠. ex1은 비교적 간단합니다. ex2는 ex1에 비하면 다소 복잡합니다.
자유롭게 만들고자 할 때
이 방법은 현재 티스토리같은 규격과 형식에 얽메이지 않은 웹페이지에서 적용해볼 수 있는 방법입니다. 그렇기에 CSS 스타일 코드도 매우 간단합니다. ex1 처럼요. 이 방법의 장점은 텍스트의 양에 따라 버튼 크기가 달라질 수 있다는 점입니다. 또한 반응형으로도 제작 가능합니다. 사실 반응형이라고 해봐야 별거없습니다. 버튼 가로 크기보다 본문의 가로 크기가 작아질때 텍스트가 한 줄 밀려서 아래로 내려가는 경우죠. 가로 사이즈가 실시간으로 늘었다 줄었다 하는 경우는 아닙니다. 자 그러면 CSS 구성을 살펴보겠습니다. 위의 코드펜 예제가 오류가 발생해 보이지 않는 경우를 생각해서 아래에 CSS 부분만 따로 한번 더 옮겨두겠습니다.
/* 링크버튼1 */
a.ex1 {
display: inline-block;
padding: 20px 30px;
}클래스명 ex1의 CSS를 살펴보시면 display: inline-block;을 사용했다는것을 알 수 있습니다. 왜 block을 쓰지 않고 inline-block을 사용했을까요? 간단합니다. a태그는 인라인 요소입니다. 따라서 padding이나 margin같은 옵션이 적용되지 않습니다. 그렇기에 블록 요소의 성격을 가져야만 합니다. 그런데 왜 하필 inline-block을 썼을까요? block을 사용하면 가로를 100% 모두 사용해버리기 때문입니다. div나 p태그, h태그와 똑같아지죠. 그렇게되면 웹페이지의 가로 100%를 모두 사용하게 되어 버튼이 어마무시하게 가로로 길어질 것입니다. 그렇기에 inline-block으로 적용시킨 것입니다. 이제 블록요소의 성격을 가지게 되었으니 padding 값을 입력한만큼 a태그의 몸뚱이가 커지게 될 것입니다. 이와 관련된 자세한 설명은 아래의 글을 참고하시기 바랍니다.
HTML 태그의 기본 속성을 변경하는 CSS display 옵션
정확한 사이즈 버튼을 만들고자 할 때
이 방법은 클라이언트가 정확한 링크 버튼 사이즈를 요청했을 경우에 사용합니다. 링크 버튼을 단독으로 만드는 경우, 혹은 반응형 레이아웃 메뉴를 구축하고자 할 때 사용하면 용이합니다. 이 버튼의 핵심은 width와 height 값이 존재한다는 것입니다. 당연하겠죠? 정확한 규격의 버튼을 만들어야 하니까요. 이것도 마찬가지로 CSS 부분을 살펴보겠습니다.
/* 링크버튼2 */
a.ex2 {
display: block;
width: 133px;
height: 60px;
text-align: center;
line-height: 60px;
}여기에서는 display를 block으로 지정했습니다. 만약 이 버튼 다음에 오는 html 태그가 버튼 옆으로 반드시 위치해야 한다면 inline-block을 사용하면 됩니다. 혹은 float 옵션을 적용시키면 되겠죠. 블록요소를 사용한 이유는 링크버튼2가 위치하고있는 라인를 보시면 해당 링크버튼 외의 다른 요소들이 없습니다. 설령 있어도 블록요소의 성격상 줄바꿈이 발생해 아래로 밀리게 될 것입니다. 즉 링크버튼외의 다른 요소가 바로 옆에 위치하지 않도록 만들어주기 위함입니다. 블록요소의 특성 중 하나가 줄바꿈이 발생하는 것이기에 다음에 오는 HTML 요소는 버튼 아래로 보여지게 됩니다.
가로값인 width를 133px로 적용시킨 이유는 링크버튼1의 가로 크기와 똑같이 만들기 위함이지 다른 이유는 없습니다. 만약 클라이언트가 버튼의 가로 크기를 200px, 세로 크기를 80px로 만들어달라고 요청했다면 그렇게 입력하면 끝입니다. 매우 간단하죠? 텍스트를 가로축 기준으로 중앙 정렬을 시키기 위해 text-align: center;를 사용했으며 세로축을 기준으로 텍스트가 중심에 위치하게 만들기 위해서 line-height를 세로 크기와 동일하게 입력해 주었습니다. 단 line-height의 경우 텍스트가 반드시 한 줄이어야 합니다. 텍스트 양이 많아서 본문의 가로 크기보다 많아지면 아래로 밀리게 되는데 이때 line-height 값만큼 텍스트 가로줄 간격이 벌어집니다. 주의해 주시기 바랍니다. 보통 링크 버튼에 사용되는 텍스트 양은 적으니 line-height를 사용해도 큰 문제가 되는 경우는 없습니다. 끝.
