게시물 주소 복사 기능을 좀 예쁜 모양으로 만들고 싶어요.

안녕하세요!

PHP/자바스크립트 신생아 수준도 못되는 사람 입니다. ㅠㅠ

html에 대한 지식은 html2에 정체되어 있고, CSS가 뭔지도 모릅니다.

그래도 뭔가 배워보려 하고 찾아보려 노력하는 중이니 조금만 자세히 고견 들려 주시면 감사드리겠습니다...

게시판에서 게시물 열람 시 게시물 주소 복사 기능이 있으면 좋겠다 싶어서...

열심히 구글링을 하여 아래 코드를 게시판 스킨에 삽입 했습니다.

게시판은 스케치북5 스킨 사용 중 입니다.

스킨 폴더의 _read.html 파일을 열어서

51번라인

                <!--// 제목 밑 커스텀 위젯 등 영역 -->
                {$mi->rd_hd_widget}

커스텀 위젯 영역 바로 아래에

                <!--게시물 주소 복사-->
                <div class="side">
                <input id="url_field" type="url" value="{$oDocument->getPermanentUrl()}" readonly="readonly">
                <input id="copy_btn" type="button" value="복사">
                <script>
                var copyBtn = document.querySelector('#copy_btn');
                copyBtn.addEventListener('click', function () {
                var urlField = document.querySelector('#url_field');
                urlField.select();
                document.execCommand('copy'); // or 'cut'
                }, false);
                </script>
                </div>
                <!--게시물 주소 복사 끝-->

의 코드를 삽입 했습니다.

PC와 모바일 모두 원하는 기능이 구현되긴 했습니다만...

모양이 너무 안이뻐서요...

폼 필드와 주소 폰트를 좀 작게(닉네임 사이즈 만큼 작게...) 만들고 버튼도 좀 예쁘게(제 수준에서 예쁘게가 어렵다면 좀 작게라도...) 만들고 싶은데 방법을 몰라서 이렇게 여쭙습니다...

구글링 해다 소스 복사해다 붙여넣고 수십번 수정해서야 저정도 구현 해 내는 정말로 이쪽에 관해 전혀 문외한이니...ㅠㅠ

부디 저로서도 쉽게 따라 할 수 있는 고견 부탁 드립니다...