셀렉트박스 커스텀(select box custom) ul, li로 만들기

셀렉트박스 커스텀(select box custom) 실습을 해보았다.

코드 리뷰하면서 분석해본다음에

스스로 다시 한번 써볼 예정이다.

 

완성본은 일단 아래와 같이 생겼다.

See the Pen Untitled by 듀 (@jgvoseid-the-styleful) on CodePen.

 

 

h2 {
	margin: 30px;
}

.cont-select {
	width: 200px;
}

피그마 수치대로, article 전부에

width: 200px 값을 주었다.

 

버튼 넓이 자체는 반응형으로 늘어나지 않아도 되니까

고정값인 px을 준다.

 

셀렉트박스 커스텀(select box custom)할 때,

디자이너 분이 피그마 수치를 

준다는 가정 하에 진행했다.

 

        .btn-select {
            width: 100%;
            /* 위에 부여한 200px의 100%부여  */
            /* 콘텐츠가 늘어나도, 100%보다 더 안 늘어난다. */
            
            padding: 12px; 14px;
            /* 일단 피그마수치대로 적용, 말줄임 옵션 때문에 조정할 예정  */
            
            font-size: 12px;
            line-height: 14px;
            /* height값은 주지말고 대신 라인하이트 */
            /* 반응형 구현할때는 height 되도록 주지 않는다 ★ */
            
            background-color: #fff;
            border: 1px solid #C4C4C4;
            box-sizing: border-box;
            border-radius: 10px;
            
            /* 피그마 수치대로 적용  */
            
            cursor: pointer;
            text-align: left;
            
            /* width 100%주는 순간, 자동정렬되어버림  */
            * text-align으로 left로 붙도록 재배치  */
            
            background: url("images/icon-Triangle-down.png") center right 14px no-repeat;
            
            * select box 화살표 부분 배치  */
            
            /* 말줄임 */
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            
        }

 

        .btn-select 클래스 부분의

기본 버튼 디자인을 만들어주었다.

 

수치는 임의로 정하지 않았고,

figma 링크가 있어서 적혀진 그대로 썼다.

 

말줄임은 js나 다른 프로그램 쓰지 않고

css로만 구현했다.

 

※ 아래 글 참고

 

2021.11.27 - [IT 공부/프론트엔드(Front-end)] - css에서 말줄임('...') text-overflow: ellipsis; 로 처리하기

 

말줄임표 효과때문에,

화살표 img와 거리가 겹칠 수 있다.

 

     padding: 12px; 14px; 값을

padding: 13px 30px 13px 14px; 값으로 수정해준다.

 

(포스팅 맨 위의 셀렉트박스 커스텀(select box custom)

html+css 전체코드를 참고해보자.)

        .btn-select:hover,
        .btn-select:focus {
            border: 1px solid #9B51E0;
            outline: 3px solid #F8E4FF;
        }

hover: 마우스 갖다 댄 순간만 작동

focus: 텍스트를 클릭하고, 마우스를 움직여도

또 다른 click 전까지 효과 유지!

 

→ 둘 다 설정하면, hover할 때도 

클릭했을 때도 발동한다.

 

outline: border 바깥의 효과

 

        .cont-select {
            position: relative;
            width: 200px;
            */ 위쪽에 relative 선언 추가해주기 */
        }
        
        .list-member {
            display: none;
            position: absolute;
            width: 100%;
            top: 49px;
            left: 0;
            border: 1px solid #C4C4C4;
            box-sizing: border-box;
            box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }

 

셀렉트박스 커스텀(select box custom)

- 아래 list 부분을 버튼처럼 꾸며주는 부분!

 

display: none;

(이걸 줘야 list 부분이 안 보이게 되면서

위로 접힌다.)

 

- 피그마 수치대로, top으로 49px만큼 올리고,

left: 0;으로 딱 붙인다. (display: none;)

 

- '최애 프로그래밍 부분' (cont-select class)을 기준으로

absolute를 잡아준다.

 

→ 접히는 이유:

'프로그래밍' 버튼 기준으로 위치가 잡힌다(absolute)

거기에서 top: 49px, left: 0;만큼 위치가 잡히고

display: none;으로 가려주는 것!

 

        .btn-select.on+.list-member {
            display: block;
        }

 

block 처리를 해줘야 클릭했을 때

아래로 떨어져 내려온다.

 

반응형

 

        .list-member li {
            height: 40px;
            padding: 5px 8px;
            box-sizing: border-box;
        }

list들 사이의 간격을 조정해준다.

 

        .list-member li button {
            width: 100%;
            padding: 7px 10px;
            border: none;
            background-color: #fff;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        
        .list-member li button:hover,
        .list-member li button:focus {
            background-color: #F8E4FF;
        }

list 내의 "button" class들 커스텀하기

 

background에 흰색을 주지 않으면,

이런 식으로 변한다.

 

개발자도구에서 하나씩 끄고 켜보면서

어떤 역할을 하는지 찾아봤다.

 

마지막에 white-space: ellipsis부터

overflow:hidden은 말줄임 속성을 위함!

 

.list-member li button {
    position: relative;
    width: 184px;
    height: 30px;
    left: 8px;
    top: 5px;
    background-color: #fff;
    border-radius: 8px;
    border: none;
    text-align: left;
}

 

container의 padding 값으로 위치 잡기

(작성 시 주의해야할 것들 )

 

위와 같은 코드는 지양하기.

 

li button에 relatvie를 줘서,

안에서 버튼의 위치를 position으로 이동시켰다. (금지)

 

※ 포지션은 한번 정해지면 거기서 고정이 된다.

안에 있는 콘텐츠가 바뀌었을 때 

유연하게 대처하기 위해서 다음과 같은 방법을 쓴다.

 

※ 해결 방법: 

안에서 position 값으로 잡기 (x)

container의 padding 값으로 위치 잡기.

 

→ 위치 설정할 때 padding 쓰기

 

※ padding 쓸 때, 왜 box-sizing: border box를 쓸까?

 

2021.11.29 - [IT 공부/프론트엔드(Front-end)] - padding 부모 벗어남, 사이즈 변경 문제를 해결하는 box-sizing

 

해결방법

        .list-member li {
            height: 40px;
            padding: 5px 8px;
            box-sizing: border-box;
        }

        .list-member li button {
            width: 100%;
            padding: 7px 10px;
            border: none;
            background-color: #fff;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

 

높이값 주지 않고, width만 주기

height를 빼줘야, 콘텐츠 길이가 바뀌어도

li가 알아서 늘어난다.

(아래 코드 참조)

        .btn-select {
            width: 100%;
            padding: 13px 30px 13px 14px;
            font-size: 12px;
            line-height: 14px;
            background-color: #fff;
            border: 1px solid #C4C4C4;
            box-sizing: border-box;
            border-radius: 10px;

            cursor: pointer;
            text-align: left;
            background: url("img/triangle_down.png") center right 14px no-repeat;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

 

※ 아무것도 없는 ul, li 부분을

버튼처럼 꾸며보았다.

셀렉트박스 커스텀(select box custom) 실습 복습 끝!