vertical-align 속성은 보통 인라인 형태의 요소(img, p, span, input, textarea, select ... 따위)와 예외적으로 td 태그에만 적용할 수 있고 div 태그와 같이 블럭 형태의 요소에 적용하는 속성이 아닙니다. vertical-align 속성은 기본적으로 인라인 형태의 요소 주변에 흐르는 이미지 또는 텍스트에 대한 수직위치를 정의 하기 위한 속성 입니다. 흔히 img 태그에 사용하는 경우가 많겠습니다.
div 태그를 CSS를 이용하여 td 처럼 렌더링 시키는 경우가 있을 수 있고 { display: table-cell; vertical-align: middle } 수직으로 중앙정렬 하는 것이 가능 하지만 이것을 가능하게 하려면 table 역할을 해주는 또 다른 부모 div 태그에 대하여 { display: table } 형식으로 설정해 주어야 합니다. 하지만 이러한 방식은 콘텐츠의 내용 분할과는 관계없이 디자인만을 위하여 무의미한 div 태그를 남발하게 된다는 점 때문에 추천되지 않습니다. 또한 이것은 대부분의 브라우저에서 작동하지만 IE 브라우저에서 지원하지 않는 기능이므로 섣불리 쉽게 사용할 수 도 없습니다.
그 밖에 수직정렬 기능을 구현하기 위한 몇 가지 팁이 있지만 모든 상황에 적용할 수 있는 것은 아니므로 다소 제한적이라 할 수 있습니다. 예를 들면 수직정렬 대상의 높이가 고정되어 있을 때만 수직 중앙정렬이 가능한 경우가 있고 앞서 이야기 한 것처럼 대부분의 브라우저에서 지원하는데 IE에서 지원하지 않기 때문에 사용하지 못하는 속성도 있습니다. 단지 이것이 배경이미지라면 center 속성 { background: url(sample.gif) no-repeat left center } 을 이용하여 수직으로 정렬하는 것이 자유롭습니다. 배경이미지라면 수직, 수평 모두 가운데 정렬 { background: url(sample.gif) no-repeat center } 하는 것도 가능 합니다.
div 태그가 이렇게 수직정렬을 지원하지 않는 것에는 나름의 이유가 있는 것으로 추측할 수 있습니다. 인지 공학적 측면에서 볼 때 콘텐츠의 배치는 좌측으로 부터 우측으로, 위로부터 아래로 나열되는 것이 바람직하기 때문에 이렇게 수직정렬을 지원하지 않는 것이 접근성이나 사용성을 높이는데 도움이 된다고 생각할 수 있고 필자는 그렇게 추측하고 있습니다. 위로부터 아래로 읽어 내려가는 습관을 고려하여 수직 중앙정렬보다 수직 상단정렬을 유도하고 권장하는 것이 W3C의 표준지침 이라고 생각하는 편이 좋겠습니다.
만약, 제가 처리할려는 놈이 배경이미지로 처리가 가능한것이라면 문제가 안되는데..
이것은 text 입니다.
div 태그가 이렇게 수직정렬을 지원하지 않는 것에는 나름의 이유가 있는 것으로 추측할 수 있습니다. 인지 공학적 측면에서 볼 때 콘텐츠의 배치는 좌측으로 부터 우측으로, 위로부터 아래로 나열되는 것이 바람직하기 때문에 이렇게 수직정렬을 지원하지 않는 것이 접근성이나 사용성을 높이는데 도움이 된다고 생각할 수 있고 필자는 그렇게 추측하고 있습니다. 위로부터 아래로 읽어 내려가는 습관을 고려하여 수직 중앙정렬보다 수직 상단정렬을 유도하고 권장하는 것이 W3C의 표준지침 이라고 생각하는 편이 좋겠습니다.
제가 할려고 하는게, 인지 공학적 측면에서 봤을대 역행을 할려고 하는게 아니에요~
윗줄에는 text1이 있고
아랫줄에 text2가 있는데,,
이 두줄 사이의 간격을 조절해줄려는거죠.
(단순하게 말해서 입니다..오해없으시길)
