개발/웹표준15 IE8 핵 사용하기(IE9 포함) HTML5 로 넘어가야 하는 이 시기에 아직도 크로스브라우징 문제에 발목이 잡혀 있다는 것이 원통할 따름입니다. ㅠㅠ 그나마 올해 초 Microsoft에서 IE6,7에 대해 강제 업데이트를 시행한 이후로 항상 사용자 중 대다수를 차지하던 IE6의 비율이 많이 줄어들게 되었죠~ 이건 정말 다행입니다. 하지만! IE8이 남아 있습니다. 사실 IE9도 그다지 맘에 들진 않습니다만, IE8은 웹 표준을 정말~ 정~말 어설프게 지원해서 골치가 아프네요.아직도 Windows XP 사용자가 많아서인지 국내 브라우저 사용자 비율 중 IE8이 가장 높은 것 같습니다. 그래서!! 다른 브라우저는 버리더라도, IE8은 안고 갈 수 있도록, 필요악인 IE8 핵을 좀 적어봅니다. 1. 기존에 많이 알려져 있던 핵! div {h.. 2012. 8. 2. CSS 로 세로 가운데 정렬하기 Vertical centering in CSS 세로 가운데 정렬을 하려면 absolute와 top:50% 속성을 이용해서 하는 방법이 많이 알려져 있었습니다. 그런데 그 방법이 좀 맘에 안들어서 새로운 방법을 생각해 봤는데 어디서나 잘 되려는지는 잘 모르겠네요. Chorme에서 테스트 해 봤습니다. #box1 { background-color:blue; min-height:150px; text-align:center; } #box2 { background-color:skyblue; vertical-align:middle; display:inline-block; } #box1:before { content:""; display:inline-block; min-height:150px; vertical-ali.. 2012. 7. 25. CSS 만으로 삼각형 만들기 CSS만 가지고 삼각형을 만드는 것은 불가능하다고 생각했었는데, 정말 기발한 방법이 있더군요~ 말풍선을 만들 때 사용하면 상당히 많은 도움이 될 것 같습니다. 위의 코드대로 작성하면 빨간 삼각형이 생깁니다. 다양한 곳에 응용이 가능할 것 같네요~참고: [http://jonrohan.me/guide/css/creating-triangles-in-css/] 그런데, 또 다른 방법이 있습니다. 엄밀히 삼각형은 아니지만, 다른 box 요소와 붙이면 말풍선을 만들 수는 있을 것 같아요~그냥 45도 기울이는 건데요~ 단점이 있다면, 삼각형이 아니라 마름모꼴이라는 것! 그리고 IE8에서는 작동하지 않는 다는 점이구요~ 장점이 있다면, 그림자를 적용할 수 있다는 것 입니다. 2012. 7. 20. CSS 만으로 clear float 문제 해결하기 어떤 상자 안에 또 상자가 있는 형태일 때!! 안에 있는 상자를 float 하면??? 이렇게 됩니다. 녹색 상자가 파란색 상자를 덮을만큼 길어지면 좋겠는데... 그럼 이걸 어떻게 해결할까요??? 바로 이런 모습으로~ 해결법은!!! 파란 상자의 id가 'blue' 일 때!! 로 스타일을 정의해 주는 것입니다. 간단하지만 유용하고 자주 쓰일 수 있는 방법인 것 같습니다. 출처: http://www.positioniseverything.net/easyclearing.html 2011. 12. 16. 이전 1 2 3 4 다음
