작업실
나리야 분류

그누보드 나리야빌더 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 157 / 1 Page
RSS
그누보드 SMTP 외부메일 설정하는 방법 댓글 12

그누보드 예전에우분투 20.04에서 구글 SMTP메일서버를 활용한 postfix 메일 보내기(https://www.wsgvet.com/home/594)를…

그누보드5에 실시간 채팅 구축하기 댓글 1

서버 현재 제 홈페이지에 있는 실시간 채팅 기능 적용방법을 알려드리겠습니다.원래 기능이 더 업그레이드되면 올리려고 했는데, 언제 업그레이드가 될지 몰…

메일 서버를 Docker로 구축하여 그누보드, 라이믹스, 워드프레스와 연결하기 댓글 11

서버 들어가며도커로 메일서버 구축하기( 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…

최근글


새댓글


알림 0