분류 나리야

그누보드 나리야빌더 NB-Basic 보드스킨 GIF 움짤 표현 최적화하기

컨텐츠 정보

본문

그누보드 5.4.2.8 버전부터 움직이는 GIF 이미지를 올리면 MP4나 WEBM으로 변환하여 보여줄 수 있습니다.


https://sir.kr/g5_plugin/7521


위 플러그인으로 가능합니다.


여기에 CSS만 추가로 작업해주면 표현해주는데 완벽할 것입니다.


현재로서는 GIF 움짤 원본 이미지 사이즈에 맞게 표시가 되므로, 가로가 큰 움짤의 경우 모바일에서 보면 짤립니다.


/skin/board/NB-Basic/style.css


그래서 위 파일의 24번째 줄 근처에



#bo_v_con video{
	max-width:100%;height:auto
}
video[poster]{
	object-fit:fill
}


위 내용을 추가해주면, 가로폭이 줄어드는만큼 움짤도 줄여서 보여줄 것입니다.



적용 전


babc0c1a2885f9caab4ee75d30fc553d_1599736225_5002.png


오른쪽이 짤려서 오토바이가 안보입니다.


---


적용 후



babc0c1a2885f9caab4ee75d30fc553d_1599736259_2052.png
 

가로 크기가 조정되어 오토바이가 잘 보입니다.

관련자료

  • 서명
    우성군의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 2개 / 1페이지
Total 155 / 1 Page
RSS
메일 서버를 Docker로 구축하여 그누보드, 라이믹스, 워드프레스와 연결하기

서버 들어가며도커로 메일서버 구축하기( https://www.wsgvet.com/home/673 )엊그제 윗 글을 올렸습니다.기존에 올렸던 글은 모든…

도커로 메일서버 구축하기

서버 도커 메일서버란?도커에서 메일서버를 직접 운영할 수 있게 해줍니다.SMTP, ESMTP, POP3, IMAP 방식을 사용할 수 있습니다.자신의 …

그누보드5.4 나리야빌더에서 box shadow 효과 적용하기

나리야 현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.우선 적용 전 이미지입니다.위와 같이 사…

그누보드 나리야빌더 NB-Basic 보드스킨 GIF 움짤 표현 최적화하기 댓글 2

나리야 그누보드 5.4.2.8 버전부터 움직이는 GIF 이미지를 올리면 MP4나 WEBM으로 변환하여 보여줄 수 있습니다.https://sir.kr/g…

윈도우10 ffmpeg로 GIF 움짤을 MP4, WEBM으로 변환하는 방법

서버 1. 들어가며GIF 움짤을 하나씩 변환하려면 온라인 컨버터 사이트를 이용하면 편합니다.하지만 움짤이 몇백개가 넘어가면 힘들겠죠? ^^;;그래서 …

php 도커 이미지에 ffmpeg 추가하기

서버 1. 들어가며최근 그누보드5.4에 움직이는 gif 이미지를 mp4 동영상으로 변환하는 플러그인이 올라왔습니다.https://sir.kr/g5_p…

최근글


새댓글