좐's 블로그

컴팩트한 사용자 경험을 위한 Scroll -Snap 기법

홈페이지... 더 이쁘게... 진행시켜...!! 지난주에 완료 보고 후 젠킨스까지 입히고 약간의 꿀을 빨고자 했던 이번 주... 하지만 중국을 갔다 오신 대표님의 한마디에 또 다시 나는 css 의 늪에 빠지고 말았다 ㅠ 그래서 요구사항을 들어보니 다른 회사들 landing 페이지처럼 휙휙 넘어가는 메인 화면을 만들고 싶어 하시는 거 같았다. (실제오더 : 아니 그냥 쭉쭉해서 페이지 넘기는거처럼 넘어가게 좀 해바바) 이걸 또 찰떡 같이 번역해서 다른 회사들은 어떤 기능을 쓸까 파악해보니 Scroll-Snaps이란 속성을 사용하고 있다는 걸 알았다. Scroll-Snap 이란?? 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성 Scroll-Snap 속성과 활용법 scroll-..

[HTML, CSS] display : none 테이블 깨짐 현상 해결

프로그램에서 출원경로가 '개국' 일 경우에는 지정국 입력 칸이 사라지게 해야하는 로직을 짜는 업무 당연히 평소에 하던 대로 출원경로 select태그에 onchange 효과를 줘서 지정국 칸의 css 를 'display : block; > none;' 으로 토글하는 함수를 만들어 넣어 놓았다. 그런데... 띠..띠용 . . . 내가 생각했던 것과 달리 tr 이 깨져서 들어와졌다... 흠.. 이유를 찾기 위해 console 창을 열고 tr 의 style 요소를 확인해 보았다. tr 태그에는 display : block 이 아닌 table-row 라는 속성이 들어가게 된다. 오늘도 html css 짬바가 하나 늘었다.