티스토리 뷰
티스토리 / 콘텐츠 본문 하단꾸미기(이모티콘 or 문구)
이번에는 각 콘텐츠 본문 하단에 이모티콘을 추가해보도록 하겠다.
추가할 이모티콘 (이미지 or 텍스트)는 본인이 마음에 드는 걸로 구하면 된다. 나는 카카오톡 움직이는 이모티콘에서 찡끗 하는 라이언이를 구해놓았다.
이것을 본문에 추가해서 아래 사진과 같이 본문 내용이 모두 끝난 후 나오도록 할 것이다.
간단하게는 이모티콘을 서식페이지에 저장해서 포스팅을 작성할 때 마다 이모티콘을 추가하는 방법도 있지만 필자는 귀찮은걸 싫어하는 성격이라 그냥 스킨에 이모티콘을 추가할 예정이다.
그리고 스킨에 이모티콘을 추가하는 방법 또한 매우 간단하다.
1. 티스토리 스킨 편집으로 들어간다.
2. 파일 업로드에 사용할 이모티콘을 추가한다.
3. HTML에서 다음 치환자를 검색한다. '
이번에는 각 콘텐츠 본문 하단에 이모티콘을 추가해보도록 하겠다. 추가할 이모티콘 (이미지 or 텍스트)는 본인이 마음에 드는 걸로 구하면 된다. 나는 카카오톡 움직이는 이모티콘에서 찡끗 하는 라이언이를 구해놓았다. 이것을 본문에 추가해서 아래 사진과 같이 본문 내용이 모두 끝난 후 나오도록 할 것이다. 간단하게는 이모티콘을 서식페이지에 저장해서 포스팅을 작성할 때 마다 이모티콘을 추가하는 방법도 있지만 필자는 귀찮은걸 싫어하는 성격이라 그냥 스킨에 이모티콘을 추가할 예정이다. 그리고 스킨에 이모티콘을 추가하는 방법 또한 매우 간단하다. 1. 티스토리 스킨 편집으로 들어간다. 2. 파일 업로드에 사용할 이모티콘을 추가한다. 3. HTML에서 다음 치환자를 검색한다. '' 이 치환자는 우리가 작성한 콘텐츠를 불러온다. 아래 코드를 한번 살펴보자. "area_view"라는 공간(div)안에 본문 치환자가 포함되어 있다. "area_view"와 "area_etc"가 차지하는 공간은 아래와 같다. 우리는 위 두 공간 사이에 이모티콘을 넣을 것이기 때문에 "area_view"가 끝나는 지점 밑에 추가해야 한다. 4. 업로드한 이미지를 <img>태그로 불러온다. 자 그럼 이제 업로드한 이미지를 추가해보자. 이미지 태그에 대한 이해가 부족한 분들은 아래 포스팅을 참고하기 바란다. (참고: 2018/06/29 - [@WebDevelop/HTML] - HTML 기본태그 / 이미지 태그) 이모티콘이 추가되기는 했지만 아직 마음에 들지 않는다. 가운데로 정렬시키고 싶고 이모티콘이 너무 크다. 5. 속성 추가 다시 스킨편집에서 CSS에 클래스를 추가한다. 필자는 "footer_emoticon"이란 클래스를 추가했다. 우선 "footer_emoticon"에 추가한 속성부터 살펴보자. margin-top은 본문(area_view)와의 거리를 조절해준다. 본문과 너무 거리가 떨어진듯하여 50px 줄여보았다. 그리고 display: flex와 justify-content: center는 이미지를 가운데로 정렬해주는 기능을 한다. 자세한 설명은 나중에 다루기로 하고 설명이 잘되어있는 사이트의 링크를 남기도록 하겠다.(참고: flexbox의 이해) 마지막으로 ".footer_emoticon img"는 "footer_emoticon" 클래스 하위에 있는 <img>태그의 크기를 180x180으로 설정한것이다. 그러면 다시 html로 돌아와서 <img>태그 위에 <div class="footer_emoticon">을 추가해준다. 180x180 사이즈로 이쁘게 가운데 정렬이 되어서 나올 것이다. 문구도 마찬가지다 <img>태그 대신 글자를 적으면 되고, 원하는 폰트의 속성들을 설정해주면 된다. 다들 마음에 드는 이쁜 이모티콘/문구로 꾸며보기 바란다.티스토리 / 콘텐츠 본문 하단꾸미기(이모티콘 or 문구)
이 치환자는 우리가 작성한 콘텐츠를 불러온다. 아래 코드를 한번 살펴보자.
"area_view"라는 공간(div)안에 본문 치환자가 포함되어 있다. "area_view"와 "area_etc"가 차지하는 공간은 아래와 같다. 우리는 위 두 공간 사이에 이모티콘을 넣을 것이기 때문에 "area_view"가 끝나는 지점 밑에 추가해야 한다.
4. 업로드한 이미지를 <img>태그로 불러온다.
자 그럼 이제 업로드한 이미지를 추가해보자. 이미지 태그에 대한 이해가 부족한 분들은 아래 포스팅을 참고하기 바란다. (참고: 2018/06/29 - [@WebDevelop/HTML] - HTML 기본태그 / 이미지 태그)
이모티콘이 추가되기는 했지만 아직 마음에 들지 않는다. 가운데로 정렬시키고 싶고 이모티콘이 너무 크다.
5. 속성 추가
다시 스킨편집에서 CSS에 클래스를 추가한다. 필자는 "footer_emoticon"이란 클래스를 추가했다. 우선 "footer_emoticon"에 추가한 속성부터 살펴보자.
margin-top은 본문(area_view)와의 거리를 조절해준다. 본문과 너무 거리가 떨어진듯하여 50px 줄여보았다.
그리고 display: flex와 justify-content: center는 이미지를 가운데로 정렬해주는 기능을 한다. 자세한 설명은 나중에 다루기로 하고 설명이 잘되어있는 사이트의 링크를 남기도록 하겠다.(참고: flexbox의 이해)
마지막으로 ".footer_emoticon img"는 "footer_emoticon" 클래스 하위에 있는 <img>태그의 크기를 180x180으로 설정한것이다.
그러면 다시 html로 돌아와서 <img>태그 위에 <div class="footer_emoticon">을 추가해준다.
180x180 사이즈로 이쁘게 가운데 정렬이 되어서 나올 것이다. 문구도 마찬가지다 <img>태그 대신 글자를 적으면 되고, 원하는 폰트의 속성들을 설정해주면 된다.
다들 마음에 드는 이쁜 이모티콘/문구로 꾸며보기 바란다.
