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

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

 

 

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

그래서 해당 스케치북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%로 마진 , 패딩 값 없이 자리잡는다..