Jeden Tag, aufrichtig und lustig.

IR (Image Replacement) 기술 웹페이지상 사용자입장에서는 볼 수 없지만, 스크린리더나 브라우저를 위해 텍스트를 기재하는 방법이다. 웹접근성 향상과 SEO최적화 하는데 영향을 끼치므로 중요한 개념이다. 이전에는 웹페이지 문서 구조상 필요한 제목이지만, 화면상에는 나타날 필요가 없을 때 아래 속성을 사용했었다. visibility:hidden 하지만 공부해보니 위와 같은 속성은 스크린리더가 읽어주지 않고 무시하기 때문에 웹접근성을 감소시켜 사용해서는 안되는 속성이었다. 위 속성을 대신해서 아래와 같은 코드를 사용 할 수 있다. position: absolute; clip-path: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow..

약 5시간 동안 끙끙거리면서 만들어 낸 로그인 화면이다. 마크업하면서 어떻게 시맨틱하게 마크업 할 수 있을지 고민했고, 스타일링하면서는 효율적이고 깔끔한 방법에 대해 고민했다. 고민의 결과, 가독성을 위해 주석을 다는 시도를 해보았다! 구현하면서 봉착했던 큰 어려움은 크게 2가지였다. 1. weniv 로고와 텍스트의 정렬 2. 하단의 패딩 1. weniv 로고와 텍스트의 정렬 아직도 해결을 못한 상태이다. 로고와 텍스트의 부모요소에 아래와 같이 코드입력을 하였지만, 텍스트가 약간 위로 올라와있어 아쉽다. vertical-align: middle; 2. 하단의 패딩 하단 요소들에 padding-bottom값을 부여해도 border와 붙어있어 보기 좋지 않았다. 하단 아이디 / 비밀번호 찾기와 회원가입 요소..