2020-08-01 WIL

요즘 일 때문에 너무너무너무 바쁘다. 그러다보니 공부할 시간도 부족하고, 블로그에 쓸 내용도 없었다. 자연스럽게 블로그 방치.

그래서 주말에 짬을 내서 WIL을 써보려고 한다.

간략하게 새로운 경험이나 배운 것들, 써먹어 본 것들을 적어볼 생각이다.

HTML CSS

1. 로그인 페이지 align center

https://codepen.io/angelx/pen/VweoQpZ

모바일 웹에서 흰색 배경에 main logo, login button 등만 있는 화면을 만들 때

각 element의 좌우 중앙 정렬은 flex, flex-direction: column을 이용하고, 수직으로 적당한 위치에 지정하는 것은 alsolute와 top or bottom을 이용했다.

더 좋은 방법이 뭐가 있을까? 이런건 어떻게 공부해야 할까? 궁금함이 많이 남는다.

2. focus-within

input이나 form에 focus가 설정되었을 때 submit button 숨김 처리를 위해 focus-within을 사용했다.

button이 form안에 있으면 모바일에서 동작하지 않으므로 주의해야 한다.

https://codepen.io/angelx/pen/xxZvYyv

3. form with header

page에 header가 포함된 form.

back arrow나 submit button은 position: absolute, input의 정렬은 flex로 처리했다.

https://codepen.io/angelx/pen/bGEXveK


Written by@[Suho]
뭐든지 만들어보자.