그동안 글을 쓰면서 번호를 매길 때 1. 1-1. 1-2. 2. 3. 이런 식으로 매겨왔는데 square 스킨에서 제목 2(문단 모양)를 적용하거나 html에서 <h3>을 적용하면 아래와 같은 디자인으로 나온다는 사실을 며칠 전 알았다...
나름 깔끔한 제목 분류가 될 것 같아서 애용해 보려고 한다. 다만, <h3>를 사용했을 때 저 디자인이 나온다는 건 스킨을 바꾸게 되면 다른 디자인으로 바뀌거나 디자인 자체가 사라질 수도 있다는 뜻이 된다. 그래서 CSS에서 <h3>에 관련한 부분을 찾아 html에 직접 입력해 볼까 한다. 글 쓸 때에는 조금 불편하긴 해도 언젠가 스킨이 바뀌어도 디자인이 유지된다는 장점이 있다. 물론 이게 꼭 장점이라고만은 할 수는 없는 게 스킨을 바꿀 때마다 본문의 디자인이 함께 바뀌는 것도 신선할 것 같긴 하다. 어쨌든 개인 취향대로.
square(스퀘어) 스킨 CSS 편집에 들어가 보면 (나의 경우) 130행 전후로 아래 코드를 확인할 수 있다. (이래저래 수정을 여러번 하면서 원래 문장이랑 조금 달라졌을 수도 있긴 함)
.entry h3 { padding: 7px 10px 5px; margin: 0 0 10px; border-left: 5px solid #666; background-color: #fafafa; color: #333; font-weight: bold; }이 코드를 <p>, <div>, <span>에 스타일로 그대로 적용해 보았다. 그랬더니 약간의 차이가 있긴 했지만 무리 없이 모두 잘 나온다. 다만 <p>는 paragraph(문단), <div>는 division(분할, 레이아웃), <span>은 span(폭, 범위)에 주로 사용되므로 상황에 맞게 사용하면 될 듯.
나머지 소소한 부분들은 실제 본문에 적용해 가면서 필요에 따라 수정하며 사용해야지.
<p style="padding: 7px 10px 5px; margin: 0 0 10px; border-left: 5px solid #666; background-color: #fafafa; color: #333; font-weight: bold;">p style</p>
<div style="padding: 7px 10px 5px; margin: 0 0 10px; border-left: 5px solid #666; background-color: #fafafa; color: #333; font-weight: bold;">div style</div>
span style
<span style="padding: 7px 10px 5px; margin: 0 0 10px; border-left: 5px solid #666; background-color: #fafafa; color: #333; font-weight: bold;">span style</span>