Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

input type=text 의 높이 지정 방법

height를 지정한 뒤 line-height를 동일하게 지정하면 됩니다.

그러면 글자가 input 요소의 수직 가운데로 오게 됩니다.

.some-text-input {
    height: 2em;
    line-height: 2em;
}

아래 내용은 참고하실 필요가 없습니다. 아래 내용은 IE7까지 현역이던 시절 작성한 것입니다. 오늘날 브라우저에는 필요없는 내용입니다.


input 박스의 사이즈가 크면 보기도 좋고 클릭해서 입력하기도 좋다.

미적인 것과 사용성 둘 다를 충족하는 좋은 방법이라고 생각한다.

그런데 css로 height 를 지정하면 난감한 일이 발생하곤 한다.

높이가 높은데 커서가 맨 위에 딱 붙어 있게 되는 것이다.

아래는 모두 height: 25px을 input에 준 경우다. 

IE6부터 8은 입력 필드 왼쪽위로 텍스트가 딱 붙어 버리는 초난감한 사태가 발생한다
파이어폭스4는 위아래를 기준으로 가운데 오게 정렬해 준다. 왼쪽은 딱 붙지만 IE처럼 흉하지는 않다.
IE9은 그나마 좀 낫다

이건 IE7에서 padding을 5px로 지정한 놈이다.

IE7에서 padding 5px 지정

어떤 브라우저든지 padding:5px인 게 height를 지정하는 것보다 더 낫다.

submit 버튼과 입력 박스가 서로 줄이 좀 안 맞는 게 있는데, 이건 submit 버튼에 vertical-align: top 을 줘서 해결한다.

인풋 박스 높이를 지정하면서 보기좋게 만드는 다른 방법

@dohoons 님이 알려 준 방법이다.

height를 지정하고 line-height를 height와 동일하게 지정해 주면 된다고 한다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다