html input text vertical 와 a 태그와 이미지 세로 정렬 정리

매번할 때마다 뒤적이고 했던 것을 소스에서 뒤져보고 찾고 했는데, 

아에 매번 틀을 갖고 있다가 붙여서 쓰려고 이렇게 정리합니다.

<a href='#'>< </a>

<input type='text' value=''/>

<a href='#'>> </a>

이미지 없이 단순하게 꺽쇠(<, >)로 버튼모양을 대신하려고 합니다. 

가장위에 있는 그대로 타이핑 하게 되면 아래 그림처럼 나오게 됩니다.

우선 a태그의 속성을 떼어보도록 하겠습니다. css로 설정을 하면 됩니다.

a{text-decoration:none;}

또는

<a href='#' style="text-decoration:none;"><</a>

이렇게 하면 꺽쇠에 있는 색상이나 밑줄은 사라집니다.

사실 텍스트를 버튼처럼 사용하겠다고 하면 더 이상 작업은 필요가 없습니다.

하지만 이미지를 버튼으로 <a> 태그에 사용하게 된다면,

<input>과 <img> 태그의 높이가 다르다면 문제가 생기는데 위 아래로 어긋나게 되는 것이지요.

이 문제는 <a> 태그 하나에게만 주어지는 속성을 주면됩니다.

a{vertical-align:middle;}

또는 

<a href='#' style='vertical-align:middle;'></a>

은근히 방향을 잘못잡았다가 고생한 적이 있어서 남깁니다.

부디 도움되시길 바랍니다.