요즘 일 때문에 너무너무너무 바쁘다. 그러다보니 공부할 시간도 부족하고, 블로그에 쓸 내용도 없었다. 자연스럽게 블로그 방치.
그래서 주말에 짬을 내서 WIL을 써보려고 한다.
간략하게 새로운 경험이나 배운 것들, 써먹어 본 것들을 적어볼 생각이다.
https://codepen.io/angelx/pen/VweoQpZ
모바일 웹에서 흰색 배경에 main logo, login button 등만 있는 화면을 만들 때
각 element의 좌우 중앙 정렬은 flex, flex-direction: column을 이용하고, 수직으로 적당한 위치에 지정하는 것은 alsolute와 top or bottom을 이용했다.
더 좋은 방법이 뭐가 있을까? 이런건 어떻게 공부해야 할까? 궁금함이 많이 남는다.
input이나 form에 focus가 설정되었을 때 submit button 숨김 처리를 위해 focus-within을 사용했다.
button이 form안에 있으면 모바일에서 동작하지 않으므로 주의해야 한다.
https://codepen.io/angelx/pen/xxZvYyv
page에 header가 포함된 form.
back arrow나 submit button은 position: absolute, input의 정렬은 flex로 처리했다.