CSS 너비 / 높이 또는 HTML cols / rows 속성으로 텍스트 영역의 크기를 조정해야합니까?

CSS 너비 / 높이 또는 HTML cols / rows 속성으로 텍스트 영역의 크기를 조정해야합니까?

---

포함 된 새 양식을 개발할 때마다 textarea치수를 지정해야 할 때 다음과 같은 딜레마가 발생합니다.

CSS를 사용 하거나 textarea의 속성 cols과 rows?

각 방법의 장단점은 무엇입니까?

이러한 속성을 사용하는 의미는 무엇입니까?

보통 어떻게됩니까?

---

둘 다 사용하는 것이 좋습니다. 클라이언트가 CSS를 지원하지 않는 경우 행과 열이 필요하고 유용합니다. 그러나 디자이너로서 나는 내가 원하는 크기를 얻도록 덮어 씁니다.

권장되는 방법은 외부 스타일 시트를 통하는 것입니다. 예 :

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

---

HTML 세트에서

<textarea rows="10"></textarea>

CSS 세트에서

textarea { height: auto; }

이렇게하면 브라우저가 텍스트 영역의 높이를 행 수와 그 주변의 패딩으로 정확하게 설정하도록 트리거합니다. CSS 높이를 정확한 픽셀 수로 설정하면 임의의 공백이 남습니다.

---

w3c에 따르면 cols와 rows는 모두 textareas의 필수 속성입니다. 행과 열은 픽셀이나 다른 임의의 값이 아닌 텍스트 영역에 들어갈 문자 수입니다. 행 / 콜로 이동하십시오.

---

대답은 "예"입니다. 즉, 둘 다 사용해야합니다. 행과 열이 없으면 (명시 적으로 사용하지 않더라도 기본값이 있음) CSS가 비활성화되거나 사용자 스타일 시트에 의해 재정의되는 경우 텍스트 영역이 사용할 수 없을 정도로 작습니다. 접근성 문제를 항상 염두에 두십시오. 그 존재는 스타일 시트가 텍스트 영역의 모양을 제어 할 수있는 경우, 당신은 일반적으로 잘 전체 페이지 디자인에 훨씬 좋아 보이는 뭔가 맞는와 바람 것, 말했다 및 (즉, 사용자 입력을 유지하기 위해 크기를 조정할 수 있습니다 물론 좋은 맛의 한계 내에서).

---

텍스트 영역의 크기는 cols 및 rows 속성으로 지정하거나 더 좋게 지정할 수 있습니다. CSS의 height 및 width 속성을 통해 cols 속성은 모든 주요 브라우저에서 지원됩니다. 한 가지 주요 차이점은 <TEXTAREA ...>컨테이너 태그입니다. 시작 태그 ()가 있습니다.

---

 <textarea style="width:300px; height:150px;" ></textarea>

---

텍스트 영역의 경우 CSS 아래에서 크기를 수정할 수 있습니다.

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

angularjs 및 angular7에서 테스트

---

나는 보통을 지정하지 않지만 and 및을 height지정 합니다.width: ...rowscols

일반적으로, 내 경우 만 width하고 rows다른 elems에 베풀어 관련 봐 좋은에 텍스트 영역을 위해 필요하다. (그리고 cols다른 답변에서 설명한 것처럼 누군가 CSS를 사용하지 않으면 대체됩니다.)

((두 가지를 모두 지정 rows하고 height중복 데이터와 같은 느낌이 들까 요?))

---

텍스트 영역의 주요 특징은 확장 가능하다는 것입니다. 웹 페이지에서 텍스트 길이가 설정 한 공간을 초과하는 경우 (행을 사용하거나 CSS를 사용하는 경우) 스크롤 막대가 텍스트 영역에 표시 될 수 있습니다. 특히 사용자가 인쇄 할 때 문제가 될 수 있습니다. PDF로 '인쇄'-조건부 CSS 규칙을 사용하여 인쇄 된 텍스트 영역에 대해 편안하게 큰 최소 높이를 설정하십시오.

@media print { 
textarea {
min-height: 900px;  
}
}

---

매번 사용하지 않으면 줄 높이를 사용하십시오. '..'; 속성은 텍스트 영역의 높이와 텍스트 영역의 너비에 대한 너비 속성을 제어합니다.

또는 다음 CSS로 글꼴 크기를 사용할 수 있습니다.

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

---

HTML 행과 열이 반응하지 않습니다!

CSS에서 크기를 정의합니다. 팁 : 휴대 전화에 작은 크기를 정의하면textarea:focus {};

여기에 여분의 공간을 추가하십시오. 사용자가 실제로 무언가를 작성하려는 순간 만 전개됩니다.

---

CSS

---

input
{
    width: 300px;
    height: 40px;
} 

HTML

---

<textarea rows="4" cols="50">HELLO</textarea>

참고 URL : https://stackoverflow.com/questions/3896537/should-i-size-a-textarea-with-css-width-height-or-html-cols-rows-attributes