18. 티스토리 스킨 만들기 방명록 - 1

오늘 수정할 부분은 방명록입니다.

방명록 부분은 소스가 너무 길기 때문에 수정 중에 실수가 있을 수 있으니 주의해주세요.

방명록 부분은 두번에 걸쳐 수정하겠습니다.

그럼 먼저 HTML 부분을 볼까요?

      <s_guest>

      <div class="guestbook">

        <h3>방명록</h3>

        

        <s_guest_input_form>

        <div class="guestWrite">

          <s_guest_member>

          <s_guest_form>

          <p>

            <input type="text" name="[ ##_guest_input_name_##]" value="[ ##_guest_name_##]" /> <label for="name"> : 이름 </label>

          </p>

          <p>

            <input type="password" maxlength="8" name="[ ##_guest_input_password_##]" value="[ ##_guest_password_##]" /> <label for="password"> : 패스워드 </label>

          </p>

          <p>

            <input type="text" name="[ ##_guest_input_homepage_##]" value="[ ##_guest_homepage_##]" /> <label for="homepage"> : 홈페이지 </label>

          </p>

          </s_guest_form>

          </s_guest_member>

          <p>

            <textarea name=" [ ##_guest_textarea_body_##]" cols="50" rows="6"></textarea>

          </p>

          <p>

            <input type="submit" value="안부 남기기" onclick="[ ##_guest_onclick_submit_##]"/>

          </p>

        </div>

        </s_guest_input_form>

 

        <s_guest_container>

        <div class="guestList">

          <ol> 

            <s_guest_rep>

            <li id='[ ##_guest_rep_id_##]'>

              <div class="[ ##_guest_rep_class_##]">

                <span class="name">[ ##_guest_rep_name_##]</span> 

                <span class="date"> [ ##_guest_rep_date_##]</span> 

                <span class="control"> 

                  <a href="#" onclick="[ ##_guest_rep_onclick_delete_##]">수정/삭제</a> 

                  <a href="#" onclick="[ ##_guest_rep_onclick_reply_##]">댓글</a> 

                </span>

                <p>[ ##_guest_rep_desc_##]</p>

              </div>

              <s_guest_reply_container>

              <ul>

                <s_guest_reply_rep>

                <li id='[ ##_guest_rep_id_##]'>

                  <div class="[ ##_guest_rep_class_##]">

                    <span class="name">[ ##_guest_rep_name_##]</span> 

                    <span class="date"> [ ##_guest_rep_date_##]</span> 

                    <span class="control"> 

                      <a href="#" onclick="[ ##_guest_rep_onclick_delete_##]">수정/삭제</a>

                    </span>

                    <p>[ ##_guest_rep_desc_##]</p>

                  </div>

                </li>

                </s_guest_reply_rep>

              </ul>

              </s_guest_reply_container>

            </li>

            </s_guest_rep>

          </ol>

        </div>

        </s_guest_container>

      </div>

      </s_guest>

      <!-- guestbook close -->

무지하게 기네요...

쉽게 설명해드리면, 가운데 여러칸 띄어준곳을 중심으로 위가 방문자들의 댓글이 달릴 때의 설정이구요.

아래가 그 댓글에 답글이 달릴 때의 경우입니다.

일단 오늘은 복잡한 것들 보다는 위 코드에 보이는 부분 위주로 수정을 했습니다.

.guestbook h3 {margin-bottom: 10px;}

.guestbook input {margin-bottom:10px;}

.guestbook li {list-style:none;}

.guestbook .name {font-size:15px;font-weight:bolder;}

.guestbook .name a {color:#0088CC;text-decoration:none;}

.guestbook .date {font-size:13px;}

.guestbook .control {color:#000;font-size:13px;}

CSS부분입니다.

h3부분은 당연히 방명록이라고 써진 부분이겠죠?

아래 간격을 조금 줬구요.

방명록을 보면 input들이 딱 붙어있는데, 이 부분도 간격을 줬습니다.

li 선택자에는 사이드바에 넘어가는 list-style을 없애줬구요.

.name, .date, control은 각각 이름, 날짜, 수정/삭제 댓글 부분입니다.

이 부분은 폰트 사이즈와 색상 등을 수정 했네요.

복잡하기 보다는, 방문자 입장에서 봐야하니 로그아웃 했다가, 코드 수정하려면 다시 로그인 해야해서 수정하는 내내 짜증나네요 ㅋ

다음 포스팅에서는 방명록에 남긴 글들의 부분을 수정하겠습니다.

궁금한 점은 댓글에 남겨주세요!!