비손 행복나눔 푸드뱅크

에덴을 풍성하게 만들던 비손강 의 흐름은 값없는 은혜와 사랑 입니다. 비손은 이런 마음 으로 어려운 이웃들과 함께 합니다

담당자 연락처 010-9491-0191

비손 고객대응 담당자 연락처

비밀 지원 상담 게시판 운영

회원 가입후 지원상담 게시판을 이용 하세요

이메일 문의

관리자 메일 : elim7575@naver.com

조회 수 45 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
관리사항 구글 지도나 유튜브 영상등 프레임 소스를 가져올시 게시판 컨텐츠 창을 넘어가는 현상을 해당 요소에 대응하는 코딩을 추가했다.

희망을 나누는 비손강 사람들

 

게시판 에디터 에서 글쓰기를 하던중 구굴 지도의 프레임 소스를 저장 하였더니 모바일 검사에서 구글 지도의 프레임이 

사이트 컨텐츠 프레임을 넘어 버리는 현상이 생긴다.

 

스케치북 5 게시판 _ 프레임 오류.JPG

 

글쓰기 에디터에 유투브 동영상을 넣을때와 같은 현상이다.

그래서 해당 스케치북5 보드의 board.css 를 수정하기로 했다.

 

수정 파일 경로 : ../modules/board/skins/sketchbook5/css/board.css 파일

 

해당 스타일시트 파일에 아래 문구를 추가해줬다.

 

/*youtub whdt_coad css _img_box coad css */

.video-box {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }

.video-box iframe,.video-box object,.video-box embed { position:absolute; top:0; left:0; width:100%; height:90%; }

}

.img_box {display: inline-block; overflow: hidden; margin: 0; background-color:#fff; padding:0px; }

.img_box iframe,.img_box object,.img-box embed {width:100%; height:; }

}

 

유튜브 동영상이나 구글지도 같은 프레임으로 소스를 퍼올경우 해당 동영상소스나 오브젝트 소스 프레임 소스 등에 

속성 태그를 줌으로 해당 프레임이 게시판 스킨의 컨텐츠 바디를 넘어가지 않도록 자동으로  width:100% 으로 조정해 주는 태그이다.

 

그런데 수정을 하면서 코드를 살펴보니 video-box 와 비슷한 class 속성이 이미 스케치북5 보드에 있다.

에디터 875 라인에 있는 아래와 같은 코드이다.

 

모바일에 가로사이즈를 대응 시키는 코드같다.

 

/* Mobile */

.m_editor{margin:12px 0 8px}

.m_editor textarea{width:100%}

/*youtub whdt_coad css */

.video-container {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }

.video-container iframe,.video-container object,.video-container embed { position:absolute; top:0; left:0; width:100%; height:90%; }

}

 

코드가 중복되긴 하지만 어차피 class 명을 달리주어서 게시판에 글 을 작성시 감싸틑 p 태그나 div 태그시 class 명을 video_box 혹은 ing)box 등으로 클라스명을 줄것이기 때문에 상관은 없다. 어차피 video_container(비디오 콘테이너) 보다는 비디오 박스(video_box) 가 더 직관적이니 사용시 편할듯하다.

 

그리고 img_box 는 같은 컨테이너 이지만 비디오 컨테이너 와는 조금 성격이 다른 코드이다.

 

비디오 콘테이너 는 유튜브나 동영상을 불러올시 게시글의 위에 붙게 만들고 세로 크기가 정해져 있지만 img_box 의 코드는 컨텐츠의 가로 사이즈만 100%로주고 세로 사이즈는 넣질 않았다..

 

즉 가로만 100% 영역을 차지하고 세로는 프레임에 불려오는 속성크기를 그대로 적용시킨다 그리고 게시물의 top에 위치하지 않고 게시글 사이에 자유롭게 들어간다...

 

비슷한 컨테이너 class 지만 사용용도는 좀  다르다...

이미지 파일에 적용시는 100%크기로 자리잡는다 .....

 

아래는 적용된 코드 이미지 인데 시험적으로 img_box 클라스를 주어봤다....

자동으로 게시물에 100%로 마진 , 패딩 값 없이 자리잡는다..

 

 

 

유튜브_이미지 프레임 고정 소스 수정.JPG

 

 

?
  • profile
    하얀하늘 2020.05.11 05:51
    해당 스킨에 변수등으로 자동으로 유튜브 프레임 소스를 태그할때 컨테이너 클라스가 적용되는 방법이 있을것도 같은데 찾아봐야겠다.

CLOSE