Python Web/Brython

[Python web] 1. 웹 만들기 (Brython)

1.Brython

brython에 관한 사이트다

brython.info/index.html 

 

Brython

Muy cierto que has visto relojes de este tipo en demos de HTML5. Pero, mira el código fuente de esta página... No hay lineas de Javascript, es puro código Python dentro de un script de tipo "text/python". Brython es diseñado para remplazar a JavaScript

brython.info

2. 실행

1. 간단한 실행 방법 

 

3. 파일구조

<folder>

Folder─┬─ index.htm
             ├─ style.css
             └─ script ─┬─ brython.js
                                 ├─ brython.min.js
                                 ├─ brython_stdlib.min.js
                                 └─ python.py

<index.html>

<!DOCTYPE html>
<html>
  <head>
    <!-- brython 가져오기 -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.9/brython_stdlib.min.js"></script>
    
    <!-- python 파일 사용하기 -->
    <script type="text/python" src="script/python.py"></script>
	
    <!-- css 파일 가져오기 -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body onload="brython()">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <button id='test-button'>파이썬 구동 확인</button>	
</body>
</html>

<css/style.css>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height:100%;
	border-style: solid ;
	border-color: white;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	padding: 30px;
	line-height: 1.6;
	overflow:hidden;
}
h1 {
	text-align: center;
	margin-bottom: 30px;
	border-bottom: 1px #ccc solid;
}

h2 {
	margin-top: 20px;
}

button {
	cursor: pointer;
	display: block;
	background: #333;
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 20px 0;
}

input[type="text"] {
	border: 1px #ccc solid;
	width: 300px;
	padding: 4px;
	height: 35px;
	margin-top: 20px;
}

.card {
	margin: 20px 0;
	border: #ccc 1px solid;
	padding: 20px;
}

.box {
	background: steelblue;
	width: 1.6em;
	height: 1.6em;
}

.brython-dialog-main {
	position:absolute;
	border-style: solid;
	border-width: thin;
	border-radius: 15px;
	background: white;
	border-color: black;
	width: 230px;
}
.brython-dialog-title {
	color: black;	
	margin: 5px 10px 10px 10px;
	border-bottom: 2px solid ;
}
.brython-dialog-close {
	color: black;
	float: right;
}
.brython-dialog-close:hover {
	cursor:pointer;
	color : gray;
	transition: 1s ease-in;
}
div.brython-dialog-panel div{
	text-align: center;
}

.brython-dialog-button {
	display: inline-block;
	vertical-align: center;
	cursor:pointer;
	
}

@media (max-width: 230px){
	.brython-dialog-main {
		width: 100%;
	}
}

<script/python.py>

''' DOM 사용 '''
from browser import document
from browser.widgets.dialog import InfoDialog

''' 알림창 만들기 '''
def alert(event):
  InfoDialog("Hello", "버튼이 눌렸다!",default_css=None,ok=True) 

''' html에 test-button id 가져오기 '''

document["test-button"].bind("click", alert)

 

4.  끝

간단한 구동을 해보았고 다음장부터 사용법에 대하여 적을 예정이다

 

 

'Python Web > Brython' 카테고리의 다른 글

[Python web] 6. FileReader(), rotate(), window.sessionStorage 파일 불러오기 및 객체 속성 적용(Brython)  (3) 2021.03.25
[Python web] 5. Template(), ajax() html글 객체 가져오기 (Brython)  (0) 2021.03.23
[Python web] 4. document 사용법 객체 불러오기 (Brython)  (0) 2021.03.22
[Python web] 3. 특성 (이벤트) 적용해보기(Brython)  (0) 2021.03.19
[Python web] 2. Brython DOM 객체 가져오는 방법(Brython)  (0) 2021.03.18