크로스브라우징 input text 글줄 정렬

지운아빠

프로필 보기 이 회원 글보기

· 13년 전 · 조회 4268 4268 · 댓글 13 13

글줄 정렬이 맞는 표현인지 모르겠는데;;

vertical-align 의 기준선을 일정하게 맞추는 방법이라고 생각하시면 될 것 같습니다.

저는 이 방법을 쓰기 전엔

<style>

input {padding:3px}

</style>

<input type='text' />

처럼 작업했었는데, 이게 브라우저 별로 글자가 써지는 높이가 미세하게 다르더란 겁니다.

리뉴얼된 sir 메인메뉴 같이 글자를 세로 정렬할 때도 문제가 있었구요.

그래서 이 방법 저 방법 찾아보고 궁리해보다가 다음과 같은 방법을 찾았습니다.

(더 좋은 방법이 있다면 당연히 제보해주세요.)

<style>

input[type=text] {height:30px;line-height:2.4em}

</style>

<input type='text' />

이렇게 작업하면 크로스브라우징 확인 시에도 텍스트의 세로 정렬 기준선이 일정하게 나온답니다.

ie6 까지 고려하면

<style>

~~input[type=text] {height:30px;line-height:2.4em}~~

.textbox {height:30px;line-height:2.4em !important;line-height:2.1em}

</style>

<input type='text' class='textbox' />

처럼 작업하시는 게 더 좋습니다.

line-height:2.4em !important;line-height:2.1em

에서 앞에 속성에 !important 를 주면 뒤에 같은 속성이 나와도 우선적으로 적용되는 것은 아시죠?

근데 ie6 에서는 !important 를 무시하고 뒤의 새로 나오는 같은 속성 값이 적용됩니다.

* 핵을 안 쓰고 !important 만으로 ie6 에 대응할 수 있다는 겁니다.

ie6에서는 line-height 를 0.3em 적게 줄 때가 있는데 이건 아직 테스트를 더해봐야 될 거 같습니다. ㅠ

더 자세한 팁은 웹표준 강좌 때 확실하게 정리해서 찾아뵐께요 ㅎㅎㅎ

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 13개

누구얏

프로필 보기 이 회원 글보기

13년 전

어멋..제가 난독증이 있는듯ㅠ..ㅋㅋ
여튼 혼란을 야기시킨점 죄송합니다~즐거운 주말 보내세용~

지운아빠

프로필 보기 이 회원 글보기

13년 전

새로운 기법이 있는 줄 알고 긴장과 설렘이었는데 ㅎㅎㅎ;;

앙마꽃

프로필 보기 이 회원 글보기

13년 전

!important 만으로 ie6 에 대응할 수 있다는 새로운 정보 얻고 갑니다~ ^^ 감사감사~

/ 2

1 2

게시글 목록

