CSS5 [HTML]테이블 여러줄의 헤더 고정하는 방법 이전에 작성한 글 중에 css의 position: sticky를 이용하여 테이블의 헤더를 간단하게 고정하는 방법을 올린적이 있었다. 2020/05/18 - [Web-Front/HTML] - [HTML]테이블 헤더 고정하는 방법 [HTML]테이블 헤더 고정하는 방법 position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다. usang0810.tistory.com 쉽지만 유용한 방법이라 괜찮았었는데 댓글중에 헤더에서 rowspan을 사용했을 때 문제가 발생하는 것 같아서 확인해 보았다. 실제로 테스트해보니 첫번째 헤더위에 두번재 헤더가 올라가면서 의도치 않은 문제가 발생한다.. 2021. 3. 4. [TinyMCE] 라이브러리로 textarea 변경하기 TinyMCE 라이브러리는 textarea태그나 div태그의 편집을 도와주는 도구입니다. 라이브러리를 적용하면 기존의 textarea가 다음과 같은 화면으로 출력됩니다. 블로그나 카페에서 많이 사용하던 편집기의 기능들이 대부분 담겨있습니다. 다음은 TinyMCE 공식 홈페이지입니다. TinyMCE의 자세한 설명과 소개글을 확인할 수 있습니다. https://www.tiny.cloud/ The Most Advanced WYSIWYG HTML Editor | TinyMCE Download TinyMCE for free, the most advanced WYSIWYG HTML editor designed to simplify website content creation. www.tiny.cloud 먼저 위의 .. 2020. 5. 27. [JavaScript] yyyyMMdd, yyyy-MM-dd형식으로 오늘날짜 출력하기 먼저 new Date()로 날짜 객체를 생성하면 객체가 만들어진 날짜로 저장이 됩니다. Tue May 19 2020 08:50:54 GMT+0900 (대한민국 표준시) -> 이런식으로 출력이 되는데 여기서 년도, 월, 일수만 뽑아서 함수로 만들겠습니다. 객체의 메소드로 getFullYear(), getMonth(), getDate()를 사용하면 해당 값들을 추출할 수 있는데 getMonth()의 경우 시작 월수가 0~11이기 때문에 +1을 해주어야 합니다. 날짜를 꼭 8자리를 맞춰야할 때 월수나 일수가 1자리일 경우 202051 이런식으로 출력될 수 있습니다. 그렇기 때문에 값 앞쪽에 "0" 문자열 리터럴로 더해준 뒤 문자열을 나누는 메소드인 slice()로 뒤에서부터 2개를 잘라주면 월수와 일수가 2자.. 2020. 5. 19. [CSS] 부분 반응형 크기조절 (calc 연산) css에는 calc()연산이 있습니다. width나 height나 특정값을 딱 정해진 값이 아닌 특정값에 더해지거나 빼거나 하는 값을 넣을 수 있습니다. 예를들어 width: calc(100% - 200px)이런식으로 가능합니다. 이러면 특정 태그의 영역을 200px을 제외한 모든 가로크기로 영역을 차지하게 됩니다. 다음은 calc연산을 이용한 실행 결과입니다. 연두색의 경우 브라우저의 크기가 줄거나 늘어나는 것에 상관없이 400px로 고정되지만 보라색의 경우 400px을 제외한 나머지 영역을 전부 차지하게 됩니다. 이게 calc연산을 이용한 방법입니다. 전체 코드입니다. 더보기 2020. 5. 18. [HTML]테이블 헤더 고정하는 방법 position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다. 먼저 html코드의 큰 틀입니다. 1번헤더 2번헤더 3번헤더 4번헤더 5번헤더 그 다음은 핵심 css코드입니다. div크기를 table의 크기보다 작게 만들어준 것은 가로스크롤 시에도 어떻게 동작되는지 보여주기위해서 저렇게 만든 것입니다. #userListTable th에 position: sticky를 지정하고 꼭 top: 0으로 지정해줘야 헤더가 고정이 됩니다. top에 다른값을 주면 고정이 안됩니다. 그리고 배경색을 th에 지정해줘야 합니다. tr에 배경색을 지정해주면 tr은 고정되는것이 아니라 부자연스럽게.. 2020. 5. 18. 이전 1 다음
