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

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