최근 블로그 글을 쓰다가 보니 집에 있는 모니터로는 확인을 못했는데..
조금 밝은 모니터로 확인을 해보니 사진과 텍스트 경계선이 구분 되지 않아서
가독성이 많이 불편 하였습니다.
그래서 티스토리 블로그의 이미지, 사진 테두리 설정하는 방법에 대해서 알아보겠습니다.
티스토리 사진 이미지 테두리 적용하기
현재 블로그 이미지에 모든 테두리가 적용이 되어 있습니다.
테두리를 설정하는 방법은 간단합니다.
이미지 태그인 img에다가 border CSS 속성을 설정을 해주면 됩니다.
border이 바로 테두리를 정하는 CSS속성이기 때문입니다.
각방향의 테두리 색상도 정할 수 있고 다양한 테두리 무늬도 표현할 수 있습니다.
현재 제블로그는 아래와 같이 설정이 되어 있습니다.
img{ border:2px outset rgba(44, 134, 204, 0.67);
border-radius:5px;
}
하지만!!!! 이렇게 설정을 하게 되면 모든 블로그의 이미지들도 테두리가 생기기 때문에 특정영역을 설정을 해주어야 합니다.
저는 본문영역에만 테두리가 생기게 하고 싶은데
모든 블로그의 이미지 부분에 전부 테두리가 생기게 됩니다.
그렇기 때문에 본문영역의 클래스명을 찾아줘야합니다.
가장 쉽게 찾는 방법은 치환자를 이용하는 것입니다.
티스토리는 치환자라는 태그를 제공해서 스킨 제작을 쉽게 할 수 있게 해줍니다.
치환자 중에서 최근 블로그 글을 쓰다가 보니 집에 있는 모니터로는 확인을 못했는데.. 조금 밝은 모니터로 확인을 해보니 사진과 텍스트 경계선이 구분 되지 않아서 가독성이 많이 불편 하였습니다. 그래서 티스토리 블로그의 이미지, 사진 테두리 설정하는 방법에 대해서 알아보겠습니다. 현재 블로그 이미지에 모든 테두리가 적용이 되어 있습니다. 테두리를 설정하는 방법은 간단합니다. 이미지 태그인 각방향의 테두리 색상도 정할 수 있고 다양한 테두리 무늬도 표현할 수 있습니다. 현재 제블로그는 아래와 같이 설정이 되어 있습니다. 하지만!!!! 이렇게 설정을 하게 되면 모든 블로그의 이미지들도 테두리가 생기기 때문에 특정영역을 설정을 해주어야 합니다. 저는 본문영역에만 테두리가 생기게 하고 싶은데 모든 블로그의 이미지 부분에 전부 테두리가 생기게 됩니다. 가장 쉽게 찾는 방법은 치환자를 이용하는 것입니다. 티스토리는 치환자라는 태그를 제공해서 스킨 제작을 쉽게 할 수 있게 해줍니다. 치환자 중에서 HTML에서 해당 치환자를 검색해주면 본인이 사용하고 있는 스킨의 본문영역의 클래스 명을 확인할 수가 있습니다. 티스토리 공식 반응형웹 #2 버전을 살펴보면 클래스명이 그럼 이제 CSS 에 해당 클래스 영역의 어렵지 않고 간단합니다.!!! 이런식으로 CSS의 기본선택자는 크게 3가지 입니다. 태그 선택자 / id 선택자 / class 선택자 태그선택자는 예) p { 스타일정의 } img { 스타일정의 } id선택자는 #id명 { 스타일정의 } class선택자는 .class명 { 스타일정의 } 위에 본문영역 치환자로 감싸진 부분이 div태그의 area_view 라는 class명으로 감싸져 있기 때문에 CSS에서는 마침표(.)로 지정을 해주는 것이죠. 혹시나 테두리가 지정이 되어 있어서 삭제를 하고 싶다면 테두리를 0으로 설정을 하면 될 것입니다.
치환자는 블로그 본문 내용을 나타내주는 코드이기 때문에티스토리 사진 이미지 테두리 적용하기
img에다가 border CSS 속성을 설정을 해주면 됩니다.border이 바로 테두리를 정하는 CSS속성이기 때문입니다.
img{ border:2px outset rgba(44, 134, 204, 0.67);
border-radius:5px;
}
그렇기 때문에 본문영역의 클래스명을 찾아줘야합니다.
치환자는 블로그 본문 내용을 나타내주는 코드이기 때문에area_view인 것을 알 수 있습니다!!!!!!img 태그만 설정을 해주겠습니다.
.area_view img{
border:2px outset rgba(44, 134, 204, 0.67);
border-radius:5px;
}
.area_view 선택영역을 지정해 주면 됩니다.왜 영역 앞에 (.)마침표를?!!
img{ border:0;
}
HTML에서 해당 치환자를 검색해주면 본인이 사용하고 있는 스킨의 본문영역의 클래스 명을 확인할 수가 있습니다.
티스토리 공식 반응형웹 #2 버전을 살펴보면
클래스명이 area_view인 것을 알 수 있습니다!!!!!!
그럼 이제 CSS 에 해당 클래스 영역의 img 태그만 설정을 해주겠습니다.
어렵지 않고 간단합니다.!!!
.area_view img{
border:2px outset rgba(44, 134, 204, 0.67);
border-radius:5px;
}
이런식으로 .area_view 선택영역을 지정해 주면 됩니다.
왜 영역 앞에 (.)마침표를?!!
CSS의 기본선택자는 크게 3가지 입니다.
태그 선택자 / id 선택자 / class 선택자
태그선택자는
예) p { 스타일정의 }
img { 스타일정의 }
id선택자는
#id명 { 스타일정의 }
class선택자는
.class명 { 스타일정의 }
위에 본문영역 치환자로 감싸진 부분이 div태그의 area_view 라는 class명으로 감싸져 있기 때문에
CSS에서는 마침표(.)로 지정을 해주는 것이죠.
혹시나 테두리가 지정이 되어 있어서 삭제를 하고 싶다면
img{ border:0;
}
테두리를 0으로 설정을 하면 될 것입니다.
