box에서는 table에서의 valign같은

[주니147]

테이블 없는 페이지를 만들어보려고 하는데,
vertical-align이 수직정렬인 줄 알았는데, 아니라고 하더군요.
혹시 box에는 수직정렬이 없나요? 다른 여러곳을 찾아봤는데, 찾을 수가 없습니다.
누구 아시는분 있으면 알려주세요...^^

[oragi]

인라인 용 css 스타일로서 이미지 앞이나 뒤의 글과 이미지와의 높이 설정에 보통 쓰입니다.

질문하신
박스 수직 중앙에 나타나게 하는 방법은 테이블처럼은 되지 않습니다.

1. 안쪽 내용물에 수직 margin을 준다.
2. 바깥쪽 박스에 수직 padding을 준다.

이정도가 해결책입니다.

상대적인 수치( % )를 주시려고 하신다면 바깥쪽 박스의 height에 절대 수치를
주셔야 합니다.

[박민권]

테이블 없는 페이지를 만들어보려고 하는데,
vertical-align이 수직정렬인 줄 알았는데, 아니라고 하더군요.
혹시 box에는 수직정렬이 없나요? 다른 여러곳을 찾아봤는데, 찾을 수가 없습니다.
누구 아시는분 있으면 알려주세요...^^

이런 말이 이상하게 들리실 테지만 수직정렬이 필요가 없습니다.
아니, 필요성을 느끼지 못하게 되었습니다. :)
저도 처음에는 단순히 테이블대신 DIV로 테이블을 짜려는 오류를 범해서 수직정렬이 필요했었지만 테이블 개념에서 벗어나는 순간 수직정렬이 필요한 경우가 없어졌습니다.

또한 레이어에서 님이 원하시는 수직정렬 속성은 없습니다.

테이블 짜던 습관에서는 아래와 같은 방식을 찾게되는데
.box{높이: 20px; 수직정렬: 가운데;}

css 레이아웃에서는
.box{상하여백: 3px;} 이런식으로 처리합니다.
이렇게 하면 상하여백 3px이 생기니 따져보면 중앙정렬과 같은 모습입니다.

또는
.box{높이: 17px; 상단여백: 3px;}
이런식으로 처리할 수도 있구요.

오른쪽 박스가 늘어나면 왼쪽박스도 늘어나고 거기에 맞춰서 중앙정렬이 되어야 할경우?
이게 바로 테이블 개념입니다.
한쪽 셀의 크기가 옆 셀의 크기에 영향을 주는 것이 테이블 입니다.

CSS 레이아웃에 좀더 익숙해지면 이렇게 하지 않아도 다른 여러가지 방법이 존재한다는 것을 익히시게 될 것입니다.

자전거 타는 버릇으로 오토바이를 타려고 하면 CSS 레이아웃은 어렵습니다.
그래서 테이블에 익숙해진 사람보다 테이블을 제대로 다루지 못하는 사람이 CSS를 익히는 속도가 빠르답니다. :)