반응형
반응형

HTML 특수문자

HTML 상에서 특수문자가 제대로 나타나지 않을 수 있기 때문에 아래 문자들를 사용합니다.
표현문자 숫자표현 문자표현 설명
- �- - 사용하지 않음
space 	 - 수평탭
space 
 - 줄 삽입
- - - 사용하지 않음
space   - 여백
! ! - 느낌표
" " " 따옴표
# # - 숫자기호
$ $ - 달러
% % - 백분율 기호
& & & Ampersand
' ' - 작은 따옴표
( ( - 왼쪽 괄호
) ) - 오른쪽 괄호
* * - 아스트릭
+ + - 더하기 기호
, , - 쉼표
- - - Hyphen
. . - 마침표
/ / - Solidus (slash)
0 - 9 0-9 - 0부터 9까지
: : - 콜론
; &#59; - 세미콜론
< &#60; &lt; 보다 작은
= &#61; - 등호
> &#62; &gt; 보다 큰
? &#63; - 물음표
@ &#64; - Commercial at
A - Z &#65;-&#90; - A부터 Z까지
[ &#91; - 왼쪽 대괄호
\ &#92; - 역슬래쉬
] &#93; - 오른쪽 대괄호
^ &#94; - 탈자부호
_ &#95; - 수평선
` &#96; - Acute accent
a - z &#97;-&#122; - a부터 z까지
{ &#123; - 왼쪽 중괄호
| &#124; - 수직선
} &#125; - 오른쪽 중괄호
~ &#126; - 꼬리표
- &#127;-&#159; - 사용하지 않음
  &#160; &nbsp; Non-breaking space
¡ &#161; &iexcl; 거꾸로된 느낌표
&#162; &cent; 센트 기호
&#163; &pound; 파운드
¤ &#164; &curren; 현재 환율
&#165; &yen;
| &#166; &brvbar; 끊어진 수직선
§ &#167; &sect; 섹션 기호
¨ &#168; &uml; 움라우트
&#169; &copy; 저작권
ª &#170; &ordf; Feminine ordinal
&#171; &laquo; 왼쪽 꺾인 괄호
&#172; &not; 부정
­ &#173; &shy; Soft hyphen
? &#174; &reg; 등록상표
&hibar; &#175; &macr; Macron accent
° &#176; &deg; Degree sign
± &#177; &plusmn; Plus or minus
² &#178; &sup2; Superscript two
³ &#179; &sup3; Superscript three
´ &#180; &acute; Acute accent
μ &#181; &micro; Micro sign (Mu)
&#182; &para; 문단기호
· &#183; &middot; Middle dot
¸ &#184; &cedil; Cedilla
¹ &#185; &sup1; Superscript one
º &#186; &ordm; Masculine ordinal
&#187; &raquo; 오른쪽 꺾인 괄호
¼ &#188; &frac14; 4분의 1
½ &#189; &frac12; 2분의 1
¾ &#190; &frac34; 4분의 3
¿ &#191; &iquest; 거꾸로된 물음표
A &#192; &Agrave; Capital A, grave accent
A &#193; &Aacute; Capital A, acute accent
A &#194; &Acirc; Capital A, circumflex accent
A &#195; &Atilde; Capital A, tilde
A &#196; &Auml; Capital A, dieresis or umlaut mark
A &#197; &Aring; Capital A, ring (Angstrom)
Æ &#198; &AElig; Capital AE diphthong (ligature)
C &#199; &Ccedil; Capital C, cedilla
E &#200; &Egrave; Capital E, grave accent
E &#201; &Eacute; Capital E, acute accent
E &#202; &Ecirc; Capital E, circumflex accent
E &#203; &Euml; Capital E, dieresis or umlaut mark
I &#204; &Igrave; Capital I, grave accent
I &#205; &Iacute; Capital I, acute accent
I &#206; &Icirc; Capital I, circumflex accent
I &#207; &Iuml; Capital I, dieresis or umlaut mark
Ð &#208; &ETH; Capital Eth, Icelandic
N &#209; &Ntilde; Capital N, tilde
O &#210; &Ograve; Capital O, grave accent
O &#211; &Oacute; Capital O, acute accent
O &#212; &Ocirc; Capital O, circumflex accent
O &#213; &Otilde; Capital O, tilde
O &#214; &Ouml; Capital O, dieresis or umlaut mark
× &#215; &times; Multiply sign
Ø &#216; &Oslash; width="130"Capital O, slash
U &#217; &Ugrave; Capital U, grave accent
U &#218; &Uacute; Capital U, acute accent
U &#219; &Ucirc; Capital U, circumflex accent
U &#220; &Uuml; Capital U, dieresis or umlaut mark
Y &#221; &Yacute; Capital Y, acute accent
Þ &#222; &THORN; Capital Thorn, Icelandic
ß &#223; &szlig; Small sharp s, German (sz ligature)
a &#224; &agrave; Small a, grave accent
a &#225; &aacute; Small a, acute accent
a &#226; &acirc; Small a, circumflex accent
a &#227; &atilde; Small a, tilde
a &#228; &auml; Small a, dieresis or umlaut mark
a &#229; &aring; Small a, ring
æ &#230; &aelig; Small ae diphthong (ligature)
c &#231; &ccedil; Small c, cedilla
e &#232; &egrave; Small e, grave accent
e &#233; &eacute; Small e, acute accent
e &#234; &ecirc; Small e, circumflex accent
e &#235; &euml; Small e, dieresis or umlaut mark
i &#236; &igrave; Small i, grave accent
i &#237; &iacute; Small i, acute accent
i &#238; &icirc; Small i, circumflex accent
i &#239; &iuml; Small i, dieresis or umlaut mark
ð &#240; &eth; Small eth, Icelandic
n &#241; &ntilde; Small n, tilde
o &#242; &ograve; Small o, grave accent
o &#243; &oacute; Small o, acute accent
o &#244; &ocirc; Small o, circumflex accent
o &#245; &otilde; Small o, tilde
o &#246; &ouml; Small o, dieresis or umlaut mark
÷ &#247; &divide; Division sign
ø &#248; &oslash; Small o, slash
u &#249; &ugrave; Small u, grave accent
u &#250; &uacute; Small u, acute accent
u &#251; &ucirc; Small u, circumflex accent
u &#252; &uuml; Small u, dieresis or umlaut mark
y &#253; &yacute; Small y, acute accent
þ &#254; &thorn; Small thorn, Icelandic
y &#255; &yuml; Small y, dieresis or umlaut mark
반응형
반응형

PyScript -  Run Python in Your HTML

 

https://pyscript.net/

 

Pyscript.net

Run Python code in your HTML.

pyscript.net

Examples: https://pyscript.net/examples

PyScript

What is PyScript

Summary

PyScript is a Pythonic alternative to Scratch, JSFiddle, and other "easy to use" programming frameworks, with the goal of making the web a friendly, hackable place where anyone can author interesting and interactive applications.

To get started see the getting started tutorial.

For examples see the pyscript folder.

Longer Version

PyScript is a meta project that aims to combine multiple open technologies into a framework that allows users to create sophisticated browser applications with Python. It integrates seamlessly with the way the DOM works in the browser and allows users to add Python logic in a way that feels natural both to web and Python developers.

Try PyScript

To try PyScript, import the appropriate pyscript files to your html page with:

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

You can then use PyScript components in your html page. PyScript currently implements the following elements:

  • <py-script>: can be used to define python code that is executable within the web page. The element itself is not rendered to the page and is only used to add logic
  • <py-repl>: creates a REPL component that is rendered to the page as a code editor and allows users to write executable code

Check out the pyscriptjs/examples folder for more examples on how to use it, all you need to do is open them in Chrome.

How to Contribute

Read the contributing guide to learn about our development process, reporting bugs and improvements, creating issues and asking questions.

Resources

https://github.com/pyscript/pyscript

 

GitHub - pyscript/pyscript: Home Page: https://pyscript.net Examples: https://pyscript.net/examples

Home Page: https://pyscript.net Examples: https://pyscript.net/examples - GitHub - pyscript/pyscript: Home Page: https://pyscript.net Examples: https://pyscript.net/examples

github.com

Anaconda Engineering Blog

 

Anaconda Engineering Blog

Sat 30 April 2022 By Fabio Pliger - pandas One of the main reasons I joined Anaconda seven and a half years ago was the company’s commitment to the data science and Python communities by creating tools that enable people to do more with less. Today I'm h

engineering.anaconda.com

 

반응형
반응형

[python] How to write to an HTML file in Python

https://www.kite.com/python/answers/how-to-write-to-an-html-file-in-python

 

Kite - Free AI Coding Assistant and Code Auto-Complete Plugin

Code faster with Kite’s AI-powered autocomplete plugin for over 16 programming languages and 16 IDEs, featuring Multi-Line Completions. Works 100% locally.

www.kite.com

USE open() AND file.write() TO WRITE TO AN HTML FILE

Use open(file, mode) with mode as "w" to create a new HTML file file or write to an existing one. Use file.write(data) to write data to the file. Use file.close() to close the file after writing.

text = '''
<html>
    <body>
        <h1>Heading</h1>
    </body>
</html>
'''
file = open("sample.html","w")
file.write(text)
file.close()
SAMPLE.HTML
<html>
    <body>
        <h1>Heading</h1>
    </body>
</html>
반응형
반응형

How TO - Sort a Table

 

html 테이블 정렬

 

.

반응형
반응형

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

 

반응형

+ Recent posts