언제나 피어있는 꽃

쎄바(Seevaa)님의 Easy Black 스킨입니다. 블랙n화이트톤으로 깔끔한 스킨이죠
블n화 톤은 제가 제일 좋아하는 조합(?)입니다. 여기에 빨간색만 넣어주면 숑가요(...?????)

Easy Black 스킨은 특이하게도 '대댓글'이 오른쪽으로 정렬되어있습니다
(대댓글 : 댓글에 또다시 댓글을 달거나, 방명록에 올라온 글의 댓글)

애리님이 Easy Black 스킨을 사용하시는데, 이렇게 오른쪽 정렬로 되어있는걸 불편하다고 하시며 좌측 정렬에 대해 질문하셨습니다. 감사합니다(__)
(드디어 존재 가치가..)


우측으로 정렬된 대댓글을 좌측으로 정렬해보겠습니다
먼저, 대댓글이 어느부분인지 알아야합니다.

방명록과 댓글의 리스트의 양식은 다음과 같게 되어있습니다



뭔가 좀 미묘하지만, 대충 저런식으로 되어있어서 계속 반복되게 되어있습니다
우리는 대댓글 영역만 수정할 예정이니, 아래와 같은 소스만 찾으면 됩니다


Easy Black스킨의 skin.html 파일을 마우스 우클릭을 한 후 연결프로그램, 메모장으로 실행시킵니다
그후 아래의 영역을 찾습니다


# HTML 수정

Easy Black 스킨은 기본적으로 대댓글이 우측정렬이며, 이름과 시간 수정등의 순서가 바뀌어있습니다
그렇기 때문에, 이 순서를 왼쪽 정렬에 맞게 바꿀 필요가 있습니다


방명록 란을 먼저 보겠습니다


노란색-연두색-하늘색으로 표시되어있는 부분을 하늘색-연두색-노란색으로 바꿔야합니다
아래처럼 말이죠



이렇게 하면, 이름-시간-수정순으로 나열됩니다

본문의 댓글 영역또한 마찬가지입니다


방명록 부분에서와 마찬가지로, 순서를 바꿔줘야합니다


# CSS 수정

HTML의 수정을 끝냈으니, CSS를 수정해야합니다
HTML을 수정할때의 소스를 잘 보시면 아시겠지만, 목록 태그로 이루어져있습니다(ol, ul)
또한, 방명록의 남긴 글 부분과 본문의 댓글영역은 잘 나뉘어있으므로 구분하기가 쉽습니다

먼저 방명록의 CSS를 수정하겠습니다


이 부분이 방명록에 남긴글의 댓글 부분입니다
먼저 제일 눈에 띄는 오른쪽 정렬(text-align:right;)을 왼쪽 정렬로 바꿔줍시다(text-align:left;)
여기까지 잘 적용되었다면 다음처럼 출력됩니다


왼쪽에 여백이 많이 있는데, 이 부분을 수정하려면 패딩값을 수정해야합니다
위의 소스에서, padding:10px 0 0 60px; 부분을 수정해야합니다

지난번 글에 있듯, 패딩이나 마진의 경우 4방향을 따로 설정하지 않고, 순서만으로 설정 할 수 있습니다. 그 순서는 각각 위쪽-오른쪽-아랫쪽-왼쪽이며, 현재 왼쪽의 패딩값이 60으로 되어있음을 알 수 있습니다

값을 60이하로 내리면 빈공간이 줄어드는데, 너무 줄여버리면 이게 댓글인지 대댓글인지 모르는 상황이 될 수 있으니, 패딩값은 그대로 놔두는게 좋을듯합니다


다음으로, 본문의 대댓글 영역을 수정하도록 하겠습니다
본문의 대댓글 영역의 CSS는 아래와 같습니다


방명록에서 했던것과 마찬가지로, 오른쪽 정렬을 왼쪽 정렬로 바꿔주고, 패딩값을 수정하면 됩니다