일반적으로 익스플로러 구버전을 고려한 홈페이지를 만들 때에는 CSS3의 transform 속성을 쓸 수 없습니다. 하지만 정말 써야 할 상황이 올 수도 있는데요, (물론 그럴 때를 고려해서 익스플로러 구버전을 고려할 때에는 이런 속성을 쓸 수밖에 없는 홈페이지 디자인을 하지 않지요.)




해상도에 따라 변하는 화면에 꽉 차는 동영상을 삽입해야 할 때 CSS3의 transform 속성을 쓰지 않으면 답이 없습니다.


다음 캡쳐에 딸린 홈페이지의 html5 video 속성에 CSS3의 transform 속성이 쓰였다는 사실을 알 수 있습니다.


(이 홈페이지의 전체 소스를 서버에 올리지 못하는 점 양해 바랍니다. 특히 완성되지 않은 홈페이지를 올리기에는 동영상의 저작권 문제가 있습니다. 의뢰받은 홈페이지 제작에만 써야 하도록 허락받은 저작권이 존재하는 동영상인지라...)



화면에 꽉 차는 video는 세로 크기가 유동적이기 때문에, 기존 xhtml의 방법( top:50%; CSS 속성을 준 다음 margin-top에 마이너스 값을 원래 컨텐츠의 반만큼 줘서 가운데로 오게 하는 방법)을 사용할 수 없습니다.


특히 이런 기법은 반응형 홈페이지에 많이 사용되기 때문에, 반응형에서 제대로된 홈페이지를 만들려면 CSS3가 필수적이라는 뜻이 되겠지요.


그래서 위의 경우 transform:translateY(-50%); 를 사용했습니다.




trasform(translate) 속성은 html5에서 컨텐츠를 가운데 정렬 시킬 때 상당히 자주 쓰일 만한 속성이랍니다.


특히 컨텐츠의 크기가 유동적일 때에도 사용할 수 있어서 반응형 홈페이지에 잘 어울리는 속성이지요.


X축 가운데 정렬 : position:absolute;left:50%;transform:translateX(-50%);

Y축 가운데 정렬 : position:absolute;top:50%;transform:translateY(-50%);

X, Y축 가운데 정렬 : position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);


물론 이 효과를 제대로 구현하기 위해서는 적절한 부모 태그에 position:relative; 속성을 줘야 할 것입니다.






위의 캡쳐처럼 위아래를 자르는 동영상을 올리려면 부모 태그에 적절한 height값을 준 다음 overflow:hidden; 속성을 주면 됩니다. 굳이 위의 경우가 아니더라도 CSS3의 transform(translate)를 써야 할 상황은 종종 생기니 이런 부분은 알아두는 것이 좋지요 ^^





댓글을 달아 주세요

  1. 머무는바람 2015.08.27 23:01 신고  댓글주소  수정/삭제  댓글쓰기

    ^^
    저에게는 달나라 이야기 ^^;;

티스토리 툴바