Today : 26
Yesterday : 116
Total : 857,076
«   2021/09   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
Archives
Today
26
Yesterday
116
Total
857,076
관리 메뉴
프로필사진 방명록
Today:26     Yesterday:116     Total:857,076

호기심 가득! 모지모지!

티스토리스킨 반응형#2 라운드 효과주기 본문

티스토리 | 내맘대로스킨

티스토리스킨 반응형#2 라운드 효과주기

2016. 4. 8. 15:36
728x90

 

CSS를 조금 아신다는분은 뭐 사실 많이들 아실 내용이긴 하지만,

간단히 border-radius를 넣어 글에 들어간 이미지나 기타 박스형태의 디자인을

라운드형태로 변경해주는 방법입니다.

 

 

 

 티스토리 반응형 스킨이 모바일대응에 초점이 맞춰진 바

큰 이미지를 박스형태로 보여주는 디자인이 많은데요.

 

그런 박스가 너무 딱딱하게 여겨진다는 분들이 따라하면 좋을거같네요.

 

 

 

 

 

 

일단, 위의 이미지처럼 본문에 삽입된 이미지를

포토샵 작업에서 라운드처리를 하지않고도

라운드된 형태로 변경할 수 있습니다.

 

그리고, 티스토리스킨 반응형#2에서

관련글 리스트의 형태가 위의 그림에서처럼

박스형태인데 그것또한 라운드처리할 수 있습니다.

 

 

 

 

윗부분은 바로 본문이 들어가는 위치 클래스명이 area_view이군요.

 

 

CSS창을 열어서 위와 같은 위치를 찾으시면

.area_view 속성들이 쭉 나올겁니다.

 

여기에 .area_view img {border-radius:10px}

 

를 추가해줍니다.

 

 

쉽게 본문안의 이미지는 모서리가 10px정도의 라운드를 주어라란 뜻입니다.

수치는 본인의 취향에 따라 변경하시면 돼요~~^^

 

 

 

 

 

자. 이제 관련글 박스도 라운드로 바꿔봐야겠죠?

위의 본문 이미지를 라운드로 변경하셨다면 방법은 거의 동일합니다.

 

 

CSS창에서

위의 속성명을 찾아주세요.

 

.list_related .link_related <-- 관련글인데 대표이미지가 없는 경우

.list_related .thumb_type .link_related <-- 관련글인데 대표이미지가 있는 경우

 

해당 속성값들이 적혀있는 맨 끝에다가

 

border-radius:20px

 

를 넣어줍니다.

마찬가지로 수치는 본인이 원하는 크기로~^^

 

 

 

라운드처리하나만으로도 뭔가 새로워진 본인의 블로그를 볼 수 있을겁니다.^^

 

 

 

무지!

공감하신다면 공감버튼 꾸욱~!!!!

 

 

728x90
댓글달고 친해지기 (12)
  • Favicon of https://wearealive.tistory.com BlogIcon 진국의신사 2016.04.13 01:50 신고 관련글 박스 라운드를 적용하려면 border-radius:20px 이걸 뒤에 넣으라고 하셨는데요.
    아무래도 저는 적용이 안되나봅니다.

    혹은 저의 실수가 있는거 같은데 봐주세요.
    글내용에 마지막 뒤에 입력을 했는데 차이가 느껴지지 않네요.

    .list_related .link_related {display:block;overflow:hidden;position:relative;width:185px;height:200px;margin:0 auto;border:1px solid #e8e8e8;background:#fafafa;font-size:13px;;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#fff;border-radius:20px;}
    .list_related .thumb_type .link_related {width:185px;height:200px;border:0 none;border-radius:20px;}

    입력했습니다.
    아무래도 이게 아닌 거 같기도 한데 하하하 이걸 입력하면 메인에서 글 목록 이미지가 둥그렇게 바뀌는거죠?
    저는 그냥 삐죽한 사각형 인데 뭐가 문제일까요?

    border-radius:20px 이것만 입력하면 안되서 혹시나하고 앞뒤 세미클론 추가하고 {} 안에도 넣어봤지만 반응이 없네요. ㅠㅠ
    최종적으로 본문 글과 똑같이 ;border-radius:20px;} 입력했습니다.
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.04.13 03:18 신고 메인, 블로그 첫화면에서 나오는 박스를 말씀하시는거군요? 고건 CSS 306줄 근처에 .list_content .thumbnail_post { float:right; width:150px; height:150px; margin:6px 0 5px 30px } <-- 이게 있을거예요. 그 아래에다
    .list_content .thumbnail_post img{border-radius:10px} 를 넣어주세요~ 님이 적으신 부분은 이 댓글아래 관련글(카테고리 다른글)에 적용되는거에요~^^
  • Favicon of https://wearealive.tistory.com BlogIcon 진국의신사 2016.04.13 17:14 신고 아 그렇군요.
    저는 같이 적용 되는 줄 알았네요 ^^ 감사합니다.
    티스토리 이거 복잡하기는 한데 변화 되는 걸 지켜보는게 재미가 있네요 ㅎ
  • Favicon of https://sneakerstuff.tistory.com BlogIcon @blvkk_k 2016.04.20 17:01 신고 안녕하세요 저위에 이미지 튀어나오게 하는방법은 무었인가요??
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.04.20 19:34 신고 이미지확대를 말씀하시는거군요. Css에
    area_view img{-webkit-transition:all 1s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}

    .area_view img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.05);-o-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);}
    추가하시면됩니다.
  • Favicon of https://sneakerstuff.tistory.com BlogIcon @blvkk_k 2016.04.20 17:05 신고 블로그 첫화면 섬네일 이미지와 글 안쪽 이미지를 커서대면 튀어나오게 하고 싶은데요
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.04.20 21:45 신고 http://www.mojimoji.co.kr/593
    게시물로 설명을 추가해보았습니다.
    말씀하신 목록도 HTML변경없이 적용은 되네요^^~
    사실 라운드가 없는 박스형의 경우 박스크기는 그대로고 안의 이미지만 확대하는게 더 훨씬 좋아보이는데 혹시 이미지에 라운드가 없다면,
    .list_content .thumbnail_post {overflow:hidden}를 추가해보세요.
  • 2016.06.23 20:30 비밀댓글입니다
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.06.23 20:56 신고 본문의 이미지는 라운드가 필요하지 않고, 관련글의 박스는 라운드처리하고 싶다는 말씀이시죠?

    관련글 박스는 아래 두 부분의 끝쪽에다가
    list_related .link_related <-- 대표이미지가 없는 경우
    .list_related .thumb_type .link_related <-- 대표이미지가 있는 경우
    --> 요걸 붙이기만 하면 됩니다. border-radius:20px
    전부 쓰실 필욘 없습니다.

    제가 질문을 잘 이해했는지 모르겠네요. 도움이 되셨길 바래요.
  • 2016.06.24 15:29 비밀댓글입니다
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.06.24 20:34 신고 아하~
    319줄근처(정확하진않음)에 .list_content .thumbnail_post이란게 있을겁니다. {}끝에 border-radius:10px 를 넣으시면 목록이미지가 라운드처리됩니다.^^
  • Favicon of https://mocdori.tistory.com BlogIcon mocdori 2017.02.23 11:12 신고 댓글 참고하고, 찬찬히 따라하니 잘됩니다~ 요것도 성공했네요^^ 모지님 감사합니다~
댓글쓰기 폼