티스토리 댓글 창에 사진 넣기 `-`)

 

 

[준비물]

 

1. 댓글 작성란에 넣을 이미지 파일.

(관리페이지 - 스킨 편집 - 파일 업로드에 살포시 올려줍니다.)

 

2. 현재 스킨 백업

(관리페이지 - 스킨 변경 - 스킨 보관)

 

준비 끝나셨으면 시작해봅니다.

 

 

*

 

 

스킨 편집 - HTML에서 [Ctrl + F]를 누르고 rp_input_comment를 검색합니다.

그러면 아래와 비슷하게 생긴 애들이 보일 겁니다.

 

<textarea name="[##_rp_input_comment_##]" class="form-control" rows="3"></textarea>

 

여기 <textarea></textarea> 부분이 댓글을 작성하는 영역인데 

이곳에 background라는 속성을 추가해 주겠습니다.

 

 

 

<textarea name="[##_rp_input_comment_##]" class="form-control" rows="3" style="background:url() no-repeat;"></textarea>

 

style="~~~" 부분이 추가된 게 보이죠?

여기서 background:url()의 괄호 사이에 이미지 주소를 넣어주세요.

 

예시로 하나 작성해보겠습니다.

 

 

 

<textarea name="[##_rp_input_comment_##]" class="form-control" rows="3" style="background:url(https://tistory1.daumcdn.net/tistory/588980/skin/images/bg-none-kakao2.png) no-repeat;"></textarea>

 

 

 

* no-repeat는 이미지보다 영역이 더 넓을 때, 이미지를 반복 출력하지 말라고 넣은 속성입니다.

반복되는 패턴을 넣고자 한다면 no-repeat를 지워주시면 됩니다.

 

** 스킨 편집 - 파일 업로드에 올린 이미지는

url('./images/filename.jpg') 이렇게 지정해주셔도 출력 가능

 

 

 

위에 작성한 걸 실제로 적용시키면 이런 모습으로 출력이 됩니다.

 

(글 작성도 가능해요)

 

 

 
<textarea name="[##_rp_input_comment_##]" class="form-control" rows="3" style="background: url('https://tistory1.daumcdn.net/tistory/588980/skin/images/bg-none-kakao2.png') no-repeat; margin: 0 auto; width: 400px; height: 400px;"></textarea>

 

사실 추가된 속성들이 3가지 있는데

아래와 같은 내용입니다.

 

margin: 0 auto;

(*화면 중앙 정렬을 위해 추가해준 속성)

 

width:400px; height:400px;

(*textarea 영역의 style을 가로 400px, 세로 400px로 지정)

 

 

*

 

 

[여기부터는 그냥 참고사항]

 

Style 부분의 경우에는 CSS로 작성을 하는 것을 추천합니다.

textarea 영역에 id 또는 class가 지정돼 있을 수 있는데 (본인이 임의로 지정하는 것도 가능)

 

위 예시에선 class="form-control" 이렇게 돼있죠

textarea의 class가 form-control이라는 뜻입니다.

 

쉽게 말해서 이름을 붙여 주는 거예요

이 textarea의 이름은 form-control인 셈.

 

아무튼 CSS에 작성하려면, 예를 들어...

 

(HTML상 class="form-control"인 경우 예시)

 

.form-control { 
background:url(사진주소) no-repeat;
width:60%;
height:250px;
margin:0 auto;
}

 

 

 

(id="form-control"인 경우 예시)

 

#form-control { 
background:url(사진주소) no-repeat;
width:60%;
height:250px;
margin:0 auto;
}

 

 

이렇게 해주시면 됩니다.

근데 id라는 속성이 나왔는데 이건 뭐냐구요?

id 역시 class처럼 html 요소에 이름을 붙여주는 것이라 보시면 됩니다.

 

다만, id를 붙여줄 경우에는 css에 '#'을 이용해서 표기를 하고

class를 붙여줄 경우에는 '.'을 이용해서 표기를 해줍니다.

 

#id { }

.class { }

 

 

 

궁금하신 부분은 댓글로 질문 주시면 말씀드리겠습니다.