프로젝트를 진행하다가 input창에 placeholder 글자를 넣었다.
그러고 난 후 text를 입력하니 이슈가 생겼다.
비교해보면 입력중일 때는 살짝 밑에 써지는 것을 볼 수 있다.
간단한 문제지만, 지나칠 수가 없었다.
- padding을 통해 해결하기
그래서 이 문제를 해결하기 위해서 padding값으로 컨트롤 하였는데,
placeholder도 같이 따라와서 실패하였다.
- placeholder 속성 컨트롤하기
::placeholder를 사용하여 색깔을 변화할 수 있었지만, 직접적인 위치 조정은 실패하였다.
그래서 결국 다른 방법을 찾았다.
- text 중앙으로 배치하기
line-height와 height를 통일하여서
text가 중앙에 오게끔 하였다.
글자는 깔끔하게 중앙에 위치하여, placeholder와 같은 자리를 차지했다. 하지만,
글자가 꽉 끼어서 하단바가 움직이지 않고 첫 글자에 머물렀다.
이를 해결하기 위해 다양한 노력을 해보았으나, 해결한 방법은
color: transparent;
text-shadow: 0 0 0 black;두가지를 사용하여서 해결하였다.
color를 상위 색상으로 넣어 투명하게 만들었고,
그림자와 text를 같은 방향으로 나오게하여서 글자에 색을 넣는게 아닌 그림자를 통해 보이게 하였다.
이를 자세히 설명하면
color 에 검은색을 주면 하단바도 검은색이 된다.
그리고 text-shadow를 통해 Red색을 입혔더니 글자 위에 붙인 느낌으로 나왔다.
여기서 글자색을 투명으로 주면 하단바와 글자가 사라지고 그림자만 남으면서 해결된다.
그림자색을 검은색으로 바꾸면서 해결하였다.
마무리
큰 문제는 아니었지만, 세심한 부분 또한 놓칠 수 없었다.
이 문제를 해결하는데 많은 시간이 걸렸지만 다양한 것들을 해보면서, input창에 대한 이해도를 높일 수 있고, 중간에 input창 맞춤법 검사 제거하는 법까지 알게되어서 도움이 되었다.
