티스토리 이미지 테두리 설정 방법, CSS border

티스토리 이미지 테두리 설정 방법

예전에 사용하던 스킨은 본문에 삽입 되는 이미지에 테두리가 만들어지도록 되어 있었습니다. 그런데 스킨을 변경한 후 테두리 소스를 추가하지 않아 이미지가 뭐시기 하게 나오고 있었습니다. 시간 날 때 소스 추가해야지 하며 미루고 있었는데, 며칠 전에 소스를 추가해 주었습니다. 이미지에 테두리를 두르는 것 별로 어렵지 않습니다. 티스토리 블로그의 경우는 관리 페이지 HTML/CSS 편집에서 소스 몇 줄만 추가해 주면 되네요. 1~2분 정도면 끝나는 손쉬운 작업입니다.


CSS border

잘 모르시는 분들을 위해 간단하게 설명하자면, 테두리는 위와 같은 형태로 두를 수 있습니다. 테두리를 네모 박스 형태로 두를 수도 있고, 모서리 부분을 둥글게 두를 수도 있습니다.

 

테두리는 이미지뿐만 아니라 P나 H1 등 다양한 곳에 적용 시킬 수 있습니다. 제목에 테두리를 두를 수도 있고, 본문 소제목 아래에 밑줄을 그을 수도 있고 말이죠. 물론 테두리 색상과 두께는 원하는 색과 두께로 두를 수 있습니다. 약간 복잡한 소스를 적용하면 테두리를 선이 아닌 이미지로도 두를 수 있고, 투명도도 적용할 수 있습니다.


이미지 테두리 없을 때

이미지에 테두리를 두르지 않았을 때의 모습은 이렇습니다. 이미지 자체에 테두리가 없거나, 업로드 할 때 이미지 편집 도구로 테두리를 꾸며 주지 않으면 위와 같이 뭐시기 한 형태로 이미지가 보여집니다. 특히 배경이 본문 배경색과 동일하거나 투명 이미지를 올리면 공중 부양한 듯 불안하게 보여지지요.


css에서 이미지 테두리 설정

티스토리 블로그의 경우 HTML/CSS 편집 > CSS 탭에 위와 같은 소스를 추가해 주면 일단은 이미지 테두리 설정이 완료 됩니다. 자신의 블로그 스킨에 어울리는 테두리 두께, 테두리 색상, 테두리 여백 정도만 변경해주면 깔끔하게 마무리 되네요.

 

추가로 설명하면, 티스토리 블로그의 경우 본문에 삽입되는 이미지는 <span class=”imageblock” style=”display:inline-block;width:580px;;height:auto;max-width:100%”>이미지</span> 이런 형태로 감싸집니다. 본문에 삽입 되는 모든 이미지가
클래스명 imageblock으로 감싸지기에 CSS에서 해당 클래스에 스타일을 적용 시켜주면 됩니다. 이해하기 쉽게 소스 부분을 몇 줄로 나눠 캡쳐한 것인데 한 줄로 붙여 넣어도 됩니다. .imageblock{border:1px solid #CCCED3;padding : 4px 4px 4px 4px;} 이런식으로 말이죠.


이미지 테두리 설정 했을 때

CSS에 소스를 추가하면 본문에 있는 모든 이미지에는 위와 같이 테두리가 생깁니다. 블로그 스킨 다른 곳에 클래스명 imageblock을 사용하지만 않았다면 말이죠. 참고로 스킨 제작 혹은 편집/추가 시에는 티스토리에서 사용하는 클래스명은 절대 사용하지 말아야 합니다. 중복 사용하면 스킨이 꼬여 엉망진창으로 보여질 수 있습니다.


이미지 테두리

CSS에 추가해 주는 소스 간단하게 설명 드립니다.

.imageblock{border:1px solid #CCCED3;padding : 4px 4px 4px 4px;}

수정해서
사용할 곳은 색으로 표시한 부분들입니다. 빨간색 부분의 숫자가 테두리 뚜께이고, 녹색 부분이 테두리 색상입니다. 파란색은 테두리 안쪽 여백이고요. 테두리 두께는 1px로 하고, 색상은 녹색으로, 테두리는 이미지에서 상우하좌 4px씩 떨어지게 둘러라가 되는 것입니다. 4px 4px 4px 4px 부분은 순서대로 위쪽 오른쪽 아래쪽 왼쪽의 안쪽 여백입니다. 이해를 돕기 위해 따로 따로 적은 것인데요. 만약 상우하자 모두 4px 간격으로 하고 싶다면 .imageblock{border:1px solid #CCCED3;padding : 4px;}로 하면 됩니다.


이미지 안쪽 여백

예시, .imageblock{border:1px solid #CCCED3;padding : 10px;}로 하면 테두리 안쪽으로 10px씩의 간격이 생깁니다.


이미지 파일을 이용한 이미지 테두리

테두리는 선이 아닌 이미지로도 두를 수 있습니다. 선 대신 이미지 파일을 이용하면 이쁘게 꾸밀 수 있습니다. 하지만 전 상 남자이니 설명 따윈 생략하는 것으로~


css3 border images

테두리를 이미지로 두르고 싶은 분들은 https://www.w3schools.com/css/css3_border_images.asp 페이지를 참고하시면 되겠습니다. 우측 메뉴를 이용하여 다양한 CSS 소스를 살펴 볼 수 있으니 블로그 이쁘게 꾸미고 싶으신 분들은 참고하시면 되겠습니다.


RGB 및 RGBA 색상 설정

테두리 색상을 마음에 드는 색으로 바꾸시고 싶다면 http://marcodiiga.github.io/rgba-to-rgb-conversion 사이트에서 원하시는 색상을 찾아 사용하시면 되겠습니다. 표시한 곳의 역삼각 버튼을 클릭하여 원하는 색의 색상값을 뽑아 낼 수 있네요. RGB 색상과 RGBA 색상을 모두 뽑아 낼 수 있습니다. RGBA 색상을 이용하면 테두리 색을 보다 우월한 때깔로 꾸밀 수 있네요.


trycss border round

특정 소프트웨어를 이용하면 소스를 스킨에 실제 적용하지 않고 미리 살펴 볼 수 있는데, 이걸 설명하려면 내용이 길어지니 패스하고~ 블로그 스킨에 적용하지 않고 미리 디자인을 살펴 보고 싶으신 분들은 https://www.w3schools.com/css/tryit.asp?filename=trycss_border_round 사이트에서 미리 살펴 보시면 되겠습니다. 좌측 부분의 소스를 수정한 후 상단 Run 버튼 클릭하면 우측에 실제 모습이 나타나네요. 끝~

Leave a Comment