[HTML & CSS]table 안에 input, textarea 태그

기본 input 태그 text 타입 :

기본 textarea 태그 :

이 두 태그를 table안에 넣으려 했다.

필자가 table을 만들때 이 속성이 필자를 불편하게 했다.

<table style="border: 1px solid; border-collapse: collapse;">
  <tr style="border: solid 1px ;">
    <th style="border: solid 1px ;">
     Text
    </th>
    <td style="border: 1px solid;">
      <input type="text" name="text" size="20" style="width:100%;">
    </td>
  </tr>
  <tr style="border: solid 1px ;">
    <th style="border: solid 1px ;">
     Textarea
    </th>
    <td style="border: 1px solid;">
      <textarea name="content" rows="10" style="width:100%;"></textarea>
    </td>
  </tr>
</table>

* 각 table, tr, th, td에 style="border"로 테두리를 줌

* table에 border-collapse: collapse; 을 줘서 테이블간 간격을 없게 함

* input 태그 text 타입과 textarea 태그에 style="width:100%"를 주어서 td안에 꽉 차게 함

Text
Textarea

이렇게 table을 만드는데 테두리안에 테두리가 있다.

또 input을 클릭하면 파랑색같은 테두리가 또! 또!! 또!!! 나온다.

너무 안 이쁘지 않은가???

이것이 필자에 디자인 존심을 건드렸다...

input과 textarea에 테두리를 없애리라!

input과 textarea에 테두리를 없애는 방법은 그다지 어렵지 않다!

style에 border: 0; 을 주는 것이다! 너무 쉽네...

border는 테두리를 뜻하는 속성이다.

그래서 border를 그냥 없애면 된다.

끝.

적용해보면

<input type="text" name="text" size="20" style="width:100%; border: 0;">
<textarea name="content" rows="10" style="width:100%; border: 0;"></textarea>

Text
Textarea

없어졌다!!

그런데 클릭시 파란색인지 뭔지 저 테두리는 계속 생긴다..ㅠ

저것도 없애보자!

이건 CCS에서 :focus로 지정하는 건데

html에서는

<style>
input:focus, textarea:focus{
    outline: none;
}
</style>

CSS에서는

.td input:focus, .td textarea:focus{
    outline: none;
}

이렇게 지정해주면!

Text
Textarea

된다!ㅎㅎ

그런데 저저저 /// 요런건 뭐지..

잡아서 끌면 지구 끝까지 커진다..;;

textarea 태그에 자동으로 되는 기능인데 이것도 지우자!

style에 resize: none; 을 넣어주면 된다.

최종적으로 적용해보면

<input type="text" name="text" size="20" style="width:100%; border: 0;">
<textarea name="content" rows="10" style="width:100%; border: 0; resize: none;"></textarea>

Text
Textarea

깔끔하게 적용되었다!