새로운 방식 의 유튜브 동영상 을 가운데 정렬 하 기 - IFRAME - : : 캐 플 블로그 
 새로운 방식 의 유튜브 동영상 을 가운데 정렬 하 기 - IFRAME - 
 인터넷 , 웹 서비스 2012 . 09 . 04 14 : 16 
 지난 왜 유튜브 동영상 이 안 올라 갈까 ? - 커뮤니티 에서 유튜브 영상 넣 기 - 글 에서 EMBED 방식 의 이전 소스 코드 형식 으로 가져온 유튜브 동영상 을 가운데 정렬 하 는 방법 으로 DIV 박스 로 해당 코드 를 감싼 후 스타일 시트 로 text - align : center 속성 값 을 주 면 된다는 이야기 를 한 적 이 있 습니다 . 그러니까 아래 와 같이 말 이 죠 . 
 근데 문제 는 이게 EMBED 같 은 요소 에서 는 먹히 는 데 새로운 유튜브 의 소스 코드 형식 인 IFRAME 요소 에서 는 먹히 질 않 는다는 것 이 문제 입니다 . IFRAME 으로 가져와야 PC 뿐 만 아니 라 폰 이나 태블릿 에서 도 동영상 이 제대로 출력 되 고 , 더욱이 난 가운데 정렬 하 는 게 좋 은데 말 이 죠 . 이 와 같이 Text - Align 속성 이 먹히 질 않 는 대상 을 가운데 정렬 할 때 에 는 , 마찬가지 로 DIV 박스 를 사용 하 고 여기 에 새롭 게 여백 을 의미 하 는 Margin 속성 을 활용 하 면 됩니다 . 
 즉 , IFRAME 요소 를 DIV 요소 로 감싸 는 것 까지 는 똑같 은데 , 이 때 DIV 요소 의 너비 를 IFRAME 요소 의 너비 와 동일 하 게 맞춰 주 고 , 상단 과 하단 의 여백 은 대충 원 하 는 대로 , 좌우 여백 은 Auto 로 설정 해 주 면 된다는 것 이 죠 . 이렇게 하 면 DIV 요소 좌우 로 페이지 전체 너비 에 맞춰 균등 하 게 좌우 여백 이 들어가 게 되 고 , 결과 적 으로 DIV 요소 가 페이지 의 가운데 에 정렬 되 는 효과 를 얻 을 수 있 습니다 . 
 아래 의 동영상 은 이러 한 방법 으로 가져와 본 유튜브 의 IFRAME 방식 동영상 입니다 . 
 IFRAME 뿐 만 아니 라 다른 요소 들 도 이러 한 방식 으로 간단 하 게 가운데 정렬 을 시킬 수 있 습니다 . 아마 스킨 이나 레이아웃 쪽 에서 전체 컨텐츠 가 가운데 정렬 된 것 들 은 최상위 DIV 박스 를 이 와 같 은 방식 으로 가운데 정렬 시킨 게 대다수 일 겁니다 . 간단 한 거 지만 그래도 알 아 두 면 언젠가 어디 에선가 다른 곳 에서 라도 써먹 을 날 이 오 겠 죠 . 이상 입니다 . ^^ 
 Tags : CSS , iframe , YouTube , 동영상 , 유튜브 
 니 드 뽀 폴 쉐 2012 . 09 . 04 15 : 52 신고 댓글 주소 수정 / 삭제 댓글 쓰 기 
 이런 방법 이 있 군요 . @.@ 
 html 은 아닌 거 같 고 . .. 
 써먹 을 일 이 있 을 줄 모르 겠 지만 알 아 두 면 유용 할 것 같 습니다 . 
 덧 . 한글 상태 에선 Q 키로 로그인 이 안 되 는군요 . 참 신기 합니다 . ^^ 
 CApple 2012 . 09 . 05 01 : 15 신고 댓글 주소 수정 / 삭제 
 HTML 과 CSS 입니다 . ^^ 
 Minty 99 2012 . 09 . 04 21 : 23 신고 댓글 주소 수정 / 삭제 댓글 쓰 기 
 아 근데 요 . . 
 캐 플 님 은 윈도우 8 인증 문제 해결 하 셨 나요 ? ? 
 CApple 2012 . 09 . 05 02 : 03 신고 댓글 주소 수정 / 삭제 
 Minty 99 2012 . 09 . 05 23 : 20 신고 댓글 주소 수정 / 삭제 
 ㅎㅎ 성공 하 셨 나 보 네요 . 
 우왕 2012 . 10 . 19 23 : 29 신고 댓글 주소 수정 / 삭제 댓글 쓰 기 
 CApple 2012 . 10 . 20 00 : 13 신고 댓글 주소 수정 / 삭제 
 a 1215 2013 . 10 . 14 09 : 29 신고 댓글 주소 수정 / 삭제 댓글 쓰 기 
 찾 고 있 었 던 유용 한 정보 네요 ㅎㅎ 
 가운데 정렬 이 안 돼서 정말 고민 이 었 습니다 ㅋ 감사 합니다 . 
 박혜연 2014 . 07 . 07 09 : 36 신고 댓글 주소 수정 / 삭제 댓글 쓰 기 
 정보 유용 하 게 잘 보 고 있 어요 \ 
 궁금 한 게 있 는데요 모바일 에서 보 면 한쪽 으로 치우쳐 있 네요 \\ 
 컴 은 중앙 이 고요 
 CApple 2014 . 07 . 07 10 : 40 신고 댓글 주소 수정 / 삭제 
 모바일 웹 브라우저 에 따라서 div 를 통한 중앙 정렬 시 한 쪽 으로 약간 치우치 는 브라우저 들 이 있 는 것 으로 알 고 있 습니다 . 
 물론 이렇게 할 경우 엔 데스크 탑 쪽 에서 약간 치우쳐 지 게 되 지만 , 데스크 탑 에선 그렇게 크 게 차이 가 안 나 게 보이 기 때문 에 모바일 쪽 으로 맞춰 주 는 게 좋 을 듯 싶 습니다 .