textarea 에서 라인 그리기 효과 - 마치 연습장 같은 느낌이 나는 CSS 효과 (repeating-linear-gradient)

html 코드로 여러줄의 텍스트를 입력받을때 사용하는 것이 바로 textarea 입니다. 그런데 그 안에다가 효과를 주는것은 좀 힘들기도 합니다. 그런데 텍스트 입력받을때 마치 밑줄이 그어진 노트와 같은 효과를 나타내는 것은 어떻게 해야할까요? 물론 textarea 안에다가 직접 라인을 넣은것을 불가능합니다. 따라서 CSS 를 이용해야합니다. 그리고 CSS 코드에서 백그라운드로 하여서 라인을 반복해야 합니다.

 

우선 아래의 html 코드를 보시면 간단하게 textarea 태그가 있고 그 안에 클래스를 notes 라고 주었습니다. 이렇게 하면 html 파일 안에서의 모든 것은 완료가 되었습니다. 다만 CSS 코드를 선언해야하는데요. 간단하게 html 파일 head 태그 안에 style 태그로 선언하여 주거나 또는 link 태크로 CSS 파일을 생성해서 그 파일경로를 지정하셔도 됩니다.

 

 

[html 코드]

 

<textarea class="notes"></textarea>

 

 

이제 아래의 CSS 내용을 살펴보겠습니다. notes 클래스를 보시면 background-image 를 local 로 해서 이미지가 경로가 아닌 linear-gradient 로 선언을 하는 것입니다. 이 부분은 왼쪽과 오른쪽의 흰 여백을 만들기 위함입니다. 그리고 repeating-linear-gradient 함수로 밑줄이 그어질 라인에 대한 부분을 선언하게 됩니다. 그리고 줄의 크기나 여백은 line-height 와 padding 으로 조절을 하면 됩니다.

 

 

[css 코드]

 

.notes {
  background-attachment: local;
  background-image:
    linear-gradient(to right, white 10px, transparent 10px),
    linear-gradient(to left, white 10px, transparent 10px),
    repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
  line-height: 31px;
  padding: 8px 10px;
}

 

 

위와 같이 하시면 아래의 이미지와 같은 결과 화면을 보실 수가 있습니다.

 

textarea 줄이 그어진 노트 효과