오류노트

쿠고냥(KuruCat)·2022년 6월 8일
0

포트폴리오 웹사이트 제작와중, sticky속성을 이용하여 왼편의 메뉴바를 고정시킬수 있도록 css를 만지고 있었는데, 적용이 안되는 상황이 발생했다. 그래서 온라인 서치 후 부모속성조건과 여러 요소들을 수정했음(이 때, sticky속성에는 top, bottom ,left,right 중 한가지 속성을 반드시 줘야 고정된다는 사실을 알았다.)에도 고쳐지지 않아 난해해하던 와중 sticky속성을 선언한 곳에 display:flex ,flex-direction속성을 제거했더니 문제가 해결되었다...(...) 왜 해결되었는지는 아직도 모르겠다. 저 속성을 왜 추가했는지도 모르겠다.


게시판 포트폴리오를 작성하던 와중에, 새로운 게시판을 생성할 수 있는 버튼을 누르면,
팝업창처럼 밑에서부터 게시판작성창이 튀어나와 입력할 수 있는 구조로 만들어보고 싶다는 생각이 들었다.
그래서 해당 게시판 작성 conponent를 만든 뒤에 레이아웃에 이 콤포넌트를 배치하려고 하는데,
원하는 대로 구현되지 않아 난항을 겪었다.
이 콤포넌트를 현재페이지의 wrapper태그 안에 넣으면 원하는 옵션에 있어 css가 제대로 동작하지 않는 문제가 발생하였다.
이에 관련해 비슷한 방식으로 작성폼을 지원하고 있는 여러 사이트를 서치한 결과,
현재 보고있는 html엘리먼트 의 자식엘리먼트로 이 콤포넌트를 넣는게 아니라, 새로운 형제 엘리먼트를 생성한뒤, 이 엘리먼트를 z-index로 위로 쌓은다음, fixed포지션으로 뷰포트기준으로 크기와 위치를 고정시킨 다음에 그 안에 자식 엘리먼트로 원하는 게시물작성 콤포넌트를 넣었더니 제대로 동작하였다.

profile
FEdeveloper목표로 공부중

0개의 댓글