24. 티스토리 스킨 만들기 본문 댓글

오늘은 본문 댓글을 수정할텐데요.

그 전에 방명록 부분에 보지 못한 부분이 있었네요;

관리자 계정으로 방명록을 들어가서 몰랐는데, 위에 있는 input 부분도 전부 저렇게 나오더라구요.

.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 a {color:#000;font-size:13px;text-decoration:none;}

.guestbook textarea {width:100%;}

.guestbook input[type=submit] {width:200px;height:30px;}

.guestbook p {margin:2px;}

.guestbook ol > li > .guest_admin,

.guestbook ol > li > .guest_general, 

.guestbook ol > li > .guest_secret {

background:#fff;

border:3px solid #333;

margin:5px 0 5px 0;

padding:5px;

box-shadow:3px 3px 5px #333;

}

.guestbook ul > li > .guest_admin,

.guestbook ul > li > .guest_general, 

.guestbook ul > li > .guest_secret {

background:#999;

border:3px solid #333;

margin:5px 0 5px 10px;

padding:5px;

box-shadow:3px 3px 5px #333;

}

CSS를 위와 같게 수정했습니다.

대신 input type=submit 부분이 중앙 정렬은 안됩니다.

다시 댓글 부분으로 돌아와서 수정을 해보겠습니다.

        <s_rp>

        <div class="comment">

          <h3>댓글을 달아 주세요 </h3>

          

          <div class="commentList">

            <s_rp_container>

            <ol>

              <s_rp_rep>

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

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

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

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

                  <span class="control">

                    <a href="[ ##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span></a>

                    <a href="#" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>

                    <a href="#" onclick="[ ##_rp_rep_onclick_reply_##]" class="write">&nbsp;<span>댓글쓰기</span></a>

                  </span>

                  <p>[ ##_rp_rep_desc_##]</p>

                </div>

                <s_rp2_container> 

                <ul>

                  <s_rp2_rep>

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

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

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

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

                        <span class="control">

                          <a href="[ ##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span> </a>

                          <a href="#" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>

                        </span>

                        <p>[ ##_rp_rep_desc_##]</p>

                      </div>

                    </li>

                  </s_rp2_rep>

                </ul>

                </s_rp2_container>

              </li>

              </s_rp_rep>

            </ol>

            </s_rp_container>

          </div>

          

          <s_rp_input_form>

          <div class="commentWrite">

            <s_rp_member>

            <s_rp_guest>

            <p>

              <input type="text" name="[ ##_rp_input_name_##]" value="[ ##_guest_name_##]" />

              <label for="name"> : 이름 </label>

            </p>

            <p>

              <input type="password" maxlength="8" name="[ ##_rp_input_password_##]" value="[ ##_rp_admin_check_##]" />

              <label for="password"> : 패스워드 </label>

            </p>

            <p>

              <input type="text" class="homepage" name="[ ##_rp_input_homepage_##]" value="[ ##_guest_homepage_##]"/>

              <label for="homepage"> : 홈페이지 </label>

            </p>

              </s_rp_guest>

              <p class="secretWrap">

              <input type="checkbox" name="[ ##_rp_input_is_secret_##]" class="checkbox" />

              <label for="secret"> 비밀글 </label>

            </p>

            </s_rp_member>

            <p>

              <textarea name="[ ##_rp_input_comment_##]" rows="10" cols="50"></textarea>

            </p>

            <p>

              <input type="submit" value="댓글 달기" onclick="[ ##_rp_onclick_submit_##]" />

            </p>

          </div> 

          </s_rp_input_form>

        </div>

        </s_rp>

무지 길죠?

어짜피 수정한 부분은 "블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지 않음.)"라고 적힌 부분만 지워놓았습니다.

전체적인 클래스를 뽑아보면 .comment, .commentList, .control, .commentWrite 정도인 것 같네요.

이게 수정 전의 댓글 부분입니다.

CSS를 수정해서 더 나아지도록 해보죠!

.comment h3 {font-size:16px;margin-bottom:10px;}

.comment li {list-style:none;}

.comment  input {margin:5px 0 5px 0;}

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

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

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

.comment .control a {color:#000;font-size:13px;text-decoration:none;}

.comment textarea {width:100%;margin-top:10px;}

.comment input[type=submit] {width:200px;height:30px;margin-bottom:10px;}

.comment p {margin:2px;}

.comment ol > li > .rp_admin,

.comment ol > li > .rp_general, 

.comment ol > li > .rp_secret {

background:#fff;

border:3px solid #333;

margin:5px 0 5px 0;

padding:5px;

box-shadow:3px 3px 5px #333;

}

.comment ul > li > .rp_admin,

.comment ul > li > .rp_general, 

.comment ul > li > .rp_secret {

background:#999;

border:3px solid #333;

margin:5px 0 5px 10px;

padding:5px;

box-shadow:3px 3px 5px #333;

}

@_@...

어지러워도 어짜피 방명록과 대부분 비슷합니다.

차근차근 알아봅시다.

먼저 .comment h3의 글씨 크기와 아래 여백을 줬고 li에 list-style을 없애줬습니다.

input은 위아래로 5px, 5px의 여백을 줬구요.

.name과 .name a는 방명록과 같게 글씨 크기, 굵기, 밑줄 없애기 정도를 했꾸요.

날짜와 .control부분인 댓글주소, 수정/삭제, 댓글쓰기 부분도 폰트를 수정했네요.

textarea 역시 크기를 100%를 주고 input[type=submit] 선택자로 댓글 달기 부분만 크기를 조절했습니다.

가독성을 높이기 위해서 댓글의 내용 부분인 p 태그에 여백을 줬구요.

그 아래 있는 admin, general, secret 부분은 guest가 rp로 바꼈을 뿐 바뀐게 없습니다.

천천히 코드를 읽어가면서 해보시면 크게 어렵지 않으실꺼에요.

저도 좀 머리아파지긴 하지만,,,

으으... 너무 코드가 많아...

어쨋든 위에 있는 이미지처럼 수정을 했네요.

궁금한 점, 어려운 점, 혹시 수정이 더 필요하다고 생각되는 점이 있다면 댓글에 남겨주세요!