자바블로그

html에서는 사용자 정의 attribute를 사용 할 수 있게 data- 라는 속성을 제공 하고 있습니다.

명명 규칙은 data- 로 시작 해야 한다는 점을 빼고는 사용자가 원하는 데이터를 제한 없이 정의 할 수 있습니다.

사용 방법은 아래와 같습니다.

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

javascript에서 해당 정보를 가지고 오려는 경우 아래와 같이 간단한 방식으로 접근 가능 합니다.

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

dataset을 이용해서 접근 하고 접근시 data- 이후의 내용을 key로 접근 하게 됩니다.

jQuery로 접근 하는 경우 아래와 같이 접근 가능 합니다.

$("#electriccars").attr("data-columns");
$("#electriccars").attr("data-index-number");
$("#electriccars").attr("data-parent");

해당 내용은 html의 속성으로 존재 하기 때문에 CSS에서도 해당 정보에 접근 할 수 있습니다.

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

현재 프론트 개발의 경우 많은 부분 react 나 vue.js를 사용하기 때문에 상기와 같은 html 속성을 사용할 일이 없을 수 있습니다.

하지만 저 같이 html+jquery+Vanilla JS+bootstrap 을 이용해서 작업하는 분들의 경우 유용하게 사용 할 수 있을거 같습니다.

관심 있는 내용인 경우 아래의 url 정보를 간략하게 정리한 내용이라 url을 참고 하시면 됩니다.

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

https://www.w3schools.com/tags/att_data-.asp

사이트, 페이지 작업 후 해당 페이지에 대한 설명을 meta태그에 추가 해 사이트가 검색이 잘되게 해줍니다.

(내용을 작성 하고 갱신 해주면 검색시 해당 내용이 활용 되기 때문에 유용 합니다.)

<title>페이지 제목</title>
<meta name=”description” content=”페이지 설명”>
<meta name=”keywords” content=”페이지에,들어간,키워드,단어로,입력,구분은,쉼표로”>

<meta property=”og:type” content=”website”>
<meta property=”og:title” content=”페이지 제목”>
<meta property=”og:description” content=”페이지 설명”>
<meta property=”og:image” content=”페이지 썸네일 이미지 주소”>
<meta property=”og:url” content=”페이지 주소”>

<meta property=”twitter:card” content=”summary”>
<meta property=”twitter:title” content=”페이지 제목”>
<meta property=”twitter:description” content=”페이지 설명”>
<meta property=”twitter:image” content=”페이지 썸네일 이미지 주소”>

og(페이스북), twitter(트위터)를 위한 meta태그는 상황에 따라서 사용하지 않아도 상관 없습니다.

image의 경우 페이스북, 트위터 연동시 표출되는 이미지로 지정 됩니다.

html5의 파일 업로드시 drag and drop을 하는 기본 소스 입니다.

<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" onchange="readFiles(event)" multiple>
<label class="custom-file-label" for="customFile" id="fileDropZone">file select or drag and drop</label>
</div>
<div class="drag-files" style="display:none;">
</div>
</div>


<script>
function readFiles(event) {
$(".custom-file-label").html("");
$('.drag-files').html("");
var fileList = event.target.files;

for(var i=0; i < fileList.length; i++ ) {
var file = fileList[i];
if(i!=0){$(".custom-file-label").append(",");}
$(".custom-file-label").append(file.name);
}
}
function drop(event) {
$(".custom-file-label").html("");
$('.drag-files').html("");

event.stopPropagation();
event.preventDefault();

var fileList = event.dataTransfer.files;
addFileFromLastInput(fileList)

for(var i=0; i < fileList.length; i++ ) {
var file = fileList[i];
if(i!=0){$(".custom-file-label").append(",");}
$(".custom-file-label").append(file.name);
}
}
function addFileFromLastInput(file){
console.log(file);

var a = $('input#fileselect.addFile');
a[a.length-1].files = file;

try{
var new_input = '<input id="fileselect" type="file" name="fileselect" multiple class="addFile" />';
$('.drag-files').append(new_input);
}catch(err){

}
return 0;
}

var dropZone = document.getElementById("fileDropZone");
dropZone.addEventListener ( "drop", drop, false);
</script>

bootstrap4 에서 bs-custom-file-input.js 하는 경우 custom-file-input class를 사용하는 경우

drag, drop 시 custom-file-input 해당하는 input에 change가 발생 되고 readFiles이 실행 됩니다.

(drag 관련 스크립트는 사용할 필요 없습니다.)

bs-custom-file-input.js를 사용하지 않는 경우 위의 모든 소스를 다 사용 해야 합니다.

http://tutorials.jenkov.com/html5/file-api.html#selecting-multiple-files

웹에서 pdf파일을 보여줘야 하는경우 뷰어가 사용자 pc에 설치 되어 있다는 전제로

<object type="application/pdf" data="pdf경로" width="94%" height="650"></object>

태그를 이용해서 화면을 출력 할 수 있습니다.

FCKeditor 2.5 버전까지는 이미지 업로드나 각종 설정시 팝업 형태의 다이얼로그 박스로 띄워졌으나

FCKeditor 2.6 이상의 버전에서는 레이어 형태의 다이얼로그 박스로 띄워지도록 되어있다.

그런데 이게 IE6, IE7, IE8 까지는 아무 이상이 없는데 IE9에서는

/fckeditor/editor/fckdialog.html 파일에서 호출 개체가 잘못되었습니다. 줄:813, 문자:4

라는 자바스크립트 오류가 뜨면서 먹통이 되어 버리는 문제가 있다.

파이어폭스, 크롬, 사파리, 오페라 등에서도 문제가 없는데 유독 IE9에서만 이런 오류가 발생한다.

물론 호환성 보기 모드로 돌려버리면 정상적으로 사용할 수 있지만, 근본적인 해결방법이 될 수는 없다.

FCKeditor 2.x는 CKEditor 3.x로 전환하면서 더이상 버전업이나 기술지원을 하지 않고, 심지어 버그 수정도 안하고 있다.

기다리고 기다려도 절대로 안할 모양이다.

CKEditor로 갈아타버리면 그만이겠지 생각하고 함부로 바꿨다간 개털되는 수가 있다.

개인용으로 사용하면 상관 없지만 상업용으로 사용시 제작자가 라이센스를 걸어버리는 센스를 발휘해버렸기 때문이다.

더구나 자체 업로드 기능도 없애버려서 CKFinder를 추가로 붙여야 하는데 얘는 무료가 아예 없다.

그간 FCKeditor를 무료로 배포해서 실컷 사용자들을 끌어 모았으니 3.0부터는 유료로 전환해도 되겠다 싶었던 모양이다.

비용을 지불하고 사용한다면 상관없지만 이걸 돈주고 사서 사이트를 개발해서 납품하는 업체가 얼마나 될까..?

뭐 어쨌든,

아래와 같이 약간만 수정하면 일단 IE9에서는 문제 없이 사용할 수 있다.

/fckeditor/editor/js/fckeditorcode_ie.js 파일을 열어

38번째줄에서

FCKTools.RegisterDollarFunction=function(A){A.$=A.document.getElementById;};

이부분을 찾아서 아래와 같이 수정한다.

FCKTools.RegisterDollarFunction = function( targetWindow ) {targetWindow.$ = function( id ){ return targetWindow.document.getElementById(id);};};

이렇게 수정하고 나면 IE9에서만 볼수 있었던 오류는 사라지게 된다.

테이블 크기 고정하기

<table width="600" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed">

<tr>

<td height="auto" style="padding:20 20 20 20; word-break:break-all;"><%=contents%></td>

</tr>

</table> 

1. style="table-layout:fixed"

    -> 테이블의 크기를 고정해 줍니다. 가로세로 모두 고정이 됩니다

2. style="word-break:break-all;"

    -> 1.의 방법으로 고정된 테이블에 긴 글을 넣을경우 가로가 고정되어 있으므로 글자가 잘려 보이는 경우가 발생.이것을 방지하고 글의 자동 줄바꿈 효과를 줍니다

3. height="auto"

   -> 1.의 방법으로 고정된 테이블의 세로때문에 글이 고정된 세로길이까지만 보입니다. 이것을 방지하기위해 세로의 길이를 오토로 조정해줍니다.

다국어 작업시 불어 출력을 위해서 작업 하는 중

악상코드 라는 부분에서 특수 문자를 출력 하기 위한 코드가 필요해서 

첨부파일과 같이 작업을 진행 했다

불어악상코드.html