회사 업무중에 Play button 모양을 이미지가 아닌 코드로 만들라는 요청이 있어서 만들게 되었습니다.


역시나 찾아보니 이에 해당되는 소스코드가 있더군요.


http://codepen.io/stevenfabre/pen/DvBei

CSS3 PLAY/PAUSE BUTTON


그러나 이 코드는 Play/Pause 를 클릭 여부에 따라 번갈아서 실행하며, CSS3 애니메이션까지 들어가 있어서 코드는 읽기 쉽지 않은 편입니다.


여기서 Play button 모양을 구현하는 부분만 가져와서 적용해야 했죠.






결론적으로 Play button을 만드는 방법은 다음과 같습니다.


css상에 margin을 준 것은 간단한 빈 페이지에 margin을 주지 않으면 안예뻐 보여서 넣은 것이고, 그 외 다른 코드들은 전부 필요한 코드들입니다. width와 height는 주지 않아도 모양은 나오지만, 나중에 다른 요소들과 활용할 것을 생각하면 넣는 것이 좋습니다.


<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

.play{

margin:150px 300px;

border-top:100px solid transparent;

border-bottom:100px solid transparent;

border-left:150px solid #333;

width:0;

height:0;

}

</style>

</head>

<body>

<div class="play"></div>

</body>

</html>


그 결과는 다음과 같습니다.



border-top, border-bottom, border-left의 사이즈를 변경시켜서 삼각형의 크기를 변경할 수 있습니다.


그런데 어떻게 저렇게 간단한 코드만으로 저런 효과가 나타날 수 있을까요?


이 코드를 조금만 변형시켜 보면 그 이유를 금방 알 수 있습니다.


<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

.play{

margin:150px 300px;

border-top:100px solid transparent;

border-bottom:100px solid transparent;

border-left:150px solid #333;

border-right:150px solid #333;

width:300px;

height:200px;

}

</style>

</head>

<body>

<div class="play"></div>

</body>

</html>



이 결과를 개발자 모드에서 분석해보면 그 이유를 금방 알 수 있습니다.


그러니까 원래는 한 요소의 border의 일부분인데, width와 height를 없애고 border-left의 일부분만 색깔을 넣어 보이게 해서 play button의 모양을 만든 것입니다.






결론적으로 말해서 css로 play button을 만드는 것은 쉽습니다. 굳이 css3가 필요하지도 않아요.


하지만 Play/Pause를 번갈아가면서 애니메이션까지 넣어야 한다면 CSS3로 꽤 복잡한 코드가 필요하며, 요구사항에 맞게 변형시켜서 써야 할 것 같습니다. 만약 그런 경우라면 맨 위쪽에 예제 코드 정도 수준이 필요할 것 같네요.





댓글을 달아 주세요

티스토리 툴바