Input 태그 애니메이션 분석 편

아직 직접적으로 복잡한 애니메이션을 구현할 실력은 안되지만 !

인터넷엔 많은 정보가 있다 ㅎ3ㅎ

원하는 효과를 찾아 그냥 ctrl + c / v만 하는건 재미도 없고 실력도 늘지 않을 테니

분석해서 포스팅 하는 카테고리를 만들어 봤다. 😚

첫번째로 만나볼 친구는 Input 태그의 CSS 효과이다.

참고 : https://codepen.io/andreasstorm/pen/gKGbxo

webkit 관련 속성들은 되도록 빼면서 한줄씩 분석했다.

( webkit이 나쁘다는게 아니라 익스플로러는 되지 않으니 최대한 호환 되게끔... )

코드는 해당 참고 사이트에서 보면서 같이 분석해주시면 감사하겠다. XD

위에서부터 처음 만나는 친구들을 정리해 놓으려고 한다.

box-sizing: border-box;

해당 속성을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않고 사이즈를 조절할 수 있다.

max-width: 280px;

width도 지정했는데 왜 따로 해주나 했더니 반응형 웹에 필요한 !

영어 그대로 최대 크기 설정이다.

.inp input:not(:placeholder-shown) + span

처음 보는 긴 선택자에 놀랐다.. CSS가 결코 쉽지가 않은 녀석이었어..😂

해석해 보자면 (:placeholder-shown)이 아닌 input 태그를 따르는 span태그를 선택하고 있다.

CSS선택자 참고 URL : http://www.nextree.co.kr/p8468/

+) 항상 햇갈려서 찾아 보는 position...

부모 노드의 position이 relative 그리고 그 해당 자식 노드의 position을 absolute를 주게 되면

부모 노드를 기준으로 자식 노드의 위치를 설정할 수 있다.

input 태그 클릭시 .border은 scaleX(0)에서 scaleX(1)로 바뀌며 파란색으로 표시 되며,

label은 transform: translateY(-26px) scale(0.75); 을 통해 위치와 크기를 변경하고 있다.

CSS 하단의 선택자를 보면 input태그를 기준으로 모두 변화된다.

어떤 것을 클릭했을 때 다른 엘리먼트에 변화를 주고 싶다면 자바스크립트나 jQuery로만 할 수 있을 줄 알았는데

CSS에서도 가능하다는 것을 알게 된 계기다...

CSS가 마냥 간단한 것인줄 알았는데 좀더 깊이 공부 할 수 있는 책을 볼 필요가 있을 것 같다. 😪