물어보기작업관련

글 제목이 좀 긴데,

 

여기 XETOWN 로그인 윈도우에서

 

이메일 주소 input box를 클릭하면 placeholder text인 '이메일 주소'글자 크기가 작아지면서 input box 좌상단에 표시되는데

 

이 기능 어떻게 구현하는 건지 궁금합니다 ㅎ

 

멋있어 보여서 제 웹에도 넣고 싶네요.

 

 

위와 같은 걸 처음 본 건 아이허브(iherb.com) 사이트였는데, 그때부터 신기하더라구요 :)

 

  • profile
    attorney 2018.04.24 13:28:32
    자문자답하네요 ㅎ
    https://stackoverflow.com/questions/35942247/how-to-move-placeholder-to-top-on-focus-and-while-typing

    위 링크에 있는 방법 맞나요? 자바스크립트 기능일 줄 알았는데, CSS를 이용하는 거네요.

    https://jsfiddle.net/273ntk5s/2/
  • profile
    기진곰 2018.04.24 13:32:45
    네, 최신 브라우저에서는 CSS만으로도 구현이 가능합니다.
  • profile
    기진곰 2018.04.24 13:32:12

    구글에서 몇 년 전부터 안드로이드 표준으로 밀고 있는 "머테리얼 디자인"의 일부입니다.

    머테리얼 디자인을 구현한 라이브러리와 연동하면 됩니다.

    비슷비슷해 보이는 사이트들 대부분이 이런 것을 사용하고 있지요.

     

    예) http://materializecss.com/text-inputs.html

  • profile
    attorney 2018.04.24 13:38:24
    상담히 깔끔해보이네요. 그런데 라이브러리와 연동이라... 품이 꽤 들거 같군요. 익숙하지 않은 용어들도 보이고..
    알려주셔서 감사합니다.

서버에 요청 중입니다. 잠시만 기다려 주십시오...