WP홈페이지 제작 - 코멘트(댓글) 부분 수정

페이지나 포스트 하단에는 댓들을 달 수가 있게 되어 있습니다. 언더스코어스의 기본 댓글 부분의 폼 입력부분의 크기를 contact form 7 처럼 고치려고 합니다. 우선 구글 크롬 브라우저를 통해 해당 폼들의 id나 class 를 알아봅니다.

 

폼에서 마우스 우측클릭을 하고 "요소 검사"를 선택하면, 크롬 브라우저 하단에 도큐먼트의 소스를 볼 수 있는 창이 나타납니다. 다른 탭은 건들지 말고 Elements(요소) 탭에서 텍스트 입력폼 중 하나가 선택된 것을 확인합니다.

 

 

 

우측에 Styles 탭이 있는데, 선택된 요소 부분이 검은색으로 눈에 띄게 보여지고 있습니다. input[type="text"] 라는 부분입니다. 그 스타일 요소를 보면 height: 20px; 라는 것이 있는데 이 부분이 text 입력폼의 높이입니다. 앞쪽의 체크를 했다-풀었다하면 입력폼의 높이가 변하는 것을 확인할 수 있습니다.

 

높이값 20px을 2em 으로 바꿔보고 브라우저의 변경되는 모습을 확인해봅니다.

 

 

 

 

 

그 다음 댓글 입력부분의 요소를 확인해 봅니다. 우측 Styles 탭에 보면 textarea 라는 스타일 요소가 활성화(검은색) 된 것을 알 수 있습니다. 그중에서 넓이 요소를 찾아봅니다.

 

 

넓이값 width: 206px; 부분의 체크를 풀어보고 가로 크기를 확인해 봅니다. 거의 가로 영역 전체를 다 차지하게 됩니다.

넓이값을 따로 지정해도 되지만 100%로 보여지게 해봅니다. width: 100%; 로 수정합니다.

 

 

 

이제 이 두 부분을 고려해서, custom.css에 스타일을 추가합니다.

이름, 이메일, 웹사이트 및 내용 부분의 높이는 2em, 댓글 부분의 넓이는 100% 로 고쳐보겠습니다.

 

/* 코멘트수정 */
input[type="text"], input[type="email"], input[type="url"] { height: 2em; }

textarea { width: 100%; }

 

이름, 이메일, 웹사이트 부분의 높이가 변경되었고, 댓글의 가로 크기가 전체 영역으로 커졌습니다.