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

지운아빠

프로필 보기 이 회원 글보기

· 13년 전 · 조회 4266 4266 · 댓글 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

게시글 목록

번호	제목	글쓴이	조회	날짜
4851	개발자 디개기뻐가 뭐하는곳인지.... 5	亞波治	763	13년 전
30604	반응형 반응형웹 패턴/리소스/뉴스 4	전진	3,580	13년 전
4842	개발자 혹시 이런상단메뉴 소스샘플 어디서 구할수있을까요? 4	레이돌이	1,144	13년 전
26788	퍼블리셔 디자이너 지만 질문요 6	freejazzme	1,108	13년 전
4847	개발자 게시판에 필수 웹에디터~ 이런기능은 ? 표 그리기 간격 마우스로 3	듀팡	1,447	13년 전
4839	개발자 디게 나른한 날이네요. 2	itlang	427	13년 전
4838	개발자 오늘은 개발자	ㅎㅅㅎ	496	13년 전
24428	기획자 저도 마무리는 기획쪽으로 가고 싶은데........ 1	crocojea	1,474	13년 전
30600	CSS CSS에 attr 함수에 대해 3	다프린	1,969	13년 전
28442	오랜만에 테이블로 레이아웃을 잡으니	지운아빠	710	13년 전
4835	개발자 갤러리 생성 어떻게 해야하나요? 2	쿠우우우우	467	13년 전
4831	개발자 미챠!!!! ㅠㅠ 3	관리자	603	13년 전
4825	개발자 프로그래머님들, 고수님들. (복호화 관련) 5	Maximus	583	13년 전
26775	퍼블리셔 사랑합니다, 그누보드 DTD ... v//v 12	현님	1,440	13년 전
26768	퍼블리셔 이것좀 찾아주시면 캄사요 ^^;;; 6	하늘제사장	1,035	13년 전
4821	개발자 혹시 css에 3	다프린	468	13년 전
4818	개발자 그누보드 관련 질문드립니다. 2	와우와	472	13년 전
4815	개발자 프로그래머 팁자료실의 분류를 나누는 방식중 어떤것이 더 마음에 드시나요? 2	관리자	537	13년 전
4804	개발자 파일 경로좀 알려주세요.ㅠㅜ 10	엘남매아빠	775	13년 전
4800	개발자 개정된 정보통신법에 의한 회원가입시 실명확인은??? 3	모노폴리	697	13년 전
4796	개발자 안녕하세요 ~ 개발자님들의 조언 듣고 싶어 글 써요!(유상수리와 무상수리에 대한 부분) 3	minini	489	13년 전
26757	퍼블리셔 그누보드 vs 나의 퍼블리싱 10	직화오리팡야	1,331	13년 전
4792	개발자 가상서버로 서버공부를 하고있는데요 3	우산11	673	13년 전
18160	JavaScript 자바스크립트 함수모음!!! 8	유보	5,855	13년 전
26754	퍼블리셔 예전에 ietoy 에 있던 기능인데. 2	오니기리죠	1,017	13년 전
4786	개발자 으으 서버 설치 너무 짜증나네요 5	HSEngine	657	13년 전
18157	MySQL mysql 문제 .... 도와주세요 ㅜ.ㅜ 2	Giggle	1,691	13년 전
4782	개발자 html 엘리멘탈 이벤트 문의. 3	다프린	499	13년 전
4777	개발자 php 다운로드 괴상한 현상 4	AMDbest	1,418	13년 전
18152	JavaScript 실시간 금액 계산기 ver.2 (php에 적용 가능) 4	AKASIA	2,888	13년 전
4775	개발자 글쓰기를 누르면 내용이 안보여요!! 1	상윤	499	13년 전
4768	개발자 오...이제 제작의뢰게시판. 6	미션임파썩을	535	13년 전
4763	개발자 혹시 개발자 중에 소셜펀딩 사이트 개발해보신분? 4	켈리얀	624	13년 전
4758	개발자 아이프레임 질문!(쉬우면서도 어려운?) 4	미라클	531	13년 전
4756	개발자 버벅거릴 수 있나요? 1	손사	431	13년 전
4751	개발자 전체페이지가 위 아래로 넘어가는 사이트는 어떻게 만드나요? 4	ascii	692	13년 전
4740	개발자 겔러리게시판 이미지들을 여러장 올렸을때 버그인지 메모리 문제인지????? 10	불량학생	434	13년 전
26746	퍼블리셔 이런 질문 드려도 될지 모르겠습니다만 7	김우너석	977	13년 전
26736	퍼블리셔 즐겨찾기 모음 페이지 만들 때 <cite> 써도 될까요? 9	지운아빠	949	13년 전
4737	개발자 웹페이지 인쇄 어떻게 하시나요? 2	쉽다zzz	718	13년 전
4731	개발자 (문제) 1 2 3 4 5 6 7 8 9 = 100 5	듀팡	474	13년 전
4726	개발자 지금도 가능한지 모르겠지만. IE6을 죽이는 코드 4	알쯔	631	13년 전
26726	퍼블리셔 님들은 포커스 아웃라인 어떻게 처리하세요? 9	누갸	1,408	13년 전
4719	개발자 플래시 질문 하나만 봐주세요 ^^; 6	애기아빠	464	13년 전
26403	통계 SIR 2012년 8월 운영체제, 해상도별 방문율 2	관리자	2,443	13년 전
4713	개발자 IE에서 jquery upload progress 5	AMDbest	2,155	13년 전
26398	통계 SIR 2012년 8월 브라우저별 방문율 4	관리자	2,038	13년 전
4711	개발자 APMSETUP으로 이메일 발송 하신분계신가요?? 1	꽃미남v	1,349	13년 전
4706	개발자 제가 C언어를 다뤄보지 않아서 모르겠는데... 4	AMDbest	658	13년 전
28437	크롬(Chrome), 사파리(Safari)에서 form 전송이 안 될때, submit 버튼이 안 먹힐 때 4	지운아빠	3,794	13년 전
26709	퍼블리셔 높이가 100%로 되게 하려면 어떻게 해야하나요? 16	엘남매아빠	1,668	13년 전
18151	기타 연결된 프로그램(WX_DDE#C:\Program Files (x86)\EditPlus 3\EDITPLUS.EXE -nm##System#[open("xxx.php")])을 찾을 수 없습니다.	테스툥	2,082	13년 전
4705	개발자 굽슨굽슨 이거 욀케 어려운건지..	직화오리팡야	497	13년 전
4699	개발자 제작의뢰 게시판은.. 5	mobiler	457	13년 전
24421	기획자 기획자 게시판이 가장 썰렁하네요~^^ 6	쏴니	1,594	13년 전
4696	개발자 특정 사이트에 10명만 로그인 하게 할려고하는데...어렵군요. 2	아이티맵	577	13년 전
18150	Mobile 미래웹기술연구소 “HTML5 써야할 이유는…“	PHPㅡASP프로그래머	1,800	13년 전
18149	Mobile ETRI, 하이브리드 플랫폼 2.0 출시…“무상 배포”	PHPㅡASP프로그래머	1,483	13년 전
18148	Mobile KT-한국MS, HTML5 웹앱 개발 활성화 맞손	PHPㅡASP프로그래머	1,276	13년 전
18146	Mobile KT, 앱개발 전문과정 ‘스마트스쿨’ 운영 1	PHPㅡASP프로그래머	1,210	13년 전
26397	기타 인포섹, 공개 웹게시판 보안 취약점 발견	PHPㅡASP프로그래머	4,605	13년 전
26694	퍼블리셔 이것도 퍼블리셔 쪽일지는 모르겠는데.. 문서 모드 관련이에요 14	바롤	3,044	13년 전
26679	퍼블리셔 j-query 사용은 올바른가? 14	바롤	1,403	13년 전
4693	개발자 리자님? 2	서동요	482	13년 전
4684	개발자 광고는 받으면서 왜 광고통계는 제공안하느냐라고 하셔서 ㅠ _ㅠ 8	알쯔	1,131	13년 전
18145	JavaScript getHtmlInfo	Darby	1,599	13년 전
26664	퍼블리셔 서브메뉴가 있는 css메뉴 추천좀 해주세요.. 14	서동요	1,338	13년 전
26656	퍼블리셔 나는 퍼블리셔가 아닌데 퍼블리셔만큼 한다,못한다 7	rims	1,122	13년 전
28434	UI Patterns 2	지운아빠	782	13년 전
4681	개발자 왜 다운이 안되는 거죠? 2	손때기름	449	13년 전
28432	HTML5 마크업 시 1	지운아빠	841	13년 전
4673	개발자 그누보드 5가 나오지 않는 이유 7	지운아빠	710	13년 전
4665	개발자 오, 사이트 바뀌었네요! 7	아샬	531	13년 전
4660	개발자 이거 유저불량인가요?? 4	맞을꺼야	536	13년 전
26648	퍼블리셔 우리 회사에는 퍼블리셔가 따로 있다? 7	지운아빠	990	13년 전
4656	개발자 현재 토크게시판 중 1위는 개발자 파트인가요? 3	켈리얀	437	13년 전
4648	개발자 아... 게시판을 잘못찾았습니다....	다키짱	390	13년 전
4649	개발자 기존 홈페이지 DB를 남기고 다른 빌더를 덮어씌우면 자료는 어떻게 되나요? 2	졸린다젠장	477	13년 전
4652	개발자 로그인페이지로 안가요 3	아지야학교가자	395	13년 전
26642	퍼블리셔 퍼블리셔가 다뤄야 할 영역은? 5	지운아빠	1,023	13년 전
4632	개발자 토크게시판 활성화 방안 1단계 시행 15	관리자	715	13년 전
26630	퍼블리셔 신입 퍼블리셔 연봉은 얼마? 11	지운아빠	2,230	13년 전
4627	개발자 밑에 리자님꼐서 올리신 맥북이 낫나요? 시리즈9 이 낫나요?를 보고.... 4	다키짱	478	13년 전
4622	개발자 node.js 문의.. 4	다프린	757	13년 전
18142	JavaScript 자바스크립트 코딩할때 실수하기 쉬운 한가지(배열) 2	견해★	1,493	13년 전
4606	개발자 맥북이 낫나요? 시리즈9 이 낫나요? 15	관리자	678	13년 전
4592	개발자 아이폰앱 만들려면 13	맞을꺼야	613	13년 전
4583	개발자 개발자님들은 PHP 개발시 LIB 머쓰는지 궁금합니다.. 8	AKASIA	573	13년 전
4575	개발자 DHTML에디터 사용시 본문에 들어간 사진파일용량 체크방법 7	쿠마하우스	685	13년 전
26616	퍼블리셔 사이트를 제작하려고 합니다 13	goaway	1,084	13년 전
4565	개발자 도메인주소가 바껴요~ 9	쿠마하우스	647	13년 전
4550	개발자 웹 쪽에 종사하시는분들, 질문입니다, 14	루티	674	13년 전
4545	개발자 구글 analytics 소스는 어디서 달아줘야 하나요? 4	쿠마하우스	984	13년 전
4524	개발자 모니터 몇개 이용하시나욤?? 20	켈리얀	797	13년 전
28422	SIR 메인 HOT SKIN/BUILDER 효과 순차롤링 최신글 9	지운아빠	1,406	13년 전
26611	퍼블리셔 사이트 제작해볼려구요 4	goaway	898	13년 전
4520	개발자 포인트 ㅠㅠ 3	lllolll	406	13년 전
26600	퍼블리셔 퍼블리셔탭은 인기가 없는거 같아요 10	하루네	958	13년 전
28408	크로스브라우징 input text 글줄 정렬 13 현재글	지운아빠	4,267	13년 전
4516	개발자 디비이전때문에요....ㅠㅠ 3	그누마트	560	13년 전

이전 다음

24 25 26 27 28

전체 목록