버튼,체크박스,파일,라디오,텍스트,콤보박스,리스트,메모 CSS

이게 CSS inline 요소다. password 나 hidden 같은건 겉저리일뿐..
그럼 적용되는 css는?
background, color, font 당연히 적용될 것이고
direction은 특수
border 중요
display,float는 오묘
letter-spacing 자간
line-height 행간
word-spacing 단어간
margin
padding
text-align
vertical-align
text-indent
white-space

요정도가 형태에 가장 중요할것이다.
그리고 css 말고 개별 속성도 있다.
이걸 정리해 놓는다면 디자인에 얼마나 편할까?

서핑중에 찾은 정보 를 포스팅 한다.

 
기준 IE8, FF

첫번째는 요소를 설명, 다음 style,

왠만하면 가로 정렬은 뺀다, 잘 먹히기 때문에

text : IE는 width,height 있으나 먹지않음, FF 없음, maxlength, size는 좀 다른 의미
css 가 잘 먹는 elemenet다. 거의 문제가 없을 것이다.
border가 외부로 먹는다.

 

핵심- 크기는 border:0px,padding:0px 에서 시작하고, font-size로 크기를 맞추면 가장 정확하다.

text-align 먹는다.

기본 상단 정렬(공통) ie 는 vertical-align:midde 안먹는다.  ff 먹음

크로징 브라우저를 맞출려면? line-height : 칸높이로 맞출수 있음

 

: 결론- 잘먹음, 크로징 브라우저 해결 가능

 

button: 적용속성 없음

거의 다 잘먹음, 결론적으로 이상있으면 이미지로 바꾸면 됨, 가장 쉬움.

css 그러나 일반을 쓴다면 한가지 중요한 점은 border 를 바꾸지 않아야 입체버튼이 된다는것

border가 내부로 먹힌다.

 

콤보박스: 먹는속성없음

css는 일단 한칸짜리만 한다. 두칸이상하기는 빡셈

일단 외부정렬은 그냥 감, 안되면 absolute로

 

padding을 0으로 줘도 콤보박스는 미세padding이 생김, 즉 text와 같게 보이기 위해선 text에 패딩을 주어야함.

테스트결과 text에 padding 1xp 정도에서 맞춰짐.

 

height를 줄시에 극심한 크로싱브라우저 생김, 게다가 ie와 ff가 상하로 다르게 정렬됨

ff 상단, ie 하단 정렬됨.

 

해결법1, height를 주지 말고 font-size와 padding만을 이용해서 사이즈를 맞춰라.

그러나 이 방법도 우측 버튼의 의도치 않은 padding을 만든다.

(IE7 padding,border 안먹음)

 

다른 해결법은 콤보박스를 커스텀으로 만드는것이다. 그러나 난 싫다. 힘들다.

 

- 가장 손쉽게 맞추는법, text박스 기준으로 font-size를 같게 하고 text 박스 padding을 1px 크게 주라.

height는 주지 마라

그리고 크기가 커지면 콤보박스 padding을 키워야 되는데, 버튼이 이상해지므로 최대한 border를 이용하자.

border 외부로 먹음

 

그리고 콤보박스는 width가 좀 중요하다. 일단 안 주는 것이 좋다. 콤보박스의 값은 안에 들어가는 첫번째

값으로 자동 중앙정렬된다. 즉 첫값을 잘 주는게 좋다.

 

중앙 정렬이 중요하지 않는 UI일 경우는 width값을 줘도 된다. 그러나 IE는 왼쪽, FF만 text-align으로 정렬 가능함을

잊으면 안된다.

 

 

라디오버튼:
background-color가 ie는 버튼바깥, ff는 안에 색칠

문제는 그게 아니고 사이즈 조절이... 되는 브라우저도 있고 안되는 부라우저도 있고 또 width, height가 같아야된다.

그래서 라디오버튼은 그래픽으로 만드는것이 좋을것 같다.

 

체크박스

라디오버튼과 마찬가지, 그래픽 추천

 

파일

체크박스와 라디오는 대체가 더 빠르겠지만

text, select, 그리고 이 파일같은것은 일단은 그냥 쓰는걸 생각하는게 좋을것 같다.

jquery 같은걸 이용하지 않을바에야 그냥 쓰는게 속편하다.

 

파일은 아마 웹 요소중에서는 가장 유명한 이슈를 가지고 있다, 그게 버튼 커스텀인데

보완강화로 기능이 제한되어 버튼 바꾸기 이슈가 아주 유명하다.

 

font-family 에 따라 크기 차이도 난다. FF는 괜찮고 IE는 달라진다. 즉 none을 주는게 좋음

font-size는 text와 동일, padding 은 IE는 먹고, FF는 안먹는다. FF는 padding 2px로 보임, 

border도 IE는 먹고, FF는 안먹는다.

 

중요한 것은 width는 IE는 먹는데, FF 안먹음, 꼭 필요하므로 속성 size로 대신한다.

font-size 13px 기준 size="10" 약 75px 정도였다. 물론 font-family, padding, border 다 없을때

 

IE는 반대로 width가 먹고 100px 정도를 잡아먹는다, 버튼때문이다.

 

정리하면 이렇다. 크로스브라우징을 위해서는 오로지 font-size, width, 속성 size로만 크기를 맞추어야한다.

그래도 정갈하게 보일려면 text를 먼저 맞추고 그 크기에 file를 맞추는게 순리라고 본다.

 

근데 file를 커스텀해서 버튼을 가려준다면 상관없을 것이데 핵심 style은 다음과 같다.

 

z-index:2;filter:alpha(opacity='0');-moz-opacity:0;opacity:0

 

이건 IE, FF, Opera 세가지를 style을 다 쓴것.

 

간략하게 소개하자면 파일 엘리먼트를 z-index로 위로 옮기고 투명화시키는것이다.
그 밑에는 커스텀 앨리먼트를 쓴다. 입력창은 보이지 않게 한다면 의미가 없고 버튼은 크기조절이 font-size밖에 안되니
잘 생각해서 중앙에 맞추는것이 최선이다.

 

textarea
cols rows 이용 안한다고 보고
width, height로 맞추면되고, padding 0px,border 0px이면 제대로 맞는다
border는 외부로 나감.

list box
font-size가 먹질 않음
width,height 사이즈 맞추면 정확
border,padding 이 안으로 들어옴, text-align IE에서 안먹음
 

결론,

 

기본은 text박스 , 버튼으로 맞추라

 

라디오박스,체크박스는 만들라

 

샐렉트박스는 font-size와 padding으로 맞추라, 그리고 border를 써라, width,height는 쓰지마라

텍스트박스와 font 차이가 난다면 그걸 감수하는것이 낫다.

파일은 그대로 쓸려면 font-size만으로 맞추고 width와 size를 잘 계산해서 써라

커스텀을 하려면 버튼만 맞추고 커스텀

메모박스와 리스트는 잘 맞는편.

결론은 기본 컨트롤을 어느정도 CSS에 적용시켜 쓸려면 css를 극히 제한적으로 써야된다.

막 써도 되지만, 문제는 크로스브라우징이다. 그걸 생각해야된다.