table tr의 display 옵션을 변경하면 colspan이 깨진다. 뭔가 만들다가 테이블 내용 중 한 줄을 없앴다가 다시 보이게 해야 할 상황이 되었다. 간단하게 생각했는데 예상치 못한 문제가 발생. display: none;으로 설정했다가 다시 display:inline; 으로 변경하니 colspan이 적용 안되는 문제였다. (아래 첫번째 항목에서 테스트 해보자) 여러 방법으로 애써봤는데 결국 다 실패. 결국 알아낸 이유는 table-tr의 display 속성 기본값이 inline이 아니라는 거였다. display:table-row로 변경해 주니 해결되었다. 아래 2번 항목에서 테스트해볼 수 있다. 1. 문제가 발생하는 경우 첫번째 버튼을 누르면 2번째 줄 tr의 속성이 display:none; 으로 변경되고, 두번째 버튼을 누르면 display:inline; 로 변경.. 프로그래밍 스터디/Javascript 8년 전
자바스크립트 콘솔에 서식 적용하기 얼마전 티스토리 스킨 수정을 위해 이것저것 테스트하면서 자바스크립트 콘솔을 띄워놨었는데, 재미있는 걸 발견했다. 페이지를 새로 로드할 때마다 아래 캡처처럼 콘솔 메시지가 뜨는거다. 콘솔 메시지에 서식을 적용할 수 있는줄은 처음 알았다. 신기해서 방법을 찾아보니 메시지에 스타일을 적용할 수 있는 방법이 있었다. 아래 코드를 참고하면 된다. 스트링 앞에 %c 를 추가한 뒤 뒤에 콤마로 구분하고 스타일을 적어주면 된다. 코드 // 스타일 한번만 적용하는 경우 console.log("%c블로그에 오신 것을 환영합니다!","color:#FF5555;font-weight:700;font-size:20pt;"); // 여러 스타일을 적용하는 경우 console.log("%c첫번째문자열"+"%c두번째문자열"+"%c세번.. 프로그래밍 스터디 8년 전
텍스트에 사용된 글자 목록 뽑기 텍스트에 사용된 글자 목록 뽑기 자주 필요한 건 아니지만 간혹 텍스트에 어떤 글자들이 포함되어 있는지 확인해보아야 할 때가 있다. 개인적으로는 사용자 입력 없이 정해진 텍스트를 표시하는 페이지에 사용할 웹폰트를 만들 때 자주 사용한다. 이스케이핑 처리가 예외가 많아 헷갈려서 그냥 주요 특수기호는 제거하고 처리함. 사용언어 및 라이브러리 Javascript, jQuery 소스코드 $(function(){ $('#toConvert').on('keyup', function(){ uniqueChar(); $('#input-byte').html($('#toConvert').val().length); $('#output-byte').html($('#Converted').val().length); }); $('#to.. 개발/개발내용 8년 전
