Front-End/HTML & CSS

[CSS] IE(인터넷 익스플로러)에서 position absolute가 작동되지 않을때

인터넷 익스플로러는 RIP 했지만 죽어서 구천을 떠도는 망령 짓을 여전히 하고 있다. 크롬, 파이어폭스, 사파리와 같은 여타의 브라우저에서 position absolute가 그대로 적용돼서 나왔지만 IE에서는 적용이 안될 때가 있다. width와 height를 100% 가득으로 채워주고 top, bottom도 0으로 나올 수 있게 설정했다. 게다가 부모의 position 도 relative였다. 하지만 콘텐츠 이미지 크기가 좁쌀만 하게 나오고 transform의 rotate까지 줬더니 영역 밖을 벗어났다. 영어로 구글링을 하던 중 친절하게 한글로 알려준 블로그가 있었다. 부모 요소의 태그가 td인지 확인해야 한다. td태그 (display:table-cell) 일 경우에는 일부 브라우저에서는 positi..

[CSS 반응형 단위] Rem, Em 정리 및 활용 (feat. 드림코딩)

반응형 웹사이트를 구축하기 위해서는 창에 사이즈에 따라 유동성 있게 움직이는 콘텐츠를 담아내야 한다. 예전에 스마트폰으로 어떤 웹사이트를 들어갔다가 피씨버전으로 뜨는 걸 보고 불편해서 바로 나왔던 적이 있다. 상품을 구매하기 위해 들어갔다가 제품도 안 보고 도로 나오게 된 것이다. 그 기업 입장에서는 모바일 버전을 제대로 구축해놓지 않아 고객 한 명을 바이 바이 한 것일 수도 있다. 반응형으로 페이지를 구축하고 어떤 사용자가 이용하든 보기 편리하게 만들어내야 한다. 그러기 위해선 px과 같은 절대적인 고정형 단위가 아닌 상대적인 단위를 활용할 줄 알아야 한다. 콘텐츠가 물처럼 어디든 담길 수 있게 말이다! CSS의 상대적인 단위 rem, rem, vw, vh, % 1. Rem 웹에 가장 최상위인 루트 요..