번호	제목	글쓴이	조회	날짜
32071	센스리더 센스리더의 기능과 기능키 - 13. 위치기억 관련 기능	지운아빠	2,818	12년 전
32070	센스리더 센스리더의 기능과 기능키 - 12. 하일라이트 관련 기능	지운아빠	2,848	12년 전
18535	JavaScript ajax 그리드 문의 1	보충수업	1,474	12년 전
5369	JQuery를 이용해서 rss를 원하는부분 출력하고싶은데요 3	컬티스	888	12년 전
27088	사이트 추천즘 부탁드려요~ 3	kiplayer	799	12년 전
5364	php 에서 USB 외장 드라이버에 인식은 어떻게.... 4	항상감사	585	12년 전
32069	센스리더 센스리더의 기능과 기능키 - 11. 그래픽 관련 기능	지운아빠	2,808	12년 전
32068	센스리더 센스리더의 기능과 기능키 - 10. 설정 기능	지운아빠	2,946	12년 전
18521	jQuery jquery 속도 높이는 팁 13	울랄라커뮤니케이션스	2,099	12년 전
5359	php 글자 깨짐 질문입니다. 4	Holyreign	1,331	12년 전
18520	jQuery Easing Functions Cheat Sheet	편리	781	12년 전
32067	센스리더 센스리더의 기능과 기능키 - 9. 환경 기능	지운아빠	2,859	12년 전
32066	센스리더 센스리더의 기능과 기능키 - 8. 음성 관련 기능	지운아빠	3,189	12년 전
27081	웹호환성과 접근성?? 6	조박사님	1,234	12년 전
18514	jQuery Mobilize 의 touchSlider 아시나용? (모바일용으로 유명한 터치슬라이더~) 5	kiplayer	10,565	12년 전
5355	올레 500 Error Page 3	itlang	1,415	12년 전
5354	아.. 힘드네요.	342s	423	12년 전
5350	php session_id 질문 3	senseme	1,360	12년 전
32065	센스리더 센스리더의 기능과 기능키 - 7. 토글기능	지운아빠	3,105	12년 전
18510	Mobile [안드로이드] TextView 텍스트 많아지면 ...으로 표시방법. 3	수저	7,121	12년 전
18503	jQuery 좌우 슬라이드메뉴와 상하 슬라이드 메뉴 6	port	8,959	12년 전
32064	센스리더 센스리더의 기능과 기능키 - 6. 사용자 윈도우 기능	지운아빠	2,861	12년 전
32063	센스리더 센스리더의 기능과 기능키 - 5. 활성 윈도우 정보 기능	지운아빠	2,987	12년 전
18502	기타 [안드로이드] No Launcher activity found! 에러 해결방법	수저	6,668	12년 전
18499	기타 [안드로이드] java.lang.NullPointerException 에러 해결 방법 2	수저	10,512	12년 전
18495	MySQL MySQL 5.1 VS MySQL 5.5 버전 각각 MyISAM 엔진과 InnoDB 엔진 속도 비교 3	박사마	4,044	12년 전
5345	그누보드 플러그인 프레임워크.. 개발자분들 함께해요 (2) 4	byfun	574	12년 전
27079	텝메뉴 문의 드립니다. 1	아이바위	876	12년 전
30718	CSS id나 class 명은 어떻게 쓰시는지요? 9	레어닉	2,351	12년 전
18494	PHP 그누보드 자동 이스케이프 관련 버그(?)	레어닉	683	12년 전
18493	jQuery jQuery / jQuery Mobile 에서 json 파싱 방법	kiplayer	3,732	12년 전
5343	안하다 하려니 어렵네요. 1	대근	426	12년 전
18491	MySQL Mysql DB를 InnoDB로 바꿔봅시다 1	울랄라커뮤니케이션스	2,936	12년 전
18489	웹서버 리눅스 서버 관리에 필요한 50가지 팁 1	울랄라커뮤니케이션스	3,432	12년 전
18487	Mobile 모바일 웹 개발에 큰 도움이 되는 피모 브라우저 1	주재넷	2,091	12년 전
18486	PHP 간단한 쿠폰번호 생성	kiplayer	2,166	12년 전
18484	PHP xml 파싱 예제 1	울랄라커뮤니케이션스	3,261	12년 전
18482	PHP eval 1	windowhan	672	12년 전
32062	센스리더 센스리더의 기능과 기능키 - 4. 캐럿 읽기 기능	지운아빠	2,896	12년 전
26476	제안서 제안서 유용한 도형 13	미르얌	5,223	12년 전
18481	jQuery 롤오버+슬라이드 질문드립니다.	그루컴즈	1,633	12년 전
5339	mysql connect 해제 관련 3	AMDbest	1,340	12년 전
18480	jQuery jQuery path plugin	편리	1,206	12년 전
18476	JavaScript 아이폰일때 상단 검색바 숨기기 3	kiplayer	1,124	12년 전
27137	도와주소서 ㅠㅠ 6	한번잘해보자	922	12년 전
30711	반응형 참고해서 만들어 본 반응형 레이아웃 6	kiplayer	3,129	12년 전
18475	PHP 어떤 스마트폰에서 접속했는지 알아내는 함수	dsv421	796	12년 전
18474	PHP 년별 월별 일별 시간 범위 구하기	dsv421	1,504	12년 전
18470	jQuery jQuery로 파일업로드(input=file) 버튼 이미지로 변경하기 3	dsv421	5,833	12년 전
32061	센스리더 센스리더의 기능과 기능키 - 3. 마우스 동작 기능	지운아빠	3,207	12년 전
18469	웹서버 AWS 아마존 클라우드 서버 Network Latency Check	MFBob	2,610	12년 전
32060	센스리더 센스리더의 기능과 기능키 - 2. 포인터 이동 기능	지운아빠	3,094	12년 전
5335	php 최근 버전은 addslashes 굳이 안써도 되나요 3	AMDbest	1,460	12년 전
32059	센스리더 센스리더의 기능과 기능키 - 1. 포인터 읽기 기능	지운아빠	785	12년 전
5333	모든 게시판에서 게시글(최신글) 및 첨부파일 가져오는 쿼리문 1	모니터군	1,199	12년 전
32058	센스리더 센스리더의 메뉴 구성 - 7. 도움말	지운아빠	1,260	12년 전
32057	센스리더 센스리더의 메뉴 구성 - 6. 보기	지운아빠	606	12년 전
30705	CSS 팁은 아닌데 그냥 제가 자주쓰는 버튼 css 5	kiplayer	3,537	12년 전
5326	하이브리드 앱 방법론에 대한 생각(jQM,Sencha,Html5) 6	kiplayer	3,959	12년 전
18466	PHP 서버의 php버전이 낮아서 json_encode() 함수가 안될때 사용하는 함수 2	kiplayer	2,289	12년 전
18462	JavaScript 모바일웹 이미지맵 사용 소스 3	kiplayer	8,283	12년 전
18461	JavaScript [복사하기] 버튼 자료~	kiplayer	940	12년 전
31504	표준화 7강 갤러리 게시판 스킨 (skin/board) 21	지운아빠	8,733	12년 전
30696	웹접근성 html / css 버튼 만들어 주는 사이트. 자주 활용합니다^^; 편리성 8	돼지코구뇽	16,898	12년 전
32056	센스리더 센스리더의 메뉴 구성 - 5. 점자	지운아빠	1,220	12년 전
5321	나만그런가? 도무지 기억이 안나는 현상! 4	유보	699	12년 전
18456	PHP php 동영상 강좌 4	서기	6,238	12년 전
18455	jQuery array toggle	개판	691	12년 전
32055	센스리더 센스리더의 메뉴 구성 - 4. 도구	지운아빠	876	12년 전
5315	에딧플러스 bak 파일 5	요태지	633	12년 전
5310	MySQL 필드순서 바꾸는 명령 있을까요? 4	지러유	777	12년 전
27072	웹표준 궁금한것이 있습니다. 6	AKASIA	1,122	12년 전
32054	센스리더 센스리더의 메뉴 구성 - 3. 환경 설정	지운아빠	975	12년 전
27066	에디터플러스에서 zencoding 질문있는데요. 5	웹디자인되고파	1,081	12년 전
18453	OS Linux 네트워크 트래픽 확인 iftop 1	daro	3,650	12년 전
30692	HTML IE6 PNG 초 간단하게 적용 3	daro	2,129	12년 전
30690	HTML HTML5 placeholder 사용하기 1	daro	4,380	12년 전
18451	OS iptables UDP IP 차단 1	daro	3,068	12년 전
18450	웹서버 nginx 413 Request Entity Too Large 파일 업로드시 해당 오류뜰경우	daro	4,254	12년 전
18449	PHP php array_map() 함수를 대체하기 위해 만든 함수	편리	2,066	12년 전
5307	함수 안에 include 사용시 궁금한점이 있습니다 2	진서기	1,269	12년 전
32051	센스리더 센스리더의 메뉴 구성 - 2. 음성 설정 2	지운아빠	920	12년 전
18448	OS PHP Mcrypt on CentOS 6	관리자	2,066	12년 전
18447	OS 리눅스 CENT OS 비트(bit) 확인하기	관리자	4,997	12년 전
18441	jQuery 참고사이트 모음 5	dsv421	1,269	12년 전
18437	jQuery ajax로 폼값 쉽게 넘기기 serialize() 3	dsv421	4,112	12년 전
18429	jQuery 기초적이지만 자주 쓰이는 Jquery 팁 20가지 7	dsv421	5,635	12년 전
32049	센스리더 센스리더의 메뉴 구성 - 1. 파일 1	지운아빠	1,269	12년 전
30686	CSS 제가 사용하는 CSS RESET (초기화) 3	지운아빠	2,531	12년 전
5299	프리랜서 여러분 , 여러분들은 어디서 일거리를 구하십니까? 7	프로프리랜서	1,638	12년 전
5289	여러분들은 현재 어떤 DOCYTPE 을 사용하시는지요??? 9	atria	605	12년 전
30677	HTML <img> 태그 올 바르게 사용하기. 8	daro	2,319	12년 전
32042	센스리더 센스리더에서 사용되는 개념들 6	지운아빠	2,067	12년 전
18426	PHP 간단하게 파일을 쓰거나 읽는 함수입니다. 2	프로프리랜서	759	12년 전
18422	PHP 간단하게 파일을 쓰거나 읽는 함수입니다. 3	프로프리랜서	708	12년 전
18420	OS 아파치 로그를 분석하여 특정 아이피가 몇번 접속 했는지 알아내는 스크립트 1	프로프리랜서	3,199	12년 전
18418	OS 파일 목록의 합계 구하기 1	프로프리랜서	1,617	12년 전
5285	게시판 뷰페이지 구현시 질문입니다. 3	AMDbest	636	12년 전
5282	구문의 오류 아닌 오류에 대한 질문입니다. 2	AMDbest	492	12년 전
26459	계약서 홈페이지 제작계약서 v9.7.3 16	해피정	8,132	12년 전

이전 다음

21 22 23 24 25

전체 목록