Web-Front13 [HTML]테이블 여러줄의 헤더 고정하는 방법 이전에 작성한 글 중에 css의 position: sticky를 이용하여 테이블의 헤더를 간단하게 고정하는 방법을 올린적이 있었다. 2020/05/18 - [Web-Front/HTML] - [HTML]테이블 헤더 고정하는 방법 [HTML]테이블 헤더 고정하는 방법 position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다. usang0810.tistory.com 쉽지만 유용한 방법이라 괜찮았었는데 댓글중에 헤더에서 rowspan을 사용했을 때 문제가 발생하는 것 같아서 확인해 보았다. 실제로 테스트해보니 첫번째 헤더위에 두번재 헤더가 올라가면서 의도치 않은 문제가 발생한다.. 2021. 3. 4. [TinyMCE] Content appearance options 종류 (에디터에 커스텀 스타일 적용하는 방법) https://www.tiny.cloud/docs/configure/content-appearance/ TinyMCE | Content appearance options Configure the appearance of content inside TinyMCe's editable area. www.tiny.cloud 먼저 tinyMCE 공식 문서에서 Content appearance options를 테스트하던 중 body_class와 body_id 옵션이 자꾸 적용되지 않았다. 결론적으로 해결방안은 content_css 옵션으로 외부 css파일을 등록하고 그 css파일에 있는 클래스명이나 아이디값을 body_class나 body_id 옵션의 값으로 넣어주면 된다. TinyMCE 에디터 자체가 textar.. 2020. 5. 29. [JavaScript] 양력을 음력으로 변환, 음력을 양력으로 변환 양력달력의 경우 Javascript의 Date객체를 사용하면 쉽게 만들 수 있지만 음력달력을 만들려고 보니 생각보다 어려웠다. 먼저 음력이 어떻게 만들어지는지도 몰랐고 음력의 규칙성을 찾을 수 없었다. 구글링하며 소스를 찾다가 좋은 소스를 찾아서 조금 수정하고 주석을 추가로 달아서 적용했다. https://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=69098309&qb=amF2YXNjcmlwdCDslpHroKUg7J2M66Cl&enc=utf8§ion=kin&rank=1&search_sort=0&spq=0 댓글란에 보면 네이버의 달력에서 소스를 추출해 왔다고 한다. 실제로 적용해보면 음력으로 값이 잘 나오게 되고 음력날짜를 넣어 양력값을 얻는 부분도.. 2020. 5. 28. [TinyMCE] User Interface options 종류 tinymce.init({ selector: 'css선택자', ui options... }); branding: boolean 값 false 시 하단의 'Powered by Tiny'문구를 삭제할 수 있다. premium 유저들에게만 선택적이다. draggable_modal: boolean 값 true 시 생성되는 모달창을 드래그로 움직일 수 있게 된다. elementpath: boolean 값 false 시 하단에 표시되는 요소선택자가 안보이게 된다. font_foramts: 'custom font name=origin font name, sub1, sub2...; other...;' 폰트명을 설정할 수 있다. 하나의 폰트명에 여러개의 폰트를 정할 수 있고 맨앞의 폰트가 없을 시 뒤에 있는게 설정되는 .. 2020. 5. 28. [TinyMCE] Integration options 종류 tinymce.init({ selector: 'css선택자', integration options... }); auto_focus: '요소의 id값' 에디터가 생성된 후 포커스를 해당 에디터로 자동으로 맞춰준다. init_instance_callback : function(editor) {} 에디터 객체가 초기화 된 후의 콜백함수를 지정할 수 있다. plugins TinyMCE가 로드할 때 로드할 플러그인을 지정한다. 기본적으로 TinyMCE는 플러그인을 로드하지 않는다. 여러개의 플러그인을 로드할 때는 구분자를 ' ' 공백으로 작성한다. 자주 사용하는 플러그인 목록 plugins: [ 'advlist autolink link image lists charmap print preview hr anchor.. 2020. 5. 27. [TinyMCE] textarea 값 가져오는 방법 TinyMCE 홈페이지를 보면 textarea를 form태그로 감싸 post방식으로 전송하라고 되어있다. 그래서 post방식으로 전송을 해보면 textarea적혀있는 값과 형태에 맞는 태그들이 전부 그대로 전송된다. 그런데 페이지이동없이 처리하는 ajax로 처리하려면 textarea안의 값을 추출해야하는데 javascript의 value로 해보면 textarea의 초기값만 추출되고 수정된 값들은 추출되지 않는다. 에디터를 다음과 같이 수정한 뒤 개발자 도구에서 textarea의 값을 확인해보면 안의 값은 바뀌지 않는걸 확인할 수 있다. TinyMCE는 textarea가 아닌 iframe을 올려 그 안에서 변경되는 값을 적용하기 때문에 textarea의 값은 초기값만 적용된다. 에디터안의 수정된 내용을 가.. 2020. 5. 27. [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. VSCode HTML 자동완성 만들기(사용자 코드 조각 추가) 기본적으로 제공되는 html 자동완성 코드들이 있지만 수정할 필요없이 본인에게 딱 맞는 자동완성이 되면 훨씬 더 효율적입니다. 먼저 기본적으로 자동완성되는 코드를 보면 lang을 ko로 변경해야하고 viewport부분도 제거하고싶습니다. 또 title태그 내용부분이 지워져있으면 더 좋을 것 같기 때문에 위의 내용을 담은 자동완성을 만들어 보겠습니다. vscode 왼쪽 하단의 톱니바퀴 모양을 눌러 '사용자 코드 조각'부분을 클릭합니다. 그러면 위와같은 화면이 나오는데 'html'을 입력하여 'html.json'파일을 선택해 수정화면으로 들어오면 됩니다. 주석으로 예제들이 적혀있으므로 잘 따라해주면 됩니다.(작성하고 나서 꼭 저장을 해주셔야 적용이 됩니다!) "korea html form" : { "pref.. 2020. 5. 11. [BS4] Bootstrap4 Examples 사용하기 https://getbootstrap.com/docs/4.4/examples/ Examples Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. getbootstrap.com 위의 사이트에서 먼저 Download source code를 눌러 예제 파일들을 다운로드 합니다. 다운로드 하면 압축파일이 다운로드 되는데 바로 압축을 해제해줍니다. 압축해제하고 bootstrap-4.4.1\site\docs\4.4\examples 이와 같은 경로로 들어오면 examples에 맞는 폴더들이 있는 것을 확인 할 수 있습니다. 저는 예제로.. 2020. 2. 12. [BS4] CDN 방식으로 Bootstrap4 사용하기 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 부트스트랩 공식사이트에 가면 도큐먼트, 예제 등 자세한 설명이 나와있습니다. 메인페이지의 밑부분으로 조금 내리면 아래와 같은 CDN방식으로 include하는 방법이 나와있습니다. 위의 코드들을 그대로 html에 포함시켜주면 사용할 준비가 끝납니다. 부트스트랩 도큐먼트에 있는 버튼 예제를 테스트한 결과 잘 적용되는 것을 확인할 수 있습니다. Primary Secondary Success Danger Warning Info Light Dark Link 2020. 2. 12. 이전 1 다음
