태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

CSS line - height 속성, vertical - align 속성

13년 전

- 인라인박스의 높이 (line-height 속성)

•속성 : line-height
•값 : normal, 실수, 길이, 퍼센테이지, inherit
•기본값 : normal
•적용대상 : 모든 요소

line-height 속성은 인라인박스의 높이을 지정한다. 블록 레벨 요소에 적용되면 포함된 인라인박스의 '최저한의 높이'를 지정하는 것이 된다.

속성 값에 대한 의미는 다음과 같다.

nomal : 그 요소의 글꼴 크기를 기준으로 브라우저가 적절한 값을 인라인박스의 높이로 계산한다.

길이 : 그 요소의 글꼴 크기의 값과 곱하여 인라인박스의 높이를 계산한다. 마이너스 값은 지정 불가이다. 다른 대부분의 속성에는 값의 상속에 계산 값이 사용되지만 line-height 속성에 '실수'를 지정하면 예외적으로 지정 값이 상속된다. 예컨대 자손 요소의 글꼴사이즈가 다르면 그 글꼴 크기에 대응하여 인라인박스의 높이가 된다.

길이 : 인라인박스의 높이를 고정값으로 지정한다. 마이너스 값은 지정할 수 없다.

퍼센테이지 : 그 요소의 글꼴 크기에 대한 퍼센테이지로 지정한다. 마이너스 값은 지정 불가이다.

line-height 속성은 어디까지나 '인라인박스'의 높이를 지정하기 위한 속성이며 '행박스'의 높이를 지정하는 것이 아니다.

line-height 속성 값이 font-size 속성 값보다 작을 때는 인라인 박스의 높이는 font-size 속성 값보다 작게 표시되어 글꼴은 박스의 바깥으로 튀어나온다.

p.small {
line-height:90%;
}
p.big {
line-height:200%;
}

- 인라인박스나 칸의 수직위치 (vertical-align 속성)

•속성 : vertical-align
•값 : baseline, sub, super, top, text-top, middle, bottom, text-bottom, 길이, 퍼센테이지, inherit
•기본값 : baseline
•적용대상 : 인라인 요소, 셀 요소(th요소, td요소)

line-height 속성은 인라인박스의 높이을 지정한다. 블록 레벨 요소에 적용되면 포함된 인라인박스의 '최저한의 높이'를 지정하는 것이 된다.

vertical-align 속성은 인라인 요소에 적용하는것과 셀 요소에 적용하는것은 값의 의미에 차이가 있다 먼저 인라인 요소에 적용하는 경우 속성값에 대한 의미는 다음과 같다.

baseline : 인라인박스의 베이스라인을 부모박스의 베이스라인에 정렬한다. 인라인박스에 베이스라인이 존재하지 않으면 그 박스의 아랫변을 부모박스의 베이스라인에 정렬한다.

middle : 인라인박스의 중심선을 부모박스의 베이스라인에서 소문자 'x' 높이의 반(즉 0.5ex분)을 올린다.

sub : 인라인박스의 베이스라인을 부모박스의 아래첨자 문자로서 적절한 위치까지 내린다.

super : 인라인박스의 베이스라인을 부모박스의 위첨자 문자로서 적절한 위치까지 올린다.

text-top : 인라인박스의 윗변을 부모 요소의 글꼴의 윗변에 정렬한다.

text-bottom : 인라인박스의 아랫변을 부모 요소의 글꼴의 아랫변에 정렬한다.

top : 인라인박스의 윗변을 행박스의 윗변에 정렬한다.

bottom : 인라인박스의 아랫변을 행박스의 아랫변에 정렬한다.

길이 : 그 길이만큼 박스를 올린다, 마이너스 값일 때는 내린다. 0 은 baseline 을 지정한 것과 같은 의미다.

퍼센테이지 : 그 값을 line-height 속성 값에 곱한 거리만큼 박스를 올린다, 마이너스 값일 때는 내린다. 0은 baseline를 지정한 것과 같은 의미다.

인라인 요소에 vertical-align 속성 값이 'top', 'bottom' 이외를 지정하는 경우에는 부모 인라인 요소나 인라인박스를 생성하는 부모 블록 레벨요소를 참조할 수 있는 때에만 효과가 있다. 왜냐하면 'top', 'bottom', 이외의 값은 부모박스를 기준으로 수직위치를 결정하기 때문이며, 부모박스가 존재하지 않는 때는 그 기준이 없는 것과 같기 때문이다.

셀 요소에 적용하는 경우 속성값에 대한 의미는 다음과 같다.

baseline : 셀의 베이스라인을 그 셀이 걸치는 최초의 행의 베이스라인에 정렬한다.

middle : 셀의 중심선을 그 셀이 걸치는 행 전체의 중심선에 정렬한다.

top : 셀의 위선을 그 셀이 걸치는 최초의 행의 위선에 정렬한다.

bottom : 셀의 아래선을 그 셀이 걸치는 최후의 행의 아래선에 정렬한다.

img{
vertical-align:text-top;
}

추천 목록

번호	제목
65	IIS에서 JSP or Java Servlet 돌리는 방법 1
64	톰캣(Tomcat)의 기능 개요 및 설치 방법
63	내용복사시 출처 자동넣기
62	Flash와 PHP를 활용하여 멀티 파일 업로드 구현하는 방법
61	linux 시간 맞추기
60	야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업
59	다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업
58	나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup)
57	자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)
56	jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기.
55	접근성을 해치지 않는 자바스크립트의 사용
54	display: [inline, block, none]
	CSS line-height 속성, vertical-align 속성
52	CSS float 속성, clear 속성, z-index 속성
51	CSS display 속성, position 속성
50	CSS 마진(margin) 속성, 패딩(padding) 속성
49	CSS overflow 속성, clip 속성, visibility 속성
48	IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기
47	IE 7 에서 dt, dd 좌측여백이 생기는 문제
46	CSS visibility vs display
45	파이어폭스 에서 핸드 커서 안될때. cursor:hand -> cursor:pointer
44	CSS 포지셔닝(Positioning)
43	CSS에서 브라우저 구별 (IE6, IE7, FIREFOX)
42	CSS3 소개
41	Useful CSS Tips For Beginners
40	자주 쓰는 내장함수 (VisualBasic6)
39	브라우저 버전체크 - IE Conditional Comments 필터링
38	브라우저 버전(IE7 vs IE6)에 따라 Layer Y 좌표 위치 변동
37	레이어 절대좌표/ 상대좌표
36	웹표준 DTD선언문