요즘 웹 디자인 트랜드 중에 하나가
"뉴모피즘"이다.
그래서 최근 내 개인 포트폴리오 사이트를 약간의 맛 효과만 적용하기 위해 "backdrip-filter"를 다양한 곳에 사용하며 코딩을 하였다.
PC버전에서는 얼추 완료가 된듯하여 모바일을 진행하던중
모바일 반응형으로 만든 메뉴 nav의 적용한 position:fixed가 먹질 않는것이였다.
Html과 CSS의 아므리 보아도 문제 될것이 없는데...왜 안되는 것인지...1시간 가까이 사투 끝에 결국 문제점은 찾앗으나
원천적으로 CSS의 오류라고 밖에 생각이 안든다.
PC화면에서는 nav영역이 position:sticky 되어 있다.
모바일 사이즈로 반응하면 position:fixed로 코딩을 하였는데...
모든 브라우저에서는 fixed값은 정상 적으로 호출되어 있는데도 불구하고.
제 역활을 못하는 것이였다.
결국
해결은 fixed는 backdrip-filter를 사용하는 Html 태그의 안에 사용할 경우 역활을 구현하지 못하는 것을 찾았고.
Html 구조를 변경하여 문제점을 해결 하였다.
그런데 이 것또한 좀 이상한 것이 비슷한 방법으로 사용한 적이 최소 1번 이상 있었던 것 같은데.
왜 이런 사실을 지금 처음 안 것일까...ㅠㅠ;
CSS 업데이트의 문제 인가 아님 브라우저 엔진의 문제인가...ㅠㅠ;
정확한 해결은 전문가 분들이 이 글을 본다면 해결을 해 주었으면 합니다...^^;
참 그리고 아직 완성한 것은 아니지만...
계속 코딩중인 개인 포트폴리오 사이트도 구경 와 주시길...^^
