html 1207
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시멘틱 태그</title>
</head>
<body>
<!-- 시맨틱 태그 : 의미있는 태그 (분석을 쉽게 하기 위해서 각 영역을 구분하는 태그) -->
<!--해당 페이지의 전체 머리글-->
<header>
<h1>여기는 헤더</h1>
<!--메뉴 삽입 가능-->
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</header>
<!-- 별도로 메뉴 만들기 가능 -->
<!-- <nav>
</nav> -->
<!--본문-->
<section>
<article>
<!--해당 컨텐츠에 대한 제목-->
<h1>프로그래밍 준비하기</h1>
<ul>
<li>java</li>
<li>html</li>
<li>css</li>
<li>python</li>
</ul>
</article>
<article>
<header>
<h1>프로그래밍 준비하기</h1>
</header>
<p>c,c++,c#</p>
</article>
</section>
<footer>
<p>Copyright 2017 fors</p>
</footer>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시멘틱 태그</title>
<style type="text/css">
/*요소 선택자*/
header{
height:280px;
margin-top:0px;
background-image:url('img/bg.png');
background-position:left top;
background-repeat:no-repeat;
}
/* 클래스 선택자 (.) */
/*id 선택자 (#) */
.navi{
background-color:rgba(100,100,100,0.3);
margin-top:-15px;
width:970px;
height:60px;
}
/* 자식 선택자(공백) */
.navi ul{
list-style:none;
height:40px;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li{
display:inline;
float:left;
font-size:30px;
}
.navi ul li a{
padding:0px 5px 5px 35px;
display:block;
width:150px;
color:#FFFFFF;
text-decoration:none;
}
.navi a:hover,a:focus{
text-shadow:0px 5px 5px #ff0000;
color:#ffcc00;
}
</style>
</head>
<body>
<header>
<h1>여기는 헤더</h1>
<!--메뉴 삽입 가능-->
<nav class="navi">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</header>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>본문 section / article</title>
<style type="text/css">
img{width:700px;height:230px}
</style>
</head>
<body>
<header>
<h1>서울</h1>
</header>
<section>
<h1>날씨</h1>
<article>
<h2>일기예보</h2>
<p>7일은 전국이 흐린 상황에서 일부 지역에 눈이 내리겠다.</p>
<p>기상청은 이날 전국이 대체로 흐리고 서울과 경기도, 강원도는 새벽까지, 충청도와 전북, 경상내륙은 오후까지 눈이나 비가 오겠다고 내다봤다.</p>
<p>예상 적설량은 1~10cm, 예상 강수량은 5~10mm 내외 등이다.</p>
<div>
<img src="img/banner2.png">
</div>
<div>
<img src="img/banner3.jpg">
</div>
</article>
<article>
<h3>일기예보</h3>
<p>7일은 전국이 흐린 상황에서 일부 지역에 눈이 내리겠다.</p>
<p>기상청은 이날 전국이 대체로 흐리고 서울과 경기도, 강원도는 새벽까지, 충청도와 전북, 경상내륙은 오후까지 눈이나 비가 오겠다고 내다봤다.</p>
<p>예상 적설량은 1~10cm, 예상 강수량은 5~10mm 내외 등이다.</p>
</article>
</section>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 본문내용 제외 다른 내용 aside </title>
<style type="text/css">
/* 아이디(#) 클래스(.) 자식,자손(공백) 요소(해당 태그)*/
.img1{width:800px;height:230px}
.img2{width:400px;height:200px}
</style>
</head>
<body>
<header>
<h1>서울</h1>
</header>
<section>
<h1>날씨</h1>
<article>
<h2>일기예보</h2>
<p>7일은 전국이 흐린 상황에서 일부 지역에 눈이 내리겠다.</p>
<p>기상청은 이날 전국이 대체로 흐리고 서울과 경기도, 강원도는 새벽까지, 충청도와 전북, 경상내륙은 오후까지 눈이나 비가 오겠다고 내다봤다.</p>
<p>예상 적설량은 1~10cm, 예상 강수량은 5~10mm 내외 등이다.</p>
<div>
<img class="img1" src="img/banner2.png">
</div>
<div>
<img class="img1" src="img/banner3.jpg">
</div>
</article>
<article>
<h3>일기예보</h3>
<p>7일은 전국이 흐린 상황에서 일부 지역에 눈이 내리겠다.</p>
<p>기상청은 이날 전국이 대체로 흐리고 서울과 경기도, 강원도는 새벽까지, 충청도와 전북, 경상내륙은 오후까지 눈이나 비가 오겠다고 내다봤다.</p>
<p>예상 적설량은 1~10cm, 예상 강수량은 5~10mm 내외 등이다.</p>
</article>
</section>
<aside>
<h3> * 알려드립니다. *</h3>
<p>우산 챙기세요</p>
<img class="img2" src="img/1.jpg">
<img class="img2" src="img/2.jpg">
<img class="img2" src="img/3.jpg">
</aside>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 꼬리말 : footer </title>
<style type="text/css">
/* 아이디(#) 클래스(.) 자식,자손(공백) 요소(해당 태그)*/
.img1{width:800px;height:230px}
.img2{width:400px;height:200px}
.img3{width:200px;height:500px}
</style>
</head>
<body>
<header>
<h1>서울</h1>
</header>
<section>
<h1>날씨</h1>
<article>
<h2>일기예보</h2>
<p>7일은 전국이 흐린 상황에서 일부 지역에 눈이 내리겠다.</p>
<p>기상청은 이날 전국이 대체로 흐리고 서울과 경기도, 강원도는 새벽까지, 충청도와 전북, 경상내륙은 오후까지 눈이나 비가 오겠다고 내다봤다.</p>
<p>예상 적설량은 1~10cm, 예상 강수량은 5~10mm 내외 등이다.</p>
<div>
<img class="img1" src="img/banner2.png">
</div>
<div>
<img class="img3" src="img/primian.png">
</div>
</article>
<article>
<h3>일기예보</h3>
<p>7일은 전국이 흐린 상황에서 일부 지역에 눈이 내리겠다.</p>
<p>기상청은 이날 전국이 대체로 흐리고 서울과 경기도, 강원도는 새벽까지, 충청도와 전북, 경상내륙은 오후까지 눈이나 비가 오겠다고 내다봤다.</p>
<p>예상 적설량은 1~10cm, 예상 강수량은 5~10mm 내외 등이다.</p>
</article>
</section>
<aside>
<h3> * 알려드립니다. *</h3>
<p>우산 챙기세요</p>
<img class="img2" src="img/1.jpg">
<img class="img2" src="img/2.jpg">
<img class="img2" src="img/umbrella.png">
</aside>
<footer>
<address>
<p>서울특별시 서초구</p>
<p>서울특별시 용산구</p>
<p>Copyright. All rights reserved</p>
</address>
</footer>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>초복이네</title>
<style type="text/css">
body { font-family: "맑은고딕","고딕","굴림"}
/* 전체크기와 가운데 정렬 */
.wrapper{width: 800px; margin: 0 auto}
header{
width: 100%;
height: 150px;
background-color: #f64075;
background-image: url(img/nav2.png);
background-repeat: no-repeat;
background-position: right center;
}
nav ul {
list-style: none;
float: left;
width: 70%;
margin-top: 50px;
}
nav ul li {
display: inline;
float: left;
font-weight: bold;
font-size: 20px;
margin: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section{float:left;width:580px;padding:5px;}
section article{
float:left;
width:250px;
height:250px;
margin:5px;
padding:10px;
border:1px solid #cccccc;
}
.art1:hover{
font-size:20px;
background-color:skyblue;
border:1px solid green;
}
aside{
float:right;
width:200px;
height:auto;
margin-top:50px;
padding:5px;
text-align:center;
}
footer{
background-color:#333333;
padding:5px;
color:white;
text-align:center;
clear:both;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어 살기</a></li>
</ul>
</nav>
</header>
<section>
<article class="art1">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에 계속 쓸수 있는 집으로
구입하세요</p>
</article>
<article class="art1">
<h3>강아지 먹이</h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와 있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배 정도
빠르답니다. 따라서 성장속도에 맞는 사료를 급여하셔야 합니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="art1">
<h3>밥그릇, 물병</h3>
<p>
밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다. 물병은 대롱이 달린 것으로 선택하세요.<br /> 밥그릇에
물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있게 하면 좋습니다.
</p>
</article>
<article class="art1">
<h3>이름표, 목줄</h3>
<p>
강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. <br /> 그리고 방울이 달린
목걸이를 하고자 하실 때는 신중하셔야 합니다. <br /> 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는
좋지 않은 영향을 끼칠 수 있기 때문입니다.
</p>
</article>
</section>
<aside>
<img src="img/1.png" width="180px" height="135px">
<img src="img/2.png" width="180px" height="135px">
<img src="img/3.png" width="180px" height="135px">
</aside>
<footer>
<p> Copyright 2017 Hanbitedu </p>
</footer>
</div>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<!--
<video>
<source src="">
</video>
video 태그 속성
autoplay : 자동실행
poster : 비디오실행 실패시 그림으로 대처
controls : 컨트롤러
loop : 반복실행
width, height: 크기
-->
<video controls autoplay width="800px" height="600px">
<source src="mulit/video.mp4" type="video/mp4">
</video>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- -->
<audio controls autoplay>
<source src="mulit/All.mp3" type="audio/mpeg">
</audio>
<br/>
<hr/>
<!--유튜브 사용할 경우 iframe-->
<!--오토 플레이 autoplay=1 컨트롤러 controls=0-->
<iframe width="834" height="469" src="https://www.youtube.com/embed/X_ugj772Lmo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
canvas{border: 1px solid black;}
</style>
<script type="text/javascript">
onload = function() {
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
// 선그리기
ctx.beginPath(); // 초기화
ctx.moveTo(10,10); // 시작점
ctx.lineTo(110,10); // 끝점
ctx.lineWidth = 2 ; // 선두께
ctx.lineCap="round"; // 선 끝모양
ctx.strokeStyle="red"; // 선색
ctx.stroke(); // 선그리기
ctx.beginPath(); // 초기화
ctx.moveTo(110,10); // 시작점
ctx.lineTo(110,110); // 끝점
ctx.lineWidth = 2 ; // 선두께
ctx.lineCap="round"; // 선 끝모양
ctx.strokeStyle="red"; // 선색
ctx.stroke(); // 선그리기
ctx.beginPath(); // 초기화
ctx.moveTo(10,10); // 시작점
ctx.lineTo(10,110); // 끝점
ctx.lineWidth = 2 ; // 선두께
ctx.lineCap="round"; // 선 끝모양
ctx.strokeStyle="red"; // 선색
ctx.stroke(); // 선그리기
ctx.beginPath(); // 초기화
ctx.moveTo(10,110); // 시작점
ctx.lineTo(110,110); // 끝점
ctx.lineWidth = 2 ; // 선두께
ctx.lineCap="round"; // 선 끝모양
ctx.strokeStyle="red"; // 선색
ctx.stroke(); // 선그리기
ctx.beginPath(); // 초기화
ctx.moveTo(10,10); // 시작점
ctx.lineTo(110,110); // 끝점
ctx.lineWidth = 2 ; // 선두께
ctx.lineCap="round"; // 선 끝모양
ctx.strokeStyle="green"; // 선색
ctx.stroke(); // 선그리기
ctx.beginPath(); // 초기화
ctx.moveTo(10,110); // 시작점
ctx.lineTo(110,10); // 끝점
ctx.lineWidth = 2 ; // 선두께
ctx.lineCap="round"; // 선 끝모양
ctx.strokeStyle="green"; // 선색
ctx.stroke(); // 선그리기
//사각형 (strokeRect,fillRect) => startx , starty , 넓이 , 높이
ctx.beginPath();//초기화
ctx.strokeStyle="pink";
ctx.strokeRect(120,10,100,100);
ctx.beginPath();//초기화
ctx.fillStyle="skyblue";
ctx.fillRect(230,10,100,100);
//원 arc(x,y,반지름,시작 각도,끝 각도)
//각도 : Math.PI*2(정 원) , Math.PI*1(반 원)
ctx.beginPath();//초기화
ctx.strokeStyle="green";
ctx.arc(390,60,50,0,Math.PI*2.0);
ctx.stroke();
ctx.beginPath();//초기화
ctx.fillStyle="green";
ctx.arc(500,60,50,0,Math.PI*2.0);
ctx.fill();
ctx.stroke();
//글자
ctx.beginPath();
ctx.fillStyle="blue";
ctx.font="50px Arial";
ctx.fillText("HelloWorld",10,220);
//글자
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.font="50px 궁서체";
ctx.strokeText("HelloWorld",310,220);
//이미지
var img = new Image();
img.src = "img/1.jpg";
img.onload=function(){
ctx.drawImage(img,10,300);
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="640" height="480"></canvas>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG ; 태그기반의 도형그리기</title>
<style type="text/css">
svg{width: 800px; height: 600px; border: 1px solid black;}
</style>
</head>
<body>
<svg>
<!-- <line> 선그리기: x1,y1, x2, y2 style="선색" stroke-width: 선두께 -->
<line x1=10 y1 =10 x2=110 y2=10 style="stroke:red; stroke-width:5" />
<line x1=110 y1 =10 x2=110 y2=110 style="stroke:red; stroke-width:5" />
<line x1=10 y1 =10 x2=10 y2=110 style="stroke:red; stroke-width:5" />
<line x1=10 y1 =110 x2=110 y2=110 style="stroke:red; stroke-width:5" />
<line x1=10 y1 =10 x2=110 y2=110 style="stroke:blue; stroke-width:5" />
<line x1=10 y1 =110 x2=110 y2=10 style="stroke:blue; stroke-width:5" />
<!-- rect x y width heigth fill stroke --a>
<rect x=120 y=10 width=100 height=100 fill="#ff00ff" stroke="red" />
<rect x=230 y=10 width=100 height=100 stroke="red" />
<rect x=340 y=10 width=100 height=100 fill="#ff00ff" />
<!-- 정원 circle cx cy r fill stroke -->
<circle cx=60 cy=180 r =50 fill="#ffff00" stroke="red" />
<!--타원 ellipse cx xy rx ry fill stroke -->
<ellipse cx="230" cy=180 rx=50 ry=100 fill="#00ffff" stroke="red" />
<ellipse cx="230" cy=180 rx=100 ry=50 fill="#00ffff" stroke="blue" />
<ellipse cx="230" cy=180 rx=50 ry=50 fill="#ffffff" />
<!-- 다각형 : 시작위치와 끝위치 같아야 한다. -->
<polyline points = "500,300 600,200 700,300 400,100 80,500 500,300" fill="#ff00ff" stroke="black" />
<!-- 문자 -->
<text x=10 y =300 font-size=70 fill=red stroke=green font-famil="궁서체">HelloWorld1</text>
<text x=10 y =500 font-size=70 stroke=green font-famil="궁서체">HelloWorld2</text>
</svg>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| html 예제 코드 / html 공부 / 점선 , 실선 , 배경 , 표 , 블록레벨 , 인라인 (0) | 2017.12.07 |
|---|---|
| html1208 (0) | 2017.12.07 |
| html / css (0) | 2017.12.06 |
| html (0) | 2017.12.06 |
| html (0) | 2017.12.06 |
댓글