분류 나리야

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

컨텐츠 정보

본문

현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.


우선 적용 전 이미지입니다.


4be450638fbbbada2c8be12f2669e051_1600777636_0421.png


위와 같이 사진이 흰색 배경이라면, 글과 이미지의 경계가 명확하지 않아 가독성이 떨어집니다.




이제 적용 후 이미지입니다.


4be450638fbbbada2c8be12f2669e051_1600777665_9267.png
 


위와 같이 흰색 배경인 사진도 글과의 경계가 명확해지면서 가독성이 올라갑니다.



이제 적용 방법을 알려드리겠습니다.


/skin/board/NB-Basic/style.css 파일에서


25번째 줄에 있는



#bo_v_con img {
	max-width:100%;
	height:auto;
}


위 내용을



#bo_v_con img {
	max-width:100%;
	height:auto;
	-webkit-box-shadow: 0px 0px 12px 3px rgba(163,163,163,0.93);
	-moz-box-shadow: 0px 0px 12px 3px rgba(163,163,163,0.93);
	box-shadow: 0px 0px 12px 3px rgba(163,163,163,0.93);
}


위와 같이 box-shadow 효과를 추가해줍니다.



그리고 44번째 줄 근처에 있는 



#bo_v_img a.view_image {
	display:block;
}


위 내용을



#bo_v_img a.view_image {
	display:block;
	margin:1.0rem;
}


위와 같이 마진을 추가해줍니다. 


이걸 넣어야 모바일에서도 박스 쉐도우 효과가 깨지지 않습니다.



참 쉽죠? ^^

관련자료

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

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

댓글 0
등록된 댓글이 없습니다.
Total 157 / 1 Page
RSS
그누보드 SMTP 외부메일 설정하는 방법 댓글 6

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

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

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

메일 서버를 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…

최근글


새댓글