19. 티스토리 스킨 만들기 방명록 - 2 (수정)

오늘은 방명록 수정 두번째입니다.

병원을 다녀왔더니 조금 올리는게 늦었네요.

먼저 HTML부분은 바뀌지 않았으니 18. 티스토리 스킨 만들기 방명록 - 1에 있는 HTML을 보시면 되겠습니다.

오늘 수정할 부분이 아직 들어가지 않은 방명록입니다.

단순 텍스트만 적혀있어서 어디서 어디까지가 경계선인지 잘 모르겠죠?

오늘은 이 경계선을 확실히 하기 위해서 수정을 해볼텐데요.

먼저 어떤 클래스를 가지고 있는지는 알고 수정해야겠죠?

이 부분은 총 3가지의 클래스를 가집니다

먼저 .guest_general 클래스,

이건 블로그의 관리자, 즉 제가 아닌 이상 대부분의 방명록 클래스는 이 .guest_general이 됩니다.

 

그럼 두 번째는 어떤걸까요?

제가 아닌 이상은 .guest_general이라고 했으니 당연히 관리자가 나오겠죠?

두 번째는 .guest_admin입니다.

관리자, 즉 제 블로그에서는 제가 방명록을 적게 될 때 이 클래스가 되는거죠.

마지막으로 세 번째, 뭐가 나올까요?

마지막 세 번째는 .guest_secret입니다.

바로 비밀 댓글을 달게 되면 나오게되죠.

방명록에는 비밀 댓글이 없는데, 이미 달린 방명록 글에 댓글을 달 경우만 비밀 댓글 기능이 있더라구요?

이상하긴 한데,,, 저도 그 부분에 대해서는 자세히 모르겠네요.

어쨌든 .guest_general, .guest_admin, .guest_secret 총 3가지의 클래스를 알아 냈습니다.

수정을 해봐야죠?

.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;

}

먼저 어제 수정 하지 못한 윗 3줄부터 설명 드리겠습니다.

오늘 수정하다 보니 깜빡하고 지나갔던게 있었네요.

먼저 textarea는 댓글을 적는 창입니다.

width를 100%를 줬구요.

아래 있는 안부 남기기 버튼도 200px 30px로 넓이와 높이를 지정했습니다.

p는 수정/삭제 댓글이 있는 부분 아래 내용 부분을 말하는건데요.

가독성을 높이기 위해 조금 떨어뜨려줬습니다. 

다시 본론으로 돌아와서 위에서 알아낸 3가지의 클래스를 가지고 수정합니다.

제 경우엔 3 클래스를 하나로 묶어서 댓글, 대댓글로 나눠서 수정했는데요.

쓰는 방법에 따라 관리자, 방문자, 비밀글로도 나눌 수 있으니 이 부분은 알아서 수정해서 사용하시면 됍니다.

guestbook ol > li > .guest_admin 등의 경우는 본 댓글을 나타냅니다.

guestbook ul > li > .guest_admin 등의 경우는 대댓글을 나타내구요.

두 부분의 속성은 크게 다르지 않습니다.

본 댓글은 흰 배경에 검은 테두리, margin으로 위아래에 경계를 띄어줬구요.

padding 속성으로 내부 여백도 살짝 줘서 답답함은 줄여줬고,

box-shadow로 그림자를 줬습니다.

대댓글은 회색 배경에 테두리는 위처럼 검은색, margin은 살짝 다른데요.

왼쪽에 10px을 줘서 대댓글인걸 알 수 있게 살짝 안쪽으로 들어가게 했습니다.

나머지는 같네요.

이건 수정을 한 방명록입니다.

디자인 보다는 이런 방식으로 수정을 한다는 것을 알아주세요ㅠ

디자인 고자는 웁니다...

방명록은 아마도 여기서 끝인듯 싶네요.

혹시 수정이 안된부분이나 궁금한점 있으면 댓글 달아주세요!