html/css 깔끔한 파일선택 버튼 만들기

맛집의 음식사진을 등록하고 싶으면 위 사진의 파일 선택을 눌러 원하는 음식사진을 선택해주면 된다.

그런데 기본 파일 선택 버튼이 정말 예뻐 보이지 않았던 나는 조금 더 깔끔한 버튼을 만들고 싶었다.

 

기본 파일선택 버튼

<h1><div style="position:absolute; left:30px; top:50%;">
                3. 음식사진 등록</div></h1>
                <div class="rectangle2" style="top:58.5%;"></div>
            <div style="position:absolute; left: 40px; top:59%; ">
                    <div class="button">
                        <label for="file">
                            <p style="position:absolute; text-align:center;width: 100px;left:370px; border-bottom: 1px solid white; color:white; font-size:18px">파일 열기</p>
                        </label>
                    </div>
                    <input type="file" id="file" name="file" accept="image/*" onchange="setThumbnail(event);" required/>
                <div id="image_container"></div>

            </div>

따라서 html에서 이런식으로 label을 사용해서 새로운 파일열기 버튼을 만들고 

 

   /* 못생긴 기존 input 숨기기 */
#file {
  visibility: hidden;
  position:absolute;
  top:0%;
}

css에서 위의 코드의 visibility: hidden;을 이용하여 원래 기본의 파일선택 버튼을 숨겼다.

 

그 후 약간의 위치조정을 해준...

 

그 결과...!!

 

깔끔한 파일 열기 버튼

깔끔하고 예쁜 파일 열기 버튼이 보인다 ㅎㅎ!

 

 

프론트엔드로서 코드를 짤 때마다, 직접 사용자가 보는 화면인만큼 보다 더 깔끔하고 보기에 편안한 화면을 만드는 것이 중요하다고 생각했는데, 버튼 하나로 메뉴 등록 화면이 더 세련되어 보이는 효과가 생겼다. 이러한 작은 요소들 하나하나가  화면의 퀄리티, 나아가 웹 전체의 높은 퀄리티에 기여하는 것 같다!