Textarea

Textarea (여러 줄 입력)

Bulma textarea CSS 클래스는 input 요소의 다중 줄 버전이에요. 색상·크기·상태 수정자를 지원해요.

출처: 문서

본문

Bulma textarea CSS 클래스는 input 요소의 다중 줄 버전이에요:

<textarea class="textarea" placeholder="e.g. Hello world"></textarea>

rows HTML 속성으로 textarea의 높이를 설정할 수 있어요.

<textarea
  class="textarea"
  placeholder="10 lines of textarea"
  rows="10"
></textarea>

색상 (Colors)

textarea 요소는 여러 색상으로 사용할 수 있어요: is-link, is-primary, is-info, is-success, is-warning, is-danger.

<textarea
  class="textarea is-link"
  placeholder="Link textarea"
></textarea>

<textarea
  class="textarea is-primary"
  placeholder="Primary textarea"
></textarea>

<textarea
  class="textarea is-info"
  placeholder="Info textarea"
></textarea>

<textarea
  class="textarea is-success"
  placeholder="Success textarea"
></textarea>

<textarea
  class="textarea is-warning"
  placeholder="Warning textarea"
></textarea>

<textarea
  class="textarea is-danger"
  placeholder="Danger textarea"
></textarea>

크기 (Sizes)

textarea 요소는 4가지 크기로 제공돼요: is-small, is-normal, is-medium, is-large.

<div class="field">
  <div class="control">
    <textarea class="textarea is-small" placeholder="Small textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea" placeholder="Normal textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea
      class="textarea is-medium"
      placeholder="Medium textarea"
    ></textarea>
  </div>
</div>
<div class="field">
  <div class="control">
    <textarea class="textarea is-large" placeholder="Large textarea"></textarea>
  </div>
</div>

상태 (States)

Bulma는 textarea 요소의 다양한 상태를 스타일링해요. 각 상태는 의사 클래스(pseudo-class)와 CSS 클래스로 제공돼요:

  • :hover와 is-hovered
  • :focus와 is-focused
  • :active와 is-active

이를 통해 실제로 상태를 트리거하지 않고도 특정 상태의 스타일을 얻을 수 있어요.

일반 (Normal)

<div class="control">
  <textarea class="textarea" placeholder="Normal textarea"></textarea>
</div>

호버 (Hover)

<div class="control">
  <textarea
    class="textarea is-hovered"
    placeholder="Hovered textarea"
  ></textarea>
</div>

포커스 (Focus)

<div class="control">
  <textarea
    class="textarea is-focused"
    placeholder="Focused textarea"
  ></textarea>
</div>

로딩 (Loading)

<div class="control is-loading">
  <textarea class="textarea" placeholder="Loading textarea"></textarea>
</div>

control 컨테이너에 is-small, is-medium, is-large를 붙이면 로딩 스피너의 크기를 조절할 수 있어요.

<div class="field">
  <div class="control is-small is-loading">
    <textarea
      class="textarea is-small"
      placeholder="Small loading textarea"
    ></textarea>
  </div>
</div>
<div class="field">
  <div class="control is-loading">
    <textarea class="textarea" placeholder="Normal loading textarea"></textarea>
  </div>
</div>
<div class="field">
  <div class="control is-medium is-loading">
    <textarea
      class="textarea is-medium"
      placeholder="Medium loading textarea"
    ></textarea>
  </div>
</div>
<div class="field">
  <div class="control is-large is-loading">
    <textarea
      class="textarea is-large"
      placeholder="Large loading textarea"
    ></textarea>
  </div>
</div>

비활성 (Disabled)

<div class="control">
  <textarea
    class="textarea"
    placeholder="Disabled textarea"
    disabled
  ></textarea>
</div>

읽기 전용 (Readonly)

readonly HTML 속성을 사용하면 textarea가 일반 textarea와 비슷하게 보이지만, 편집할 수 없고 그림자도 없어요.

This content is readonly

<div class="control">
  <textarea class="textarea" readonly>This content is readonly</textarea>
</div>

고정 크기 (Fixed Size)

has-fixed-size 수정자를 붙이면 textarea의 크기 조절을 비활성화할 수 있어요:

<div class="control">
  <textarea
    class="textarea has-fixed-size"
    placeholder="Fixed size textarea"
  ></textarea>
</div>

Sass와 CSS 변수 (Sass and CSS variables)

Sass 변수 CSS 변수 값
```sass
$textarea-padding
``` ```css
var(--bulma-textarea-padding)
``` ```css
var(--bulma-control-padding-horizontal)
```
```sass
$textarea-max-height
``` ```css
var(--bulma-textarea-max-height)
``` ```css
40em
```
```sass
$textarea-min-height
``` ```css
var(--bulma-textarea-min-height)
``` ```css
8em
```

더 알아보기 (Learn more)