jinja + html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ name }}</title>
<style>
th#t01 {
background-color: #f1f1c1;
}
td {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%" border="2">
{% for e in data_dict %}
{% for key, value in e.items() %}
<tr>
<th id="t01"> {{ key }} </th>
<td>
{% if key == "movie_summary" %}
{% for k, v in dict(value).items() %}
<table>
<tr>
<th> {{ k }} </th>
<td> {{ v }} </td>
</tr>
</table>
{% endfor %}
{% else %}
{% if key == "movie_poster_path" %}
<img src= "{{ value }}">
{% else %}
{{ value }}
{% endif %}
{% endif %}
</td>
</tr>
{% endfor %}
{% endfor %}
</table>
</body>
</html>
'언어 > html' 카테고리의 다른 글
| 스터디 (html-> list) (0) | 2017.09.10 |
|---|---|
| <h1> </h1> (0) | 2016.05.24 |
| 테스트 (0) | 2016.05.10 |
| 작업중 (0) | 2016.02.28 |
| study1 (0) | 2016.02.16 |
스터디 (html-> list)
<html>
<head><title>"준현이의 html"</title></head>
<body>
<ul>
<li>black</li>
<li>white</li>
<li>yellow</li>
<li>green</li>
</ul>
</body>
</html>
'언어 > html' 카테고리의 다른 글
| jinja + html (0) | 2019.03.24 |
|---|---|
| <h1> </h1> (0) | 2016.05.24 |
| 테스트 (0) | 2016.05.10 |
| 작업중 (0) | 2016.02.28 |
| study1 (0) | 2016.02.16 |
<h1> </h1>
'언어 > html' 카테고리의 다른 글
| jinja + html (0) | 2019.03.24 |
|---|---|
| 스터디 (html-> list) (0) | 2017.09.10 |
| 테스트 (0) | 2016.05.10 |
| 작업중 (0) | 2016.02.28 |
| study1 (0) | 2016.02.16 |
<!--2016 05 10-->
<!DOCTYPE HTML>
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var timerID = null
var timerRunning = false
function stopclock(){
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}
function startclock(){
stopclock()
showtime()
}
function showtime(){
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
// 일반 시계
var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.forms[0].clock.value = timeValue
/*
// 24시간 표시 시계
var timeValue1 = "" + ((hours < 10) ? "0" : "") + hours
timeValue1 += ((minutes < 10) ? ":0" : ":") + minutes
timeValue1 += ((seconds < 10) ? ":0" : ":") + seconds
timeValue1 += (hours >= 12) ? " P.M." : " A.M."
document.forms[0].clock2.value = timeValue1;
*/
timerID = setTimeout("showtime()",1000)
timerRunning = true
}
//-->
</SCRIPT>
<HEAD>
<TITLE> HELLO WORLD </TITLE>
<style>
header {
background-color: #6a5acd;
color:black; /* font */
text-align: center;
padding:55px;
}
nav {
line-height:30px;
background-color:#4169e1;
text-align:center;
padding:5px;
}
section {
background-color:#e6e6fa;
width:350px;
height: 600px;
float:left;
padding:10px;
}
article {
background-color:#e0ffff;
width:350px;
float:left;
padding:10px;
}
footer {
background-color:#afeeee;
color:black;
clear:both;
text-align:center;
padding:35px;
}
div.cities {
background-color: black;
color:white;
margin:20px;
padding:20px;
}
p.italic {
font-style: italic;
}
.round {
border:22px;
margin:20px;
width:230px;
height:180px;
padding:30px;
-moz-border-image:url(frame.png) 30 30 round;/* firefox */
-webkit-border-image:url(frame.png) 30 30 round;/* sagari */
-o-border-image:url(fame.png) 30 30 round;/* Opera */
border-image:url(fame.png) 30 30 round;
}
.back3 {
background-image: url(flower.png), url(back.png)
background-repeat: no-repeat;
width:500px;
height:300px solid #999;
margin: 10px;
}
.box1 {
width: 900px;
height: 30px;
margin:20px 0 0 20px;
background-color: rgba(255.255.255.0.3)
padding:20px;
font-family: "맑은 고딕","돋움";
font-size:16px;
font-weight: bold;
color: rgba(0,0,0,1);
}
.box2 {
width:100px;
height:75px;
background-color: rgba(102,153,255,1);
border: 1px solid #000;
padding:10px;
margin:50px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform:rotate(45deg);
-o-border-transform:rotate(45deg);
-moz-border-transform:rotate(45deg);
}
</style>
</HEAD>
<BODY BGCOLOR="#ffffff" onLoad="startclock()">
<header>
<font size = "40">Math & Computer </font>
</header>
<nav>
<form>
now-time : <input type=text name=clock size=7 >
</form>
</nav>
<section>
<ul>
<font size ="5"><a href = "http://sleep4725.tistory.com/">sleep4725.tistory.com</a></font>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/c%EC%96%B8%EC%96%B4"> C </a></font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/c++">C++ </font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/java">Java </font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/python">python</font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/Ruby">ruby </font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/Erlang">erlang </font></li>
</ul>
</section>
<section>
<ul>
<font size ="5"><a href = "http://sleep4725.tistory.com/">sleep4725.tistory.com</a></font>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/c%EC%96%B8%EC%96%B4"> C </a></font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/c++">C++ </font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/java">Java </font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/python">python</font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/Ruby">ruby </font></li>
<li><font size ="5"><a href = "http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/Erlang">erlang </font></li>
</ul>
</section>
<article>
<img src = "test.png" alt = "ggg" style = "width: 350px;height:600px;">
</article>
<footer>
Copyright Kim Jum Hyeon.com
</footer>
</BODY>
</HTML>
'언어 > html' 카테고리의 다른 글
| jinja + html (0) | 2019.03.24 |
|---|---|
| 스터디 (html-> list) (0) | 2017.09.10 |
| <h1> </h1> (0) | 2016.05.24 |
| 작업중 (0) | 2016.02.28 |
| study1 (0) | 2016.02.16 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KJH</title>
<style>
/*---------------- step 1 ------------------*/
#header {
background-color:white;
color:white;
text-align:center;
padding:5px;
}
#section {
border-radius: 25px;
background-color:gray;
width:360px;
float:left:auto;
padding:5px;
}
#section1 {
border-radius: 25px;
background-color:green;
width:360px;
float:left:auto;
padding:5px;
}
#article {
border-radius: 25px;
background-color:yellow;
width:360px;
float:left:auto;
padding:5px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
/*---------------- step 2 ------------------*/
/* unvisited link */
a:link {
color: black;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
/*---------------- step 3 ------------------*/
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
/*---------------- step 4 ------------------*/
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://sleep4725.tistory.com">-----------<< Alan Turing >>-----------</a></h1>
</div>
<div id="section">
<p>1. Math</p>
<ol Class="d">
<li>[1-1]--< linear Algebra ></li>
<li>[1-2]--< Calculus ></li>
<li>[1-3]--< Elementary Number Theory ></li>
</ol>
<p>2. Computer</p>
<ol Class="c">
<li>-------- [2-1] Language --------</li>
<ol Class="d">
<table>
<tr>
<th><li>C</li></th>
<th><a href="http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/c%EC%96%B8%EC%96%B4">connect</a></th>
</tr>
<tr>
<th><li>C++</li></th>
<th><a href="http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/c++">connect</a></th>
</tr>
<tr>
<th><li>Java</li></th>
<th><a href="http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/java">connect</a></th>
</tr>
<tr>
<th><li>Python</li></th>
<th><a href="http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/python">connect</a></th>
</tr>
<tr>
<th><li>Ruby</li></th>
<th><a href="http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/Ruby">connect</a></th>
</tr>
<tr>
<th><li>Go</li></th>
<th><a href="http://sleep4725.tistory.com/category/%EC%96%B8%EC%96%B4/Go">connect</a></th>
</tr>
<tr>
<th><li>Arduino</li></th>
<th><a href="">connect</a></th>
</tr>
</table>
</ol>
</ol>
</div>
<div id="section1">
<ol Class="c">
<li>Network</li>
<li>Linux</li>
</ol>
</div>
<div id="article">
<p>[ Link ]</p>
<ol Class="c">
<li>-------- --------</li>
<ol Class="d">
<li><a href="http://sleep4725.tistory.com">--< NewYork Times ></a></li>
<li><a href="https://www.codecademy.com">--< Codecademy ></a></li>
<li><a href="https://www.youtube.com/">--< Utubu ></a></li>
<li><a href="https://www.naver.com">--< Naver ></a></li>
</ol>
</ol>
</div>
</body>
</html>
'언어 > html' 카테고리의 다른 글
| jinja + html (0) | 2019.03.24 |
|---|---|
| 스터디 (html-> list) (0) | 2017.09.10 |
| <h1> </h1> (0) | 2016.05.24 |
| 테스트 (0) | 2016.05.10 |
| study1 (0) | 2016.02.16 |
<!DOCTYPE html>
<html>
<body>
<h1> A </h1>
<h2> B </h2>
<h3> C </h3>
<p>My first paragrapy.</p>
<a href = "http://sleep4725.tistory.com">This is a link</a>
</body>
</html>
'언어 > html' 카테고리의 다른 글
| jinja + html (0) | 2019.03.24 |
|---|---|
| 스터디 (html-> list) (0) | 2017.09.10 |
| <h1> </h1> (0) | 2016.05.24 |
| 테스트 (0) | 2016.05.10 |
| 작업중 (0) | 2016.02.28 |
