mbg1346 - 글들의 상하 정렬위치 설정 vertical-align속성

이전에 나온 모든 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; } 이렇게 속성를 적용하면

영문과 한글의 상하가 일치합니다

Atachment
첨부

List of Articles
번호	분류	제목	조회 수	평점
15	css	display 속성: inline, block, inline-block	1,527
14	css	CSS 색상 이름 rgb , 16진수 자료( css 색상표 )	2,013
13	css	Hover시 테두리두께 설정	3,818
12	JavaScript	버튼 클릭시 클립보드에 복사하는 방법	3,228
11	html	flex로 세로 가로 정렬 하기 1	1,399
10	css	css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리 1	3,022
9	css	line-height 와 height의 차이점	1,858
8	JavaScript	현재 시간 실시간으로 카운트 출력	1,306
7		DIV 영역 자체에 링크 거는 방법 4	32,634	5.0점
6	css	스크롤 바(Scrollbar) 스타일링	728

5	html	접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기 6	33,298	5.0점
4	css	테두리(border) 상자에 화살표 모양 css로 출력하기	986
3	css	하단 영역을 브라우즈의 최하단에 고정시키는 방법	33
2	JavaScript	잠시 보고 사라지게 만드는 javascript	39
1	css	굵은 폰트만 따로 글꼴 지정하는 방법	44

번호

분류

제목

조회 수

평점

css

display 속성: inline, block, inline-block

1,527

css

CSS 색상 이름 rgb , 16진수 자료( css 색상표 )