이미지에 테두리 적용하기(오디세이스킨 기준)

오늘은 티스토리 블로그 작성 시 본문 이미지에 테두리를 적용하는 방법에 대해 알려드리겠습니다.

이미지에 테두리를 적용하면, 이미지와 배경의 구분이 뚜렷해져 가독성이 높아지는 효과를 가져옵니다.

이를 통해 블로그의 가독성을 높이고, 보기 좋은 이미지를 제공하여 독자들에게 더욱 만족스러운 블로그 환경을 제공할 수 있습니다.

 

출처 : 셔틀스톡

 

목차

 

 

글쓰기에서 이미지 테두리 적용하는 방법

 테두리를 적용하려면, 티스토리 편집기에서 이미지를 삽입하고, HTML 코드로 테두리 속성을 추가해주어야 합니다. 자세한 방법은 아래와 같습니다.

 

 

 

 

 

 

1. 먼저, 티스토리 글쓰기 창에서 이미지를 삽입합니다.

2. 삽입된 이미지를 선택하고, "HTML" 버튼을 클릭합니다.

3. HTML 코드 창에서, 태그에서 sytle 속성을 찾습니다.

4. style 속성 안에 border: 1px solid #ddd; 와 같이 테두리 스타일 속성을 추가합니다.

 

 

CSS 변경하는 방법

블로그관리 > 꾸미기 > 스킨편집 > CSS

.article-view img검색한 후, 아래와 같이 수정합니다.

 

<사각테두리>

.article-view img { 
   max-width: 100%;  
   border-width: 10px;  선의 굵기(숫자가 커질수록 두꺼워집니다.)
   border-style:  solid;  선의 형태
   border-color: #f3f5f7; 선의 색상
}

 

<둥근테두리>

.article-view img { 
   max-width: 100%;  
   border-width: 10px;  선의 굵기(숫자가 커질수록 두꺼워집니다.)
   border-style:  solid;  선의 형태
   border-color: #f3f5f7; 선의 색상
   border-radius: 10px; 선의 모서리를 둥글게(숫자가 커질수록 더 둥글게 됩니다.)
}