textarea 자동 높이 맞추기 Javascript 예제

아래는 textarea에 작성된 내용의 길이에 맞춰 style의 height를 계산하는 예제이다.

function textareaAutoHeight(el) {
    setTimeout(() => {
        el.style.height = 'auto';

        let scrollHeight = el.scrollHeight;
        let outlineHeight = el.offsetHeight - el.clientHeight;

        el.style.height = (scrollHeight + outlineHeight) + 'px';
    }, 0);
}

위 코드는 textarea의 스타일이 box-sizing: border-box;일 때 완벽하게 동작한다.

위 코드에서 중요한 부분은 바깥쪽을 포함한 높이 offsetHeight와 안쪽의 높이 clientHeight의 차를 textarea 높이에 더해준다는 것이다.

만약 이 계산을 포함하지 않으면 textarea에 테두리(border)가 있을 경우에 테두리의 위(border-top-width) + 아래(border-bottom-width) 만큼 손해를 보게 된다.

주의할 점은 border-width 값을 직접 더해주면 안된다. border-width의 단위는 픽셀(px)이 아닐 수도 있다. 그렇기 때문에 element 객체의 offsetHeight – clientHeight 로 테두리의 높이를 구해야 한다.

[서평] 생각한다면 과학자처럼

처음 이 책의 제목과 표지에서 받은 느낌은 과학적 상식을 가볍게 다루는 것이라 생각했다. 하지만 읽어보니 생각보다 내용에 무게가 있다. 잘못된 사례를 과학적으로 반박해야 하기에 수학 계산도 자주 등장한다.

계산과 관련된 예로 매년 미국에 수입되는 음식물이 300억톤이라는 신문 기사의 문제를 지적하며 미국 인구수로 나누면 1인당 1일 270kg을 섭취해야 가능한 양으로 어떤 정보에 대해서 곧이 곧대로 받아들이면 안된다는 내용이 있다.

알게된 정보에 대해서 타당한지 의심하고 검증해보는 것은 귀찮은 행위이지만 정보의 과잉인 시대에서 옳고 그른 정보를 구분하기 위해 최소한의 검증이 필요하다고 이야기 한다.

책에서 과학은 아래와 같은 속성을 갖고 있다고 한다.

  1. 과학은 통한다.
  2. 과학은 허튼소리를 뿌리 뽑는 데 대단히 효과적이다.
  3. 과학은 반권위주의적이다.
  4. 과학은 확실성을 내놓기 위해 애쓴다.
  5. 과학적 과정은 어수선하다.
  6. 모든 데이터가 평등하지는 않다.
  7. 과학은 초자연을 설명할 수 있다.
  8. 과학은 경이와 외경을 불러일으킨다.
  9. 과학은 반직관적이다.
  10. 과학은 우리를 개화시킨다.

과학적으로 생각을 하기 위해서 우선 과학이란 무엇인지 이해하여야 한다. 책에서 과학은 절대적 진리를 찾는게 아닌 자연의 반증 가능한 모형을 찾는 것이라 말하며 ‘창조론’이나 ‘5초 전 주의자’ 같은건 어느 누구도 틀렸음을 증명할 수 없는 속성상 반증 가능한 모형이 아니며 따라서 과학이 아니다라고 이야기 한다.

백신의 위험성과 지구온난화에 대한 이야기도 있는데 단순한 데이터만 놓고 옳고 그름을 따지는 것이 아닌 다양한 데이터와 복합적인 상황들을 모두 풀어 놓고 문제를 논의 한다.

특히 우리는 쉽게 잘못된 상관관계에 빠질 수 있는데 예로 사망자가 많은 지역의 공기가 나쁘다는 통계가 나왔는데 알고 보니 사망자가 많은 곳의 화장터가 그 지역의 공기를 나쁘게 한 것이었다.

잘못된 상관관계는 “치즈 소비량이 늘어날수록 이불에 목이 감겨 죽는 사망자 수가 늘어난다.”는 결과를 만들어내기도 한다.

이 시대의 이슈와 사회적 현상에 대해 관심이 많은 사람이라면 이 책의 과학적 풀이에 흥미를 느낄 것이라 생각한다.

macOS Sierra에서 원화(₩) 대신 백 쿼트(`) 입력하기

macOS Sierra에서 업데이트 후 키보드 한글 입력 상태에서는 백 쿼트(`) 키를 누르면 원화(₩)가 입력된다.

한글 입력 상태에서는 옵션키와 함께 백 쿼트(`)키를 눌러야 백 쿼트(`)를 입력 할 수 있다.

마크다운 문서를 작성하는 사람이나 개발자에게는 매우 불편하다.

# 해결 방법

  1. ~/Library 폴더로 이동해서 KeyBindings 폴더를 추가한다.
  2. ~/Library/KeyBindings 폴더에 DefaultkeyBinding.dict 파일을 만든다.
  3. DefaultkeyBinding.dict 파일에 아래의 코드를 추가한다.
    {
        "₩" = ("insertText:", "`");
    }
  4. 각 애플리케이션들을 새로 실행하면 한글 입력 상태에서도 백 쿼트(`)가 입력되는 것을 확인할 수 있다.