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
번호	분류	제목	조회 수	평점
75	JavaScript	홈페이지에 화려한 에니메이션 효과를 주기 - aos animate	3,528
74	JavaScript	현재 시간 실시간으로 카운트 출력	1,306
73	css	하단 영역을 브라우즈의 최하단에 고정시키는 방법	33
72		폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 6	17,256
71		테이블(셀) 깨지지 않는 CSS 1	8,935
70	css	테두리(border) 상자에 화살표 모양 css로 출력하기	986
69		태그의 상세분류	5,224
68		커서(cursor) 모양 정리	889
67		즐겨찾기 스크립트 1	6,351
66		제발...alt텍스트와 title텍스트를 구분해조바바 1	7,228

65	html	접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기 6	33,298	5.0점
64	JavaScript	잠시 보고 사라지게 만드는 javascript	39
63		자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1	8,008
62		자신의 홈에 프린트버튼을 넣자 2	7,765
61		익스6에서만 작동되게하는 css구문	10,181
60		이미지 없이 라운드 박스 만들기	6,009
59		이미지 없이 그라데이션효과 주기	8,930
58		이미지 바꾸기 소스 1	10,697
57		이미지 마우스 hover시 좌우 기울이기	1,394
56	css	웹퍼블리셔가 알고있어야 할 display:table 속성 4	1,410

번호

분류

제목

조회 수

평점

JavaScript

홈페이지에 화려한 에니메이션 효과를 주기 - aos animate