친효애드온 - 히스토리 (연혁표) 마크1
안녕하세요. 친절한효자손입니다. 진짜 오랜만에 친효애드온 작업을 진행한 것 같습니다. 게으른 성격 탓에 이걸 미루고 미뤄왔었지요. 어느날 이대로 계속 미뤘다가는 진짜 영영 못 할 것 같다는 생각에 느닷없이 행동으로 옮기게 됩니다. 그런데 중간에 한 번 시행착오가 있었습니다. 일단 이 부분은 차차 이야기하기로 하고 어떤 히스토리를 말하는건지 예시를 통해 직접 확인해 보시기 바랍니다.
예시 살펴보기
친절한효자손 히스토리
네이버 블로그 시작 2011.?? 자료 저장용으로 티스토리 개설 2012.04 네이버 블로그 하루 방문자 20,000명 달성 2012.06 돈 되는 대로 대가성 글을 작성하다 결국 블로그 저품질 발생 2012.08 삼성전자서비
rgy0409.tistory.com
현재 제 티스토리 공지글로 히스토리를 올렸습니다. 보시면 바로 아실겁니다. 그렇습니다. 커리어를 보여주거나 이력을 표현하고자 할 때 이런 연혁표 스타일을 사용하곤 합니다. 언젠가 이런 히스토리를 꼭 표현해보고 싶었는데 마침내 이것을 완성시켰습니다. (감격)
방금전에 서두에서 시행착오가 있었다고 말씀 드렸습니다. 어떤 시행착오냐면 저 가운데 라인을 중심으로 좌/우로 이력을 표현해내고 싶었습니다. 그런데 이게 생각만큼 잘 안되더군요. 처음에 시도했던 방법은 회색 선만 따로 만들어 중앙 정렬을 하는 방법이었습니다. 거기까지는 괜찮은데 나머지 텍스트박스를 넣을 자식 요소의 배치 기준이 애매해지더군요. 차라리 중앙 정렬을 포기하고 라인을 좌측으로, 우측에는 그냥 텍스트를 넣을까 싶었습니다. 이게 가장 쉽거든요. 그렇지만 반드시 중앙 정렬 방법을 사용해보고 싶었기에 계속해서 도전한끝에 마침내 완성시킬 수 있었습니다. 혹시 웹퍼블리싱을 잘 하시는 분들 중에서 제가 짜놓은 HTML / CSS 구성보다 더 좋은 방법을 알고 계신다면 댓글로 어드바이스 부탁드립니다.
어떻게 만드는건지 과정 및 소스를 공유합니다. 참고로 친효스킨을 기준으로 설계되었습니다. 따라서 타스킨의 경우에서는 정상적으로 보이지 않을 수 있습니다. 타스킨을 사용중이신 분들 중 정상적으로 출력되지 않는 분들은 댓글로 해당 URL 주소를 알려주시면 시간 나는대로 확인해 보겠습니다.
Script 세팅
스크립트는 필요 없습니다.
CSS 세팅
아래의 첨부파일을 다운로드 받습니다.
파일을 받아서 열어보시면 다음의 CSS 코드들이 들어있을 겁니다.
/* 친효애드온 : 히스토리 */
#rgyHistory {
overflow: hidden !important;
padding: 10px !important;
line-height: 1.3 !important;
}
#rgyHistory .rgyHistory-contents {
position: relative !important;
width: 50% !important;
padding: 20px 0 !important;
}
#rgyHistory .rgyHistory-contents::after {
position: absolute !important;
top: 0 !important;
right: -2px !important;
display: block !important;
content: "" !important;
width: 4px !important;
height: 100% !important;
border-radius: 4px !important;
background-color: #ddd !important;
z-index: -1 !important;
}
#rgyHistory .rgyHistory-contents .rgyHistory-item {
position: relative !important;
display: flex !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryLeft {
justify-content: flex-end !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryRight {
left: 100% !important;
}
#rgyHistory .rgyHistory-contents .rgyHistory-item::after {
position: absolute !important;
top: 30px !important;
content: "" !important;
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
z-index: 1 !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryLeft::after {
right: -10px !important;
background-color: #ccc !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryRight::after {
left: -10px !important;
background-color: #f54 !important;
}
#rgyHistory .rgyHistory-contents .rgyHistory-item {
position: relative !important;
}
#rgyHistory .rgyHistory-contents .rgyHistory-item .rgyHistory-item-text {
padding: 10px 15px !important;
border-radius: 5px !important;
font-size: 14px !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryLeft .rgyHistory-item-text {
margin: 20px 25px 20px 20px !important;
color: #555 !important;
background-color: #eee !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryRight .rgyHistory-item-text {
margin: 20px 20px 20px 25px !important;
color: #fff !important;
background-color: #f54 !important;
}
#rgyHistory .rgyHistory-contents .rgyHistory-item .rgyHistory-item-text::before {
position: absolute !important;
top: 29px !important;
z-index: -1 !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryLeft .rgyHistory-item-text::before {
right: 15px !important;
content: "▶" !important;
color: #eee !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryRight .rgyHistory-item-text::before {
left: 15px !important;
content: "◀" !important;
color: #f54 !important;
}
#rgyHistory .rgyHistory-contents .rgyHistory-item .rgyHistory-item-date {
position: absolute !important;
top: 32px !important;
width: 100% !important;
font-size: 11px !important;
font-style: italic !important;
color: #aaa !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryLeft .rgyHistory-item-date {
left: calc(100% + 15px) !important;
}
#rgyHistory .rgyHistory-contents .rgyHistoryRight .rgyHistory-item-date {
right: calc(100% + 15px) !important;
text-align: right !important;
}이 코드들을 티스토리 관리자 > 꾸미기 > 스킨편집 > CSS의 맨 아래에 붙여넣기 해줍니다. 여기까지가 기본 세팅의 끝입니다. 이제 HTML 태그를 사용해주는 방법만 남았습니다.
HTML 세팅
티스토리에서 사용 시 공지사항이든, 일반 글이든 모두 적용됩니다. 기왕이면 공지사항에 작성하시는것을 추천합니다. 일반글에는 애드센스가 붙기 때문이죠. 물론 스킨 종류에 따라 공지사항에도 애드센스가 노출되는것도 있는 것 같은데 그럴때는 스스로 잘 판단하에 사용하시면 좋겠습니다.
글쓰기 모드로 들어갑니다. 이제부터는 일반적인 글쓰기가 아닌, HTML 모드 상태에서 작업을 진행합니다. 아래의 첨부파일을 다운로드 합니다.
받아서 열어보시면 다음과 같은 태그들이 들어있을 겁니다.
<div id="rgyHistory">
<div class="rgyHistory-contents">
<div class="rgyHistory-item rgyHistoryLeft">
<p class="rgyHistory-item-text">텍스트를 입력해 주세요(왼쪽)</p>
<p class="rgyHistory-item-date">2022.10</p>
</div>
<div class="rgyHistory-item rgyHistoryRight">
<p class="rgyHistory-item-text">텍스트를 입력해 주세요(오른쪽)</p>
<p class="rgyHistory-item-date">2022.10</p>
</div>
</div>
</div>이 태그를 몽땅 복사 후 HTML모드에 그대로 붙여넣기 합니다. 이저부터 우리가 수정할 부분은 텍스트를 입력해 주세요라는 부분과 날짜 부분입니다. 또한 하나의 텍스트 박스로 구성되는 부분은 이 요소입니다.
<div class="rgyHistory-item rgyHistoryLeft">
<p class="rgyHistory-item-text">텍스트를 입력해 주세요(왼쪽)</p>
<p class="rgyHistory-item-date">2022.10</p>
</div>이게 하나의 항목으로 구성됩니다. 여기서 주목해야하는건 클래스명입니다. 클래스명 구성은 다음과 같습니다.
rgyHistory-item : 공통 클래스명
rgyHistoryLeft : 텍스트박스를 왼쪽으로 넣고자 할 때 (옅은 회색)
rgyHistoryRight : 텍스트박스를 오른쪽으로 넣고자 할 때 (붉은색)
공통 클래스명은 신경쓰지 않아도 되며 중요한건 Left로 할지, Right로 할지만 주의하면 됩니다. 「친효애드온 - 히스토리 마크1」 버전에서는 일반적인 이력 사항을 왼쪽에 배치하고 중요한 히스토리 내역을 오른쪽에 배치하도록 설계했습니다. 그렇기에 중요도가 높은 오른쪽 텍스트박스의 색상이 붉은색으로 표현됩니다. 이것만 주의해주시고 HTML 편집 모드에서 텍스트 입력하는 부분에는 원하는 텍스트를 입력하시고 날짜도 원하는대로 입력해주시면 됩니다. 이력 항목을 늘릴때는 방금 위에서 설명드린 항목 태그만 추가로 복사 붙여넣기해서 늘려나가면 됩니다. 클래스명으로 왼쪽/오른쪽만 선택하는데 주의하면 됩니다. 생각보다 간단합니다. 크게 어렵지 않을거에요.
이해하기 쉽게 만든 이미지입니다. 각 태그의 클래스명에 따라 왼쪽 / 오른쪽 배치가 이루어집니다. 또한 친효애드온 - 히스토리 마크1은 반응형입니다. 따라서 모바일에서 접속해도 텍스트 박스가 가로 해상도에 맞추어 자동으로 늘어나고 줄어듭니다. 설명은 여기까지입니다. 친효애드온 : 히스토리 마크1을 사용하여 여러분들의 티스토리에 멋진 히스토리 연혁표를 세팅해 보시기 바랍니다. 끝.
