Yesterday : 63
Total : 881,182
- 쿠팡파트너스
- 구글에드센스
- 애드핏
- 애드픽
- 달빛이비추는 금빛작업실
- #폰요리
- 생명유지필수영양소
- 코코소프트
- 재테크포럼
- 나라디자인
- 기면기의 기억을 걷는⋯
- Carbon Fiber Workroom
- 작은설탕
- 김장배추의 게임스토리
- 문또또 라이프
- 필로소피아트
- TakeALook
- 하포의블로그
- 주니엘의 라이프 스토리
- neverending
- NEOEARLY*
- 서기닷컴
- 나 혼자 중얼??
- 먹보a의 살찌는 블로그
- 블로그팩
- 내다보는 (창)
- 집사 강가이버
- JunToday.com
- Hi Hello, Daily
- 영웅엔진
- 사람의 향기
- READ!
- Half and Half
- 비행인생
- Urban Country Diary
- 푸우시로의 지식창고
- Never Ending Story
- 오다
- 꽃길만 걷자
- 실버스타그램
- 하이공도리
- MY FIRST REFRAIN
- 브로페's
- 지금, 당신은 행복합니까?
- JS Storage
- 여행지스크랩북
- 재무컨설턴트 이주호
- 미친듯이 만들어 재끼자.
- 마음의 평온
- Papa's Lab
- Almost nothing
- OK건설워커
- Enjoy the monent ~ Lao⋯
- Lifelog of Sol
- moviescale
- The Invincible Iron Man
- 도메인연결
호기심 가득! 모지모지!
티스토리스킨 반응형#2 라운드 효과주기 본문
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
를 넣어줍니다.
마찬가지로 수치는 본인이 원하는 크기로~^^
라운드처리하나만으로도 뭔가 새로워진 본인의 블로그를 볼 수 있을겁니다.^^
무지!
공감하신다면 공감버튼 꾸욱~!!!!
-
알 수 없는 사용자
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;} 입력했습니다. -
모지모지 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} 를 넣어주세요~ 님이 적으신 부분은 이 댓글아래 관련글(카테고리 다른글)에 적용되는거에요~^^ -
알 수 없는 사용자
2016.04.13 17:14
아 그렇군요.
저는 같이 적용 되는 줄 알았네요 ^^ 감사합니다.
티스토리 이거 복잡하기는 한데 변화 되는 걸 지켜보는게 재미가 있네요 ㅎ -
@blvkk_k 2016.04.20 17:01 신고 안녕하세요 저위에 이미지 튀어나오게 하는방법은 무었인가요??
-
모지모지 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);}
추가하시면됩니다. -
@blvkk_k 2016.04.20 17:05 신고 블로그 첫화면 섬네일 이미지와 글 안쪽 이미지를 커서대면 튀어나오게 하고 싶은데요
-
모지모지 2016.04.20 21:45 신고 http://www.mojimoji.co.kr/593
게시물로 설명을 추가해보았습니다.
말씀하신 목록도 HTML변경없이 적용은 되네요^^~
사실 라운드가 없는 박스형의 경우 박스크기는 그대로고 안의 이미지만 확대하는게 더 훨씬 좋아보이는데 혹시 이미지에 라운드가 없다면,
.list_content .thumbnail_post {overflow:hidden}를 추가해보세요. -
모지모지 2016.06.23 20:56 신고 본문의 이미지는 라운드가 필요하지 않고, 관련글의 박스는 라운드처리하고 싶다는 말씀이시죠?
관련글 박스는 아래 두 부분의 끝쪽에다가
list_related .link_related <-- 대표이미지가 없는 경우
.list_related .thumb_type .link_related <-- 대표이미지가 있는 경우
--> 요걸 붙이기만 하면 됩니다. border-radius:20px
전부 쓰실 필욘 없습니다.
제가 질문을 잘 이해했는지 모르겠네요. 도움이 되셨길 바래요.
-
모지모지 2016.06.24 20:34 신고 아하~
319줄근처(정확하진않음)에 .list_content .thumbnail_post이란게 있을겁니다. {}끝에 border-radius:10px 를 넣으시면 목록이미지가 라운드처리됩니다.^^ -
mocdori 2017.02.23 11:12 신고 댓글 참고하고, 찬찬히 따라하니 잘됩니다~ 요것도 성공했네요^^ 모지님 감사합니다~