[211231] clone_네이버 회원가입폼 / select, option, ::focus

footer 정렬 맞춤

밑에 배경색이 잘린거는 wrap에만 넣어서 그럼. body에 색 넣어야지

 

---

 

팝업메뉴

저 아래 화살표 표시는 어떻게 넣나 코드 보니까 아이콘이 아니었다. 심지어 ul, li도 아니었음. 목록은 option이었고, 화살표는 background로 들어가는 이미지였음. 홀리몰리.

 

 

---

 

다들 알았는가. background에도 position이 있음을. 

나는 방금 알았다.

심지어 사이즈도 조절이 가능하다.

#header > h1 > #logo{
    display: block;
    margin: 0 auto;
    width: 240px;
    height: 44px;
    background-image: url('../img/logo_naver.png');
    background-repeat: no-repeat;
    background-size:240px auto;
    background-position: 0 0;
}

 

---

 

option

See the Pen option by supermint (@ma_ad_shouri) on CodePen.

이런식으로 구현됨

 

---

 

펼쳐지는 메뉴 만들기 : select와 option 그리고 label

 

background로 평화롭게 이미지를 넣고있다가 이미지 겹침 효과가 갑자기 일어났다. 저는 이미지를 한번밖에 안 넣었는걸요...?

 

 

이미지를 주석처리해도 남아있다.

모든 효과를 지워도 망령처럼 남아있는 이미지는 대체 뭐지.

 

 

 

css를 까보았다.

<span class="txbox">
	<select id="month" class="sel"></select>
</span>

.txbox{ // 겉의 하얀 박스
    position: relative;
    display: block;
    width:100%;
    height: 51px;
    background: #fff;
    padding:10px 14px;
    border: 1px solid #dadada;
    box-sizing: border-box;
}

#month{ //드롭다운 메뉴 중에서 '월'을 넣을 것이다
    background:#fff url(../img/sel_arr.gif);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: 20px 8px;
}

.sel{ //드롭다운 아이콘에 공통적으로 적용할 효과
    width: 100%;
    height: 29px;
    font-size: 15px;
    color: #000;
    border:none;
    border-radius: 0;
}

왜요 뭐가 문젠데요 저는 착하게 문법을 준수했다구요

 

허허허 찾았다. 혹시 임시저장 공간이 있는걸까 뭐지-하면서 구글링을 해본 결과, 없는 이미지가 심지어 중복으로 올라온다는 결과를 찾지 못했다. 이미지 잔상까지도 검색해보다가 fix css bug background-image를 검색했는데, 'in chrome'인 단어를 발견했다.

크롬?? 인 크롬?? 다른 브라우저에서는 안 그래???

 

 

사파리에 렌더링을 해본 결과,

저게 이미지가 아니였다. select로 생긴거였어.. 크롬에서는 이미지랑 똑같이 떠서 이게 뭔가 했다 진짜.

한시간 동안 알차게 구글한걸로 만족하자.

 

select를 다른 버튼이랑 연결래서 메뉴를 열 방법이 내 지식 선에서 안되는디...? 제이쿼리가 나와. 살려줘요.

• checkbox랑 label을 만든다.
• select를 display:none;을 해서 label이랑 연결을 한다.
• checked이면 select가 열린다!

가 하고 싶었는데 말이지요 왜 인접접근자를 써도 안될까요. 팝업처럼 나타나는거랑 다른가.

다시 단순하게 생각해보자. 교수님은 지금껏 배운걸로 충분히 회원가입창 정도는 만들 수 있다고 하셨다. 할 수 있는데 내가 너무 멀리 돌아간건 아닐까. 처음부터 다시 입력해보자. 우선 드롭다운 메뉴 먼저 만들자.

 

---

 

select 박스의 화살표 없애기 : appearance

 

select에서 -webkit-이란 글자를 발견. 

• -webkit- : 구글, 사파리
• -moz- : 파이어폭스
• -ms- : 익스플로러에 적용, 보통 생략함
• -o- : 오페라 브라우저

 

 

각 브라우저에는 서로 다른 기본값이 존재한다. 그러기에 각 브라우저별로 효과를 제거할 수 있는 접두어가 나온 것이다. 물론 한꺼번에 없애는 효과도 가능하다. appearance : none만 선언해주면 된다. 차근차근하면 모든지 됩니다-라고하지만 침착하기까지 2시간 걸림. 

.txbox > select{
    display: block;
    width:100%;
    height: 100%;
    border: none;
    font-size: 15px;
    appearance: none; // 찾아낸 내자신 칭찬해
    background: #fff url("../img/sel_arr.gif") 100% 50% no-repeat;
    background-size: 20px 8px;
 }

참고사이트 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/option

참고사이트 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/select

 

 

---

 

클릭하면 효과가 주어지는 ::focus

네이버 입력박스를 클릭하면 초록색으로 바뀐다. 검색해보니 focus로 가능하단다. background-image로 바꿔야하나 싶어서 머리가 터지는줄 알았는데 다행이다. 아니란다. 똑똑한 개발자 선배들이 만들어 놓은 좋은 기능이 있었다. 고마워요 이름 모를 개발자 선배.

See the Pen focus by supermint (@ma_ad_shouri) on CodePen.

 

 

---

 

 완성본

 

이제 한번 더 해봐야지