한숨 푹 자고 일어나서 다시 블로그 디자인에 손을 대기 시작했습니다.
이번에는 공지사항 탭에 내용을 추가하고 이메일 문의 박스를 하나 새로 만들어보려고 합니다.
블로그 디자인을 HTML과 CSS를 이용해 바꾸다보니 이것도 공부 자료들 탭의 HTML CSS 항목에 넣어야 하나 싶긴 한데 블로그를 꾸미는 용도.. 라고 생각하고 따로 카테고리를 만들어서 진행하려고 합니다.
목차
0. 이메일 박스 추가
고래 스킨의 조금 아쉬운 점은 아무래도 유료 스킨에 비해서 간단하게 바꿀 수 있는 옵션의 수가 적다는 것이 있습니다. 이 말은 사용하는 사람이 HTML과 CSS를 어느 정도 다룰 수 있어야 커스터마이징하기 좋다는 이야기가 되겠죠.
개인이 만든 스킨, 그리고 무료 스킨이다 보니 사실 이런 부분은 감안을 해야 합니다. 이런 틀만 잡는 것도 굉장한 난이도라는 것을 여타 프로젝트를 통해 알 수 있죠. 무엇보다 이렇게 블로그를 업데이트 하면서 프론트엔드에 대한 아주 기본적인 지식들이 조금이나마 늘어나는 것 같아 간접적으로 공부하는 느낌이 들어서 좋습니다.
고래 스킨을 처음 받아서 적용을 하면 공지사항 탭만 존재합니다.
이 공지사항 탭과 동일한 느낌으로 이메일 문의 탭을 새롭게 만들기 위해서는 공지사항 소스를 거의 그대로 붙여오면 됩니다. (물론 안의 내용은 달라야 하기 때문에 수정이 필요합니다.
우선 ctrl + f 신공을 통해 공지사항 박스가 있는 위치를 찾습니다. 고래님께서 친절하게 주석을 달아주셨기 때문에 쉽게 찾을 수 있습니다. (2군데가 나올텐데, 아랫쪽에 있는 녀석이 우리가 사용할 사이드바에 위치한 공지사항 박스입니다.)
우리는 이 공지사항 박스 모듈을 복사해서 그대로 아래에 붙여넣어주면 됩니다.
그럼 공지사항이 2개가 될 텐데요, 들어갈 내용은 다르기 때문에 공지사항이라고 되어있는 부분을 이메일 문의라고 수정해줍니다. 그리고 637줄에 보이는 a href(하이퍼텍스트 레퍼런스)라는 링크를 달아주는 녀석이 있습니다. 이 a태그를 싹 다 지워줍니다.
우리가 새롭게 만든 이메일 문의 박스 안에는 이메일이 들어가야 합니다. 그리고 또 이 이메일을 클릭하면 메일을 보낼 수 있게 href 태그를 걸어주면 좋겠죠?
원래 a태그가 있던 자리에
<a href = "mailto:메일명">메일명</a>
이 a태그를 새롭게 넣어주면 우리가 원하는 그런 그림이 완성됩니다.
1. 공지사항 추가하기
따로 html을 만져서 링크 없이 추가하는 방법도 있지만, 이미 존재하는 공지사항 글 업로드 시스템을 굳이 사용하지 않을 이유가 없기 때문에 이미 있는 기능을 사용했습니다.
환경설정에서 공지 관리로 들어갑니다.
들어가면 바로 공지를 작성할 수 있고, 작성한 공지사항의 제목이 사이드바 공지사항에 뜨게 됩니다.
만약 제목이 길다면 ...으로 생략되어 표시됩니다. 이 부분은 저는 굳이 수정하지 않았는데, 필요에 따라 모든 내용이 출력되도록 수정하실 수 있을 것 같습니다.
오늘은 간단하게 공지사항 박스를 이용해 사이드바 박스를 하나 더 만들고 그 공간에 필요한 정보(이메일 문의)를 넣어봤습니다.
매일매일 조금씩 업그레이드하면 제 입맛에 맞는 블로그 스킨으로 조금 씩 더 바뀌게 되겠죠? 매우 기대됩니다 :)
최근댓글