유튜브 클론코딩중인데 이부분은 어떻게 해야할까요?

Question

현재 html css js 공부중이고 유튜브 클론코딩중에 있습니다.백엔드같은건 배우지 않아서 일단 껍데기만 구현해보려고하고있는데요,유튜브 검색창 구현중 막힌부분이 있어 질문드리비다.위가 본 유튜브 사이트이고 아래가 제가 구현한것인데보시다시피 본래는 검색창에 포커싱을 하면 검색창이 위치와 길이는 유지된채 왼쪽에 돋보기가 확장되면서 나타나는데요,저는 비슷하게 하려고 검색창따로, 왼쪽에 돋보기 부분을 따로 구현하여 display:none을 한후 자바스크립트에서 포커싱되면나타나게 하는 그런걸로 생각했는데..해보니 검색창 포커싱과 동시에 돋보기가 나타나면서 검색창 위치가 살짝 변경이 됩니다.이부분이 문제인데 검색창 위치를 고정하면서 왼쪽 돋보기부분만 확장또는 나타나게 할 수 있는 방법이 뭐가 있나요?

BGProgramming · Accepted Answer

display : none 은 해당 엘리먼트가 사라지면서 보이지 않게 됩니다.위치는 차지하면서 요소를 보이지 않게 하려면 visibility : hidden 이나 opacity : 0 를 사용할 수 있습니다.

풍월상신(가니메디안) · Answer

뭔 visibility???? 아.. 참 처참해지네요css transition 을 공부하세요.

유튜브 클론코딩중인데 이부분은 어떻게 해야할까요?

2개의 답변

기술 목록