이전에 나온 모든 CSS관련된 책에는...
vertical-align이 Block내의 상하 정렬 위치를 결정하는 속성으로 설명되어 있습니다. 이는 잘못된 것입니다. W3C.org에 권장된 사안이 아닌...브라우저에서 적용되는 예를 가지고 책의 내용을 만들었기 때문이죠. 저 또한 근 1년전까진 해도 그렇게 알고 있었지만, 익스플로러 6.0 SP1을 설치하고부터 이상하게 vertical-align속성이 이전까지와는 달라서, W3C.org에 들어가서 원문을 보니... vertical-align속성이 하는 역할은 inline내에서 서로 다른 font와 font-size가 배열되었을 때, 글의 정렬위치를 결정하는 역할을 합니다. 아래의 예를 보시길...
이전에 알고 있던 방식(잘못구현되던 방식)
위와 같이... 한 줄 안에 서로 다른 크기의 폰트의 상하위치를 결정하는 것이 원래 vertical-align의 속성값입니다. 예제는 아래와 같이 입력됩니다. <div> <span style="font-size:8pt; vertical-align:text-bottom;">8포인트 텍스트</span>16포인트 텍스트 </div> 또한 영문과 한글의 혼용 예제를 들자면 li a { font-size:12px; color:#737373; text-decoration:none; line-height:30px; } 이렇게 소스를 적용하면
영문과 한글의 상하가 어긋나는 것을 볼 수 있습니다. li a { font-size:12px; color:#737373; text-decoration:none; line-height:30px; vertical-align:middle; } 이렇게 속성를 적용하면 영문과 한글의 상하가 일치합니다
조회 수 13,110 추천 수 0 댓글 0
TAG •
자료가 도움이 되었다면 댓글과 평가 부탁합니다. Html Tips
홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다
-
즐겨찾기 스크립트
-
iframe에 삽입되는 내용에 따라 iframe의 사이즈가 자동으로 변경되는 소스
-
Zbxe레이아웃 간단하게 좌측정렬로 바꾸기
-
검색창에 자동으로 한글 나오게 하기
-
이미지 없이 라운드 박스 만들기
-
CSS 속성 (margin, border, padding)
-
DIV - 테이블은 이제 쉬어야할때...
-
태그의 상세분류
-
제발...alt텍스트와 title텍스트를 구분해조바바
-
TD안엔 DIV를 넣어라?
-
iframe 대신 사용하는 object 태그
-
덧글달기 CSS Coding TIP
-
글들의 상하 정렬위치 설정 vertical-align속성
-
display:block 쪼금 더~
-
xhtml 기본 작성법
-
긴 제목 마우스오버시에만 보기
-
POSITION속성과 그 속성값
-
논리 태그 사용
-
네이밍 가이드
-
CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;]
