Select , input 커스텀
네이티브 셀렉트 박스의 디자인상 한계로 디자인적인 개성을 주기 위해
select 박스의 구조를 div 와 ul 요소등으로 치환해서 커스텀으로 구현하여 사용합니다
여러 CSS 플러그인에서 이렇게 커스텀으로 구현되어 나옵니다
과제와 수업으로 실습을 통해 select box 커스텀 구현을 진행 했습니다
<article class="cont-select">
<h2 class="txt-hide">최애 프로그래밍 언어를 선택해 주세요</h2>
<button type="button" class="btn-select">최애 프로그래밍 </button>
<ul class="list-member txt-ellipsis">
<li><button type="button">Python</button></li>
<li><button type="button">JavaScript</button></li>
<li><button type="button">C/C++</button></li>
<li><button type="button">C#</button></li>
<li><button type="button">Java</button></li>
</ul>
</article>
article 태그로 전체 범위를 묶고 접근성을 위해 h2 태그로 제목을 붙여줍니다
이 h2 태그는 txt-hide 클래스로 숨겨줄겁니다(IR 기법)
select, option 대신 div, ul, li 로 구현해줍니다
select list 구현 시 되도록 ul 태그에 클래스를 넣어주고 li 태그엔 넣지 않도록 해줍니다
(li 에 넣게 되면 하나하나 지정해 줘야 할 경우가 생기기 때문에)
기본 구조 결과는 위 사진 처럼 나왔고 CSS 를 적용해 줍니다
먼저 h2 를 가리기 위한 IR 스타일을 적용시켜줍니다.
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
네이버에서 사용하는 IR 기법을 적용하도록 하겠습니다
Image Replacemnt 테크닉은 디자인적으로 보이지 않지만 스크린리더나 브라우저를 위해
정보를 전달하는 텍스트를 숨겨두는 기법입니다
- PC용 사용된 이미지내 의미있는 텍스트의 대체 텍스트를 제공할 때
- Mobile용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때
- 스크린리더가 읽을 필요는 없짐나 마크업 구조상 필요한 경우
- 중요한 이미지 대체텍스트로 이미지 off 시 에도 대체 텍스트를 보여주고자 할 때
크게 4가지 상황에서 사용하고 쿠팡, 네이버, 다음 등 회사들마다 사용하는 형식이 다릅니다
이 글에선 이정도로 작성하고 따로 실사용 예를 캡쳐해서 비교해 볼 예정입니다
목표와 같도록 CSS 적용해줍니다
See the Pen Untitled by wonhyeonglee (@bigfile57) on CodePen.
icon-image 로 컨트롤 하는 부분은 JS 를 적용해야하고 이미지를 codepen 으로 걸기 힘들어 생략했습니다
그래도 설명을 하자면
.btn-select.on{
background-image: url(./icon-Triangle-down.png);
}
.btn-select.on+.list-member {
display: block;
}
.list-member{
/* display: none; */
margin-top: 20px;
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
}
기본적으로 삼각형 up 이미지를 background-image 로 표시해놨고 display: none 상태인데
click 반응을 JS 로 컨트롤 해서 click 반응 시 on 클래스를 추가해 이미지를 변경해주고 display: block 으로
list 내용들이 보이도록 구현 해놨습니다.
.txt-ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
정해진 크기의 박스에 컨텐츠가 길어질 경우 말줄임을 해주도록 하는 스타일 입니다
white-space 로 줄넘김 되도록 해주고
overflow: hidden 으로 숨겨주면서
text-overflow: ellipsis 를 이용해 넘어가는 부분을 ... 으로 표현합니다
임의로 텍스트를 추가해 테스트 해보면 왼쪽처럼 줄어듬을 확인 할 수 있습니다
이런 UI들을 구현할 때 재사용하기 쉽도록 모듈화 해서 어떤 크기로 붙이던 반응할 수 있도록 구현하는 것이
중요하다고 합니다.
'멋사 FE 과정' 카테고리의 다른 글
[0419/TIL] CSS Image Sprite 기법 + Retina 디스플레이 대응 (0) | 2022.04.19 |
---|---|
0418 TIL / CSS 설계기법, 실습 피드백 (0) | 2022.04.18 |
[멋사/css] Postition:fixed 와 sticky 의 차이 (0) | 2022.04.15 |
[멋사/CSS] Float 에 대해서 (단점과 해결 방법) (0) | 2022.04.13 |
[CSS] Vertical-align 에 대해서 (0) | 2022.04.10 |