썸네일 마진 수정

?
Extra Form
PHP PHP 5.6
CMS XpressEngine

안녕하세요.

 

현재 XE의 한 위젯에서 표시하는 썸네일의 마진 크기가 너무커서 그것을 줄이고자 이리저리 시도해 보았습니다.

 

우선 크롬으로 인스펙션 해 본 결과 그 마진이 20px으로 되어있고 이것을 줄이면 제가 원하는 모양으로 해결이 되는듯 합니다만 문제는 이것을 조절하는 CSS를 찾아보니 "/layouts/simplestrap/css/less/thumbnails.less"으로 나옵니다만

 

제가 볼수있는것은 "/layouts/simplestrap/css/"가 다입니다. "/less/thumbnails.less"를 찾지못하고있는점. 그리고 또하나 문제는 이곳이 "margin-bottom: @line-height-computed;"으로 되어있어서 크롬에서 인스펙션에서 표시되어있는 

.thumbnail {
  1. display: block;
  2. padding: 4px;
  3. margin-bottom: 20px;

이것을 찾아볼수가 없네요;;

 

이런경우엔 어떻게 margin-bottom을 줄일수 있을까요?;

 

죄송합니다. 최근 1.8에서 1.11로 업데이트하다가 모바일에서 이미지를 터칭하면 화면이 슬라이딩 되지 않는문제부터 이것저것 자잘한것에 하루를 꼬박 보내고 결국 다시 업데이트전에 백업해놓은것으로 돌리고, 돌리다 이상해지고를 몇번 반복하고; 그러다보니 이리저리 검색하다가 이곳까지 넘어오게 되었어요.

 

현재 업데이트 문제등은 모두 다 겨우 한숨 돌릴정도로 겨우 이전의 1.8 버전으로 돌려놓았습니다만 혼자 찾다 찾다 해결이 안되어 이렇게 선배님들께 여쭤 봅니다.

 

바쁘실텐데 읽어주셔서 감사합니다. 좋은하루 되십시오.

  • bootstrap.css의 5004번째 줄 margin-bottom 값을 조정 해보시기 바랍니다.

    그후 bootstrap.min.css 파일도 수정하셔야 하지만 압축화 되어있어 해당부분을 찾기 힘드실테니
    삭제해버리시고 위에서 수정했던 bootstrap.css파일을 카피하셔서 이름을 bootstrap.min.css 으로 변경해주시거나 css를 압축해주는 프로그램, 사이트를 이용하셔서 압축하신후 이름을 bootstrap.min.css 으로 저장하시면 됩니다.
  • 추가로 .less는 css상의 클레스 등을 반복사용하거나 체계화 하기 위한 처리방법중 하나 입니다.
    가상의 선택자? 변수? 정도로 생각하시면 될것 같네요
  • ?
    • sgpg
    • 질문기여자
    우와!! 안그래도 bootstrap.css의 margin-bottom은 보이는대로 다 수정해나가보았습니다만 아무 반응이 없길레 "아..." 이러고 있었는데. 너무너무 감사드립니다!
    less는 반복 변수처리이군요!!!!
    우와.. 소중한 시간 내어주셔서 감사합니다
    취미로 웹관리 하다가 이제야 큰맘먹고 쉐어드 호스팅이 아닌 VPS/Dedicated 호스팅으로 넘어왔는데 넘어오자마자 WHM벽에 부딛혀 허덕거리다 결국 사이트 날려먹고 살리고 날려먹고 살리고를 주말내내 반복하다가 이제야 좀 숨통이 트이네요.
    감사드립니다!! 소중한 시간 내어주심에 감사드리며! 좋은하루 되시길 바라겠습니다!
  • ?
    아마도 bootstrap.min.css 는 그대로 두고 bootstrap.css만 계속 수정하고 계셨나보네요 ㅠ.ㅠ
    css나 js파일 이름에 min이 붙는 것들은 원본파일에서 띄어쓰기나 개행을 모두 삭제한 버전 입니다.
    보통 부트스트랩 같은 내용물이 거대한 녀석들에 min파일이 사용되곤 합니다.

    min파일의 경우 원본에 비하여 용량이 작아 로딩속도 향상 및 트래픽절감에 도움이 됩니다.

    문제는 소스를 극도로 다이어트를 시켜 에디터로 열면 시각적으로 난독화해논 수준으로 보입니다.
    (그나마 css파일은 덜한테 js파일은 수정한번 하려면 눈알이 뽑히죠...)

    최종 완성본의 경우 수정할 내용이 없으니 min파일로 내용물을 압축하여 제공하는것이 권장되지만
    일반적인 우리들 개발자, 운영자들은 사이트를 계속 수정하는것이 보통인데 할때 마다 수정하고 압축하고 하기는 번거롭죠...

    최종완성본이 아닌 개발중인 css/js파일은 min처리 하지 말고 그냥 쓰는것이 편하긴 합니다.
  • ?
    • sgpg
    • 질문기여자
    넵; 말씀해주신것처럼 bootstrap.css만 손보고 bootstrap.min.css에서는 어디있는지 찾질못해서 '내가 잘못찔러보는중인가?' 싶었어요.
    우선 말씀해주신것처럼 그냥 쓰다가 속도 늦어지면 그때 압축을 해야겠어요.

    그냥 지나칠수도 있었던 일인데, 시간내어 주셔서 감사합니다!
  • ? Lv3
    /layouts/simplestrap/css/ 안에 있는 css 파일중에
    레이아웃관련된 css에
    .thumbnail {
    margin-bottom: 20px !important;
    }
    를 추가 하시면 될것같습니다.

    문제는 .thumbanail 이라는 클래스가 사용된 곳에서는 모두 마진이 바뀌기때문에 문제가 생길수있어서
    선택자를 좀 더 자세하게 적는다면 될것같습니다.
  • ? Lv3 ?
    • sgpg
    • 질문기여자
    아! 이것도 제가 해봤었는데 " !important;" 이건 붙이지 못했었어요; 저걸 붙이면 또다른 해결방법이 되는군요!

    심플스트랩으로쓰는 썸네일이 하나밖에 없어서 이것저것 하나씩 찔러보기도 했었어요.

    시간내어 제 글을 읽어주시고 귀중한 조언까지 주셔서 대단히 감사합니다!