이전에 나온 모든 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; } 이렇게 속성를 적용하면 영문과 한글의 상하가 일치합니다
조회 수 12,078 추천 수 0 댓글 0
TAG •
Html Tips
홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
31 | 기본적인 태그 (링크걸기)| 1 | 팔공산 | 2008.07.12 | 9,187 |
30 | 가장 기본적인 태그들 | 팔공산 | 2008.07.12 | 7,012 |
29 | 자신의 홈에 프린트버튼을 넣자 2 | 팔공산 | 2008.07.12 | 7,249 |
28 | 테이블(셀) 깨지지 않는 CSS 1 | 팔공산 | 2008.07.12 | 8,581 |
27 | 날짜 매개변수 1 | 팔공산 | 2008.07.12 | 7,187 |
26 | 이미지 없이 그라데이션효과 주기 | 팔공산 | 2008.07.12 | 8,347 |
25 | 자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1 | 팔공산 | 2008.07.12 | 7,612 |
24 | 뒤로..앞으로..새로고침 버튼 넣기 | 팔공산 | 2008.07.12 | 9,395 |
23 | ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서 3 | 팔공산 | 2008.04.27 | 12,394 |
22 | 붙어야 할 이미지가 붙지 않을때. | 팔공산 | 2008.04.19 | 7,392 |
21 | 사각박스 코너를 이미지없이 둥글게 만드는법 | 팔공산 | 2008.04.08 | 8,367 |
20 | CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;] 1 | 팔공산 | 2008.04.04 | 7,762 |
19 | 네이밍 가이드 | 팔공산 | 2008.04.04 | 5,838 |
18 | 논리 태그 사용 | 팔공산 | 2008.04.04 | 6,128 |
17 | POSITION속성과 그 속성값 2 | 팔공산 | 2008.04.04 | 6,960 |
16 | 긴 제목 마우스오버시에만 보기 | 팔공산 | 2008.04.04 | 7,376 |
15 | xhtml 기본 작성법 | 팔공산 | 2008.04.04 | 5,658 |
14 | display:block 쪼금 더~ | 팔공산 | 2008.04.04 | 9,026 |
» | 글들의 상하 정렬위치 설정 vertical-align속성 | 팔공산 | 2008.04.04 | 12,078 |
12 | 덧글달기 CSS Coding TIP | 팔공산 | 2008.04.04 | 5,278 |