나눔웹 퍼블리싱 꿀팁
촌스러운 '파일 선택' 버튼, 복잡한 꼼수 없이 예쁘게 디자인하기
문의 게시판이나 이력서 제출 폼(Form)을 만들 때, 가장 디자인하기 까다롭고 눈에 거슬리는 요소가 바로 [파일 선택] 버튼입니다.
브라우저가 억지로 집어넣은 투박한 회색 3D 버튼을 숨기기 위해, 과거에는 진짜 입력창을 숨기고 가짜 버튼(Label)을 만들어 덮어씌우는 복잡하고 무거운 꼼수를 썼습니다.
💡 가짜 버튼(꼼수)을 쓰면 안 되는 이유
시각장애인이 사용하는 스크린 리더기나 키보드(Tab 키) 이동 시, 숨겨진 요소는 제대로 읽히지 않아 웹 접근성(Accessibility)에 치명적인 결함을 발생시킵니다. 겉모습만 예쁘고 속은 곪아있는 사이트가 되는 지름길입니다.
1. 모던 CSS의 축복: ::file-selector-button
이제는 HTML 태그를 더럽힐 필요가 없습니다. 모던 CSS에 새롭게 추가된 ::file-selector-button 가상 요소를 사용하면, 오직 그 투박한 '회색 버튼 알맹이'만 콕 집어서 완벽하게 디자인을 덮어씌울 수 있습니다.
/* 첨부파일의 못생긴 회색 버튼을 나눔웹 스타일로 예쁘게 바꿉니다 */
input[type="file"]::file-selector-button {
background-color: #111111; /* 세련된 블랙 배경 */
color: #ffffff; /* 글씨는 흰색 */
border: none; /* 촌스러운 테두리 제거 */
border-radius: 8px; /* 요즘 스타일로 둥글게 */
padding: 10px 20px; /* 넉넉한 클릭 영역 */
margin-right: 15px; /* 옆에 뜨는 파일 이름과의 간격 */
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease; /* 부드러운 애니메이션 준비 */
}2. 마우스를 올렸을 때(Hover)의 고급스러움 추가
버튼 디자인의 완성은 마우스를 올렸을 때의 반응(Hover)입니다. 이 가상 요소에도 동일하게 마우스 오버 효과를 적용할 수 있습니다.
/* 버튼에 마우스를 올리면 나눔웹의 레드 컬러로 부드럽게 변합니다 */
input[type="file"]::file-selector-button:hover {
background-color: #cc2b2b;
}"진정한 하이엔드는 보이지 않는 구조(접근성)까지 아름답습니다."
나눔웹은 겉보기에만 화려한 꼼수 코딩을 배제하고, 시각적 아름다움과 웹 표준 규칙을
동시에 만족시키는 가장 정교하고 올바른 프론트엔드 환경을 구축합니다.