CSS 를 이용한 수직 가운데 정렬, table 태그냐 div 태그냐..?
아래 코드를 사용하면 3개의 input 태그는 수직으로 가운데 정렬이 되는데,
나머지 img 태그는 위쪽으로 붙어 버린다.
img 태그에 padding 이나 margin 스타일을 먹여도 요지부동.
| <div> <input type="text" name="name1" value="" size="3" readOnly> - <input type="text" name="name2" value="" size="3" readOnly> <input type="text" name="name3" value=""> <img src="./btn_address.gif" onClick=""> </div> |
역시 구관이 명관이라고, table 태그로 전환하면 해결이 되는데..
만약 td 태그 안에 여러 내용이 혼합되어 사용된다면 td 태그에 속성을 더 설정해 주어야 한다.
| <table> <tr> <td><input type="text" name="name1" value="" size="3" readOnly></td> <td>-</td> <td><input type="text" name="name2" value="" size="3" readOnly></td> <td><input type="text" name="name3" value=""></td> <td><img src="./btn_address.gif" onClick=""></td> </tr> </table> |
아래와 같이 vAlign 속성을 middle 로 주거나, align 속성에 middle 을 주면 해결.
vAlign 에 middle 을 주거나 align 에 center 를 주는 것은 봤지만, align 에 middle 을 준다꼬..? 한번 해 보시라.
그런데, 코드가 복잡해 졌다.. 이거는 조금 곤란해 졌네.. 크윽.
| <table> <tr> <td align="middle"><input type="text" name="name1" value="" size="3" readOnly></td> <td align="middle">-</td> <td align="middle"><input type="text" name="name2" value="" size="3" readOnly></td> <td align="middle"><input type="text" name="name3" value=""></td> <td align="middle"><img src="./btn_address.gif" onClick=""></td> </tr> </table> |
다시 div 형식으로 돌아와서, input 과 img 에 vertical-align:middle 스타일을 먹여 보자.
으음.. 이제는 수직으로 가운데 정렬이 되는 모습이다.
그런데 반복적인 태그가 가독성을 떨어뜨린다..
| <div> <input type="text" name="name1" value="" size="3" readOnly style="vertical-align:middle"> - <input type="text" name="name2" value="" size="3" readOnly style="vertical-align:middle"> <input type="text" name="name3" value="" style="vertical-align:middle"> <img src="./btn_address.gif" onClick="" style="vertical-align:middle"> </div> |
한눈에 코드가 들어오지 않는 것은 마찬가지.. 스타일을 위로 뽑아서 통합해 보자.
input 이나 img 에 세로정렬 스타일을 먹이든 먹이지 않든 어디에서나 비슷하게 적용될 것이기 때문에,
상기와 같은 코드로 가도 되겠다.
그런데, 만약 input 이나 img 가 동일 웹페이지의 다른 곳에도 사용되고, 다른 곳에서는 이런 스타일이 적용되면
안 되는 상황에서는 어떻게 해야 할까..?
|
<style> <div> |
자, 아래와 같이 input 태그에서 class 속성값이 va 인 경우에만 vertical-align:middle 스타일이 먹게 하면 되겠다.
input.va 대신에 input#va 를 사용한다면 class 대신에 id 를 사용하면 되는데,
아래와 같은 경우에는 input 이 여러개 이므로, id 보다는 class 방식으로 처리하는 것이 무난하겠다.
input 이나 img 태그와 상관없이 vertical-align:middle 스타일이 먹게 하려면 어떻게 해야 할까..?
| <style> input.va {vertical-align:middle} img.va {vertical-align:middle} </style> <div> |
아래와 같이 va Alias 앞에 '.' 만 찍으면 된다. 이때도, 만약 하나의 id 에만 스타일이 먹게 하려면 #.va 로 정의하면 된다.
| <style> .va {vertical-align:middle} </style> <div> |
아무튼, 기본적인 설정으로 기능만 맞추면 되지뭐, 이렇게 생각했다가,
다시 예쁘게 다듬으려니까 코드가 점점 복잡해진다..
그러나, 어쩌랴.. 예쁜 떡이 더 맛있는걸..