사진과 같은 이미지의 모서리를 둥글게 만들어 주는 사이트입니다.
가장 마음에 드는 것은 둥글게 되고 난 후의 모서리 부분 배경을 투명하게 처리해 주는 기능이 있다는 점입니다.
https://pinetools.com/round-corners-image
설명이 필요없어 생략합니다.
그냥 들어가보면 압니다.
(이 사진은 코드를 넣어 귀퉁이를 둥글게 처리함.
원래 이미지는 직각임)
# 이미지 모서리를 둥글게 해서 어디에 쓰는가?
네이버 블로그 프로필의 사진 이미지는 보통 모서리가 90도 직각인 사진이 올라갑니다.
하지만 이런 부분에 대해 조금 둥글게 다듬어야 편해 보이는 사람들이 있습니다. 혹은 그렇게 느낀다거나요.
그렇게 하면 모서리를 둥글게 해 주는 무료 웹사이트 공간은 많은데 둥글게 되고 난 후의 이전 채워졌던 공간이 투명하게 처리되지 않아 이것 또한 신경쓰이는 사람들이 있습니다. 혹은 특정 배경에서 그 부분이 하얗게, 혹은 다른 색으로 처리가 되어서 눈에 띌 수 밖에 없어 지우고 싶을 수도 있고요.
그럴 때 사용하면 되는 곳입니다.
무료이고 사용법이 정말 간단합니다. 모서리 여백을 특정 색으로 채울 수도 있습니다.
또한 프로필 사진이 아니라 블로그 맨 위나 아래에 있는 길다란 사진… 위에 있으면 보통 ‘헤더’ 이미지라고 하는데 그런 길다란 사진의 네 군데 귀퉁이를 모두 5px~10px 정도로 다듬어 주면 뭔가 부드러운 분위기가 느껴집니다.
그런 곳을 위해서도 이용할 수 있습니다.
혹은 이런 블로그나 어떤 글, 혹은 자료에 쓸 사진의 귀퉁이를 다듬는데도 쓸 수 있습니다.
보통은 그냥 직각으로 집어넣지만 여기에도 둥근 포인트를 주면 분위기가 달라집니다.
# 블로그나 홈페이지는 코드 사용
블로그와 같은 경우라면 일일이 위의 무료 사이트를 이용해서 하나하나 다듬고 보정해 넣어줄 필요가 전혀 없습니다. 너무 힘들어서 그만두게 됩니다.
그런 경우에는 구글에서 관련 코드를 검색해서 일일이 집어넣어가며 자신에게 맞는 것을 찾아 집어넣으면 됩니다. 코딩이라는 것에 대해 약간이라도 개념이 있으면 쉽게 찾아 쉽게 적용할 수 있겠지만 그게 안되면 하나하나 작업해 가면서 결과물을 보고 그 상태에서 될 때까지 수정해 나가는 수 밖에 없습니다.
아! 요즘에는 ChatGPT 와 같은 AI가 있다고 하니 물어보면 되겠네요.
워드프레스 블로그라면 이렇게 검색해 보시기 바랍니다.
‘wordpress round corner image additional css’
wordpress round corner image 는 워드프레스 라운드 코너 이미지, 로써 대충 이런 것을 검색해 달라는 의미입니다.
뒤의 Additional CSS는
1. 워프의 자식테마를 따로 만들지 않아도 되고
2. 사용중인 테마가 업데이트 되어도 수정한 부분이 계속 적용될 수 있고
3. 무엇보다 굉장히 간편하다는 점에서
추천하는 키워드이자 방법입니다.
워프 관리자 화면에서 Appearance의 Additinoal CSS에 들어가 구글에서 찾은 코드를 하나하나 입력하면 그 자리에서 바로 사진들이 어떻게 변화하는지 알 수 있습니다. 코드도 굉장히 간단하고요.
예를 들면 이 블로그에는 아래의 코드를 집어넣었습니다.
.entry img {
border-radius: 7px;
border: none;
}
테마에 따라 되는게 있고 안되는게 있어서 여러번의 시행착오 끝에 찾아낸 코드입니다.
그러니 직접 검색해 보는 수 밖에 없습니다. 키워드는 결과를 보고 하나하나 수정해 가면 됩니다.
이렇게 하면 블로그의 사진과 이미지들은 모두 라운딩이 7px 둥글게 처리되어 화면에 표시됩니다. 다만 모서리 배경까지 투명하게 만드는 코드는 찾지 못했던건지, 찾았는데 복잡해서였는지 생략한 상태입니다.