반응형

textarea 입력대로 화면에 출력하기

<!DOCTYPE html>
<head>
<title>Recipe</title>
<script>

window.onload=function() {
 document.getElementById("preview").onclick=processText;
}

function processText() {
 var txtBox = document.getElementById("inputbox");
 var lines = txtBox.value.split("\n");

 // generate HTML version of text
 var resultString  = "<p>";
 for (var i = 0; i < lines.length; i++) {
   resultString += lines[i] + "<br />";
 }
 resultString += "</p>";

 // print out to page
 var   blk   = document.getElementById("result");
 blk.innerHTML  =  resultString; 
}

</script>

</head>
<body>
<textarea id="inputbox" cols="20" rows="10"></textarea>
<div><button id="preview">Preview</button></div>
<div id="result"></div>
</body>

textarea를 줄별로 처리하기

//줄 바꿈 문자를 기준으로 textarea 문자열을 분리
var txtBox = document.getElementById("inputbox");
var lines = txtBox.value.split("\n");

//내용을 HTML 버전으로 변경
var resultString  = "<p>";
for (var i = 0; i < lines.length; i++) {
    resultString += lines[i] + "<br>";
}
resultString += "</p>";

//페이지에 출력
var   blk   = document.getElementById("result");
blk.innerHTML  =  resultString; 
반응형
반응형

html table css 참고 

nanati.me/html_css_table_design/

 

html/css로 만드는 table 디자인 샘플

html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^ 웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 밖에 없죠.거기다 장식할만한 파트도 선이나

nanati.me

 

반응형
반응형

jQuery HTML / CSS Methods

www.w3schools.com/jquery/jquery_ref_html.asp

 

jQuery HTML / CSS Methods

jQuery HTML / CSS Methods jQuery HTML / CSS Methods The following table lists all the methods used to manipulate the HTML and CSS. The methods below work for both HTML and XML documents. Exception: the html() method. Method Description addClass() Adds one

www.w3schools.com

MethodDescription

addClass() Adds one or more class names to selected elements
after() Inserts content after selected elements
append() Inserts content at the end of selected elements
appendTo() Inserts HTML elements at the end of selected elements
attr() Sets or returns attributes/values of selected elements
before() Inserts content before selected elements
clone() Makes a copy of selected elements
css() Sets or returns one or more style properties for selected elements
detach() Removes selected elements (keeps data and events)
empty() Removes all child nodes and content from selected elements
hasClass() Checks if any of the selected elements have a specified class name
height() Sets or returns the height of selected elements
html() Sets or returns the content of selected elements
innerHeight() Returns the height of an element (includes padding, but not border)
innerWidth() Returns the width of an element (includes padding, but not border)
insertAfter() Inserts HTML elements after selected elements
insertBefore() Inserts HTML elements before selected elements
offset() Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent() Returns the first positioned parent element
outerHeight() Returns the height of an element (includes padding and border)
outerWidth() Returns the width of an element (includes padding and border)
position() Returns the position (relative to the parent element) of an element
prepend() Inserts content at the beginning of selected elements
prependTo() Inserts HTML elements at the beginning of selected elements
prop() Sets or returns properties/values of selected elements
remove() Removes the selected elements (including data and events)
removeAttr() Removes one or more attributes from selected elements
removeClass() Removes one or more classes from selected elements
removeProp() Removes a property set by the prop() method
replaceAll() Replaces selected elements with new HTML elements
replaceWith() Replaces selected elements with new content
scrollLeft() Sets or returns the horizontal scrollbar position of selected elements
scrollTop() Sets or returns the vertical scrollbar position of selected elements
text() Sets or returns the text content of selected elements
toggleClass() Toggles between adding/removing one or more classes from selected elements
unwrap() Removes the parent element of the selected elements
val() Sets or returns the value attribute of the selected elements (for form elements)
width() Sets or returns the width of selected elements
wrap() Wraps HTML element(s) around each selected element
wrapAll() Wraps HTML element(s) around all selected elements
wrapInner() Wraps HTML element(s) around the content of each selected element

 

 

반응형
반응형

웹의 프론트엔드 기술인 HTML, CSS, JavaScript를 웹에서 작성해서 바로 테스트 해볼 수 있고, 그 소스를 저장 공유할 수 있는 서비스이다.

 

https://jsfiddle.net/user/mill01/fiddles/

 

Settings - JSFiddle - Code Playground

 

jsfiddle.net

반응형
반응형

웹에서 요소 복사. HTML DOM execCommand() Method

현재 선택영역의 텍스트를 인자로 받은 값을 통해 변환시킵니다. 

execCommand 에서 "copy" 명령 사용

document.execCommand('Italic')           // 기울이기
document.execCommand('Underline')        // 밑줄
document.execCommand('StrikeThrough')    // 중간줄
document.execCommand('Cut')              // 자르기
document.execCommand('Copy')             // 복사하기
document.execCommand('Paste')            // 붙혀넣기
document.execCommand('Undo')             // 실행취소
document.execCommand('Redo')             // 다시실행
document.execCommand('insertorderedList')    // 글번호 매기기
document.execCommand('insertunorderdList')   // 글머리 매기기
document.execCommand('outdent')          // 내어쓰기
document.execCommand('indent')           // 들여쓰기
document.execCommand('justifyleft')      // 왼쪽정렬
document.execCommand('justifycenter')    // 가운데정렬
document.execCommand('justifyright')     // 오른쪽정렬

Syntax

document.execCommand(command, showUI, value)

Parameter Values

ValueDescription

command Specifies the name of the command to execute on the selected section. 

Legal values: 
"backColor"
"bold"
"createLink"
"copy"
"cut"
"defaultParagraphSeparator"
"delete"
"fontName"
"fontSize"
"foreColor"
"formatBlock"
"forwardDelete"
"insertHorizontalRule"
"insertHTML"
"insertImage"
"insertLineBreak"
"insertOrderedList"
"insertParagraph"
"insertText"
"insertUnorderedList"
"justifyCenter"
"justifyFull"
"justifyLeft"
"justifyRight"
"outdent"
"paste"
"redo"
"selectAll"
"strikethrough"
"styleWithCss"
"superscript"
"undo"
"unlink"
"useCSS"
showUI A Boolean, specifies if the UI should be shown or not
value Some commands need a value to be completed

 

반응형
반응형

Outline Mail: HTML email framework

 

Outline Mail is an easy to use HTML email framework. It includes mix and match responsive email components that are fully tested in over 30 email clients.

outline mail

 

 

 

 

 

 

 

 

 

.

반응형
반응형

Reveal.js: Easy HTML presentations

 

 

프레젠테이션,PPT, HTML

 

Reveal.js is a framework for creating HTML presentations with CSS 3D transforms to transition between slides. It even has support for sub-slides that can be accessed from within individual slides.

reveal.js

 

 

 

 

 

 

 

반응형
반응형

 

HTML Minifier: Minify your HTML files

HTML 소스 줄여줘요~

HTML Minifier is a simple web app that minifies your HTML code according to options you select. You can opt to remove comments, collapse whitespace, remove optional tags, and more.

minifier

반응형

+ Recent posts