CSS를 이용해 앱스토어와 비슷한 버튼(링크) 만들기

이번 포스트는 CSS를 이용해 앱스토어와 비슷한 버튼(링크) 만들기에 대해서 알아보도록 하겠습니다.

제목에서 이미 인지 하셨겠지만, 아이튠즈 앱스토어에 보면 다운로드 링크 버튼이 존재합니다.

이 버튼은 이미지로 처리되고 있지만 이를 html + css 만으로 작성할 수 있을까? 에 대한 궁금증이 있을 수 있습니다.

결론을 말씀드리자면 "가능하다" 입니다.

물론 세세히 색깔까지 맞춰가며 작업하는덴 어려움이 있겠지만 비슷한 느낌으로는 가능하지 않을까 싶어 시작해 봤습니다.

목표

css 를 이용해 앱스토어 버튼과 비슷한 버튼을 만들어 볼 대상은 다음과 같습니다.

맥용 응용프로그램을 받은로드 받기 위해서는 앱스토어에 접속했을때 위와 같은 링크가 나타날 수 있습니다.

위 버튼과 비슷한 링크 버튼을 만들어 보고자 합니다.

HTML

우선 링크 또는 버튼으로 제공하고 있으니 동일하게 링크로 제공하고자 A 태그로 작성 합니다.

<a html="TARGET">Mac App Store 에서 보기</a>

CSS

1. 글자색 변경하기

상단 목표 영역의 이미지를 자세히 보면 글자색은 흰색 같이 보이지만 완젼한 흰색(#FFFFFF)은 아닙니다. 

하지만 전 흰색으로 처리해 보도록 하겠습니다.

배경이 흰색이다보니 글자색이 나타나지 않습니다.

배경색을 변경해 글자가 보일 수 있도록 해볼까요.

2. 배경색 적용하기

앱스토어의 배경색은 그라데이션이 적용되어 있어 차이는 있을 수 있지만 그래도 중간쯤 색을 얻어 적용해보도록 하겠습니다.

Monosnap 응용 프로그램을 이용해 포인트 영역의 색을 얻어올 수 있습니다.

이렇게 버튼의 중간 영역의 색을 확인해 보았습니다. 색의 값은 #418FDC 이며 이를 이용해 배경 색을 적용하도록 하겠습니다.

이와 같이 background 값을 적용하여 배경색과 폰트의 색상을 적용하였습니다.

3. 테두리 적용하기

좀더 자세히 확대해 보시면 테두리가 있습니다.

테두리 색상은 위 2번과 같이 색을 얻어 적용합니다.

border 속성을 이용해 테두리 색상을 적용하였습니다.

4. 테두리 둥굴게 하기

현재 진행중인 링크의 테두리 모습은 각진 형태로 앱스토어의 둥글한 모습과는 다릅니다.

이를 앱스토어의 버튼과 동일한 둥근 모습으로 적용하도록 하겠습니다.

border-radius 속성으로 모서리를 둥글하게 표현할 수 있도록 해주며 50px 의 값을 주어 여유있게 적용하였습니다.

만일 작업하시다가 버튼이 커 둥글한 모습이 나오지 않는다면 50px 보다 더 큰 값을 정의하시기 바랍니다.

5. 여백

"Mac" 단어 왼쪽과 과 "보기" 의 오른쪽 옆 그리고 상/하 여백이 없이 붙어 있어 비교했을때 차이가 있습니다.

즉, 상/하/좌/우 여백을 적용하도록 합니다.

padding 속성 상/우/하/좌 순으로 여백 값을 정의할 수 있습니다. 즉, padding : 0px(상단) 0px(우) 0px(하) 0px(좌) 와 같이 적용할 수 있습니다.

하지만 위 이미지에서 적용된 값을 보면 5px 10px 2px 이라고 정의되어 있는데 의미는 다음과 같습니다.

• 첫번째 5px 의 의미는 상단 여백을 5px 로 정의한다.

• 두번째 10px 은 좌/우 여백을 10px 로 정의한다.

• 세번째 2px 은 하단 여백을 2px 로 정의한다. 

로 해석할 수 있습니다.

이를 풀어서 해석하면 padding : 5px 10px 2px 10px 과 동일합니다.

6. A 링크 하단 줄 제거

각 홈페이지 및 블로그에서 A 링크에 대한 style 을 어떻게 정의했을지 알 순 없지만 기본 링크임을 인지시키기 위해 하단에 줄이 적용된 경우가 많습니다. 

물론 제 블로그에도 하단 줄이 적용되어 있어 이를 제거해야 하는데 이는 text-decoration 속성으로 제거가 가능합니다.

7. 글자 크기 변경

앱스토어의 글자 크기는 어느정도로 지정했는지 정확히 알 수 없습니다.

다만 정확히 알 수 있는건 지금 작업중인 글자 크기보다는 작다는것입니다. 예측컨데 9px 정도가 적당하지 않을까 싶어 9px 로 적용하고 비슷하게 생각하는 sans-serif 폰트로 적용해 보도록 하겠습니다.

이제 조금씩 비슷해 져가고 있는것 같습니다.

8. 그라데이션 적용

앞서 배경은 그라데이션이 적용되어 있다고 말씀 드렸습니다.

하지만 그라데이션의 색상은 % 형태로 적용되어 있어 색상을 꼭 찝어 적용하기엔 어려움이 있어 비슷한 색상으로 적용하도록 해야 합니다.

저는 바닥 영역의 색을 #3481CD 와 상단을 #6BB5E4 값으로 그라데이션을 적용하도록 처리하였습니다.

아래 이미지를 보시면 기존 배경색을 적용했던 곳에 중간에 취소선이 적용된 상태입니다. 이는 그라데이션 배경을 우선적으로 적용하고 기존 적용했던 배경은 취소하겠다는 의미로 생각하시면 됩니다.

또한 -webkit 이라고 prefix 값을 확인하실 수 있는데 이는 브라우저마다 엔진이 다르며 제가 적용중인 크롬 브라우저는 웹킷 엔진으로 -webkit prefix 가 적용됩니다.

추가로 오페라는 -o , 파이어폭스는 -moz, ie 는 -ms, safari는  -webkit 이 적용됩니다.

다시말해 -webkit 만 적용한 상태에서 ie 에서 확인하면 그라데이션이 아닌 2번에서 적용한 단일색으로 표현됩니다.

9. box shadow 적용하기

매의 눈이시라면 또한가지 숨겨진 색상을 찾을 수 있습니다.

그것은 테두리 밖 그림자와 테두리 안쪽 색상이 다르게 표현되고 있습니다. 

이와 같이 그림자와 안쪽 라인을 추가해 보도록 하겠습니다.

추가된 부분은 box-shadow 속성이며 0px 1px 2px #A8A8A8, inset 0px 1px 0px #6DB8E7 의 값으로 적용되어 있습니다.

우선 0px 1px 2px #A8A8A8 의미는 #A8A8A8 색상으로 2px 정도의 blur 값으로 하단 1px 정도 내려 적용한 형태를 의미하며,

또한 inset 0px 1px 0px #6DB8E7 은 동일하게 #6DB8E7 색상으로 하단 1px 정도 내려 테두리 안쪽에 적용을 의미합니다.

결과

위 이미지중 왼쪽은 제가 직접 작업한 결과물이며 오른쪽은 앱스토어의 버튼 이미지 입니다.

색상이나 그라데이션 면에서 차이가 있을 수 있지만 Monosnap 응용 프로그램을 이용하면서 색상 하나하나 맞추다 보니 쉬운일이 되지 않을것 같아 눈대중으로 대충 작성하게 되었으니 이점 이해 부탁 드립니다.

이번 포스트는 CSS를 이용해 앱스토어와 비슷한 버튼(링크) 만들기에 대해서 알아봤습니다.

페이스북(@mobile), 트위터(@mobile_issue) 계정을 팔로우
하시면 실시간으로 정보를 제공 받을 수 있습니다.

로그인이 필요 없는 추천(하트) 으로도 블로그 주인에게 힘이 됩니다.
많은 응원과 격려 부탁 드려요.