본문 바로가기

개발/웹표준15

[css] input text field height problem!! form에서 input type의 text field의 높이를 조절하고 싶을 때가 있습니다. 글자 크기를 키워버리면 문제가 되지 않지만~ 글자 크기는 그냥 두고 싶을 때가 있지요~ 그래서 CSS에서 높이를 키워 보았습니다. height: 18px; (왼쪽이 firefox, 오른쪽이 IE9) firefox는 이쁘게 잘 나오네요 그에 반해 Internet Explorer 9 에서는 '아이디'라는 글씨가 위로 붙어버리네요 이러면 곤란한데 말입니다~ 크로스 브라우징은 정말 고통스럽단 생각을 또 다시 하게되는 순간입니다. 그래서 이걸 해결하기위한 방법: 패딩 값을 조절해서 맞추자!! Height:18px; padding:5px; 확실하게 보이기 위해 5px로 했습니다. (왼쪽이 firefox, 오른쪽이 IE9) .. 2011. 9. 28.
웹페이지 글씨가 iPhone에서만 갑자기 커진다!? 모든 글씨 크기가 그런건 아니지만, iPhone에서 글씨가 크게 보이는 경우가 있습니다. Internet Explorer, Firefox, Chrome, Safari, Android에서도 잘 작동하는데, 유독 아이폰에서만... 이유인 즉 iPhone 자체적으로 글꼴을 약간 키워주는 기능이 있다는 것입니다.. 허허~ 이 기능을 CSS에서 끌 수 있습니다. html { -webkit-text-size-adjust: none; } 이렇게 해 주면 됩니다~ 저건 아이폰에서의 글꼴 크기 조정 기능을 어떻게 사용할 것인지 결정할 수 있는 스타일태그 인데요~ auto, none, 적용할 수 있다고 합니다. 2010. 11. 5.
CSS Box Model CSS를 시작할 때 가장 골치아픈 부분이 박스모델일 겁니다. 그나마!! Internet Explorer 8 이 나오고 나서는 좀 나아졌습니다. IE6 퇴출 운동과, Firefox와 Chrome의 점유율 확대, 그리고 아이폰과 아이패드로 인한 Safari의 급성장이 웹 프로그래머들을 약간 혼란스럽게 하지만~ 박스모델 부분에 있어서는 좋은 방향으로 변하고 있는 것 같습니다. 1. 박스모델이 뭔데 그러죠? 웹 프로그래밍 하면서 CSS로 너비, 여백, 테두리 등을 픽셀로 지정하는 방법의 차이 때문에 브라우저마다 다르게 보이는 문제가 있습니다. 브라우저가 얼마나 많은지... IE6, IE7, IE8, FF, Chrome, Safari, Opera.... etc. 여기에 DOCTYPE 을 어떻게 지정하느냐에 따라서.. 2010. 10. 13.

티스토리툴바