본문 바로가기

인터넷/티스토리 꾸미기

컨텐츠 이미지 라운딩

컨텐츠 이미지에 라운드를 줘보자!

티스토리에 이미지를 올릴때 라운드를 주어 이미지를 좀더 부드럽게 보이게 하는 방법을 포스팅 해볼려고 합니다 ^-^; 어쩌면 "포토샵으로 하면 되는거 아니야?" 할 수 있는데 매번 번거롭고 CSS로 충분히 커버가 가능하며 효율적이므로 이제 이렇게 한번 사용해보시길 바랍니다!

내 블로그의 컨텐츠 담당영역을 알아보자!

컨텐츠 안에만 들어가는 이미지에 라운드를 주기 위해서 컨텐츠를 담당하는 클래스명을 찾아보도록 하죠.

크롬 브라우저

여기선 크롬브라우저를 예로 알아보도록 합니다. CTRL + SHIFT + C 를 누르면 위의 이미지와 같이 나오는데 컨텐츠 영역으로 마우스 커서를 두다 보면 컨텐츠 영역으로 크게 범위가 잡히고 오른쪽에 DIV 클래스를 표시 해줍니다. 저는 entry-content 로 나오네요.

컨텐츠 클래스명을 찾지 않고 그대로 적용시키면 블로그의 모든 이미지에 라운딩이 들어가기 때문에 꼭 찾아야 합니다!

CSS 입력

.entry-content img {border-radius:15px;}

라운딩의 크기는 border-radius의 수치를 변경해 가며 원하는 라운딩 사이즈를 찾으시면 될 것 같아요.
참. 쉽죠? ^-^ 궁금하신 점이 있으시면 댓글 남겨주시면 답변해드리도록 하겠습니다!
조금 더 참고 할만한 CSS