html 예제 코드 / html 공부 / 점선 , 실선 , 배경 , 표 , 블록레벨 , 인라인
안녕하세요 이번 글은 html 예제 코드입니다. 실행화면을 함께 글에 담았습니다.
공부에 도움이 되셨으면 좋겠습니다.
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>경계선</title>
<style type="text/css">
/* 경계선 그림자 : box-shadow */
.a {
padding: 5px;
}
.b {
padding: 15px 5px;
margin: 10px;
}
.c{ width:400px; text-align: center;}
/* 블록레벨 자체 가운데 정렬은 margin에서 왼쪽,오른쪽를 auto로 지정 */
.d{ width:400px; text-align: center; margin: 0px auto;}
div{
width: 100px;
height: 50px;
background-color: green;
box-shadow: 10px 10px 10px #333333;
}
</style>
</head>
<body>
<p style="border: 1px none black"> none </p>
<p class="a" style="border: 1px dotted black"> dotted </p>
<p class="b" style="border: 1px dashed black"> dashed </p>
<p class="c" style="border: 1px solid black"> solid </p>
<p class="d" style="border-style:double;border-color: red;"> double </p>
<p style="border: 1px solid black;border-radius: 10px; "> 둥근 모서리 </p>
<div></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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경설정하기</title>
<style type="text/css">
/* background-color: 색
background-image:url() 그림
background-repeat: 그림반복여부 repeat-y,repeat-x,no-repeat
background-position: 시작위치
*/
body{background-color: gray;
background-image: url("img/1.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
</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>테이블스타일</title>
<style type="text/css">
/*
border ; 테두리
border-collapse : 이웃한 셀 경계선 합치기
border-spacing : 셀 사이의 거리
*/
table{ width: 50% ;}
/* table, th, td { border: 1px solid black;
border-collapse: collapse;} */
table, th, td { border: 1px solid black;
border-spacing: 20px;}
caption{caption-side: bottom; font-size: 30px;}
</style>
</head>
<body>
<table>
<caption> 주 소 록 </caption>
<thead>
<tr>
<th>번호</th><th>이름</th><th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>김수현</td><td>서울시</td>
</tr>
<tr>
<td>2</td><td>이종훈</td><td>서울시</td>
</tr>
<tr>
<td>3</td><td>최혜진</td><td>서울시</td>
</tr>
<tr>
<td>4</td><td>박지훈</td><td>서울시</td>
</tr>
</tbody>
</table>
</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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>블록레벨을 인라인 레벨로 </title>
<style type="text/css">
.menubar li {
display: inline;
background-color: yellow;
border: 1px solid red;
padding: 5px 20px;
}
a{text-decoration: none;}
</style>
</head>
<body>
<ul class="menubar">
<li><a href="#">홈으로</a></li>
<li><a href="#">회사소개</a></li>
<li><a href="#">제품소개</a></li>
<li><a href="#">질문과 답변</a></li>
<li><a href="#">연락처</a></li>
</ul>
</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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 위치 정하기 : static</title>
<!-- 정적위치 : 페이지의 정상적인 흐름에 따라 요소의 위치가 결정 -->
<style type="text/css">
#one{
background-color: cyan;
width: 200px;
height: 50px;
}
/* 일반적으로 static은 하지않것과 같다 */
#two{
position: static;
background-color: yellow;
width: 200px;
height: 50px;
}
#three{
background-color: lightgreen;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<p id="one">block #1</p>
<div id="two">block #2<br />
position:static;
</div>
<p id="three">block #3</p>
</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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 위치 정하기 : absolute</title>
<!-- 절대위치 : 전체페이지 기준으로 배치 -->
<style type="text/css">
#one{
background-color: cyan;
width: 200px;
height: 50px;
}
/* 일반적으로 static은 하지않것과 같다 */
#two{
position: absolute;
top: 30px;
left: 50px;
background-color: yellow;
width: 200px;
height: 50px;
}
#three{
position: absolute;
top: 50px;
left: 80px;
background-color: lightgreen;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<p id="one">block #1</p>
<div id="two">block #2<br />
position:static;
</div>
<p id="three">block #3</p>
</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>요소 위치 정하기 : fixed</title>
<!-- 고정 위치 : 브라우저 윈도우에 상대적으로 요소의 위치를 잡는 것 -->
<style type="text/css">
#one{
background-color: cyan;
width: 200px;
height: 50px;
}
#two{
position: fixed;
top : 150px;
right: 450px;
background-color: yellow;
width: 200px;
height: 50px;
}
#three{
background-color: lightgreen;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<p id="one">block #1</p>
<div id="two">block #2<br />
position:static;
</div>
<p id="three">block #3</p>
</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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
div{width: 100px; height: 100px; border: 1px solid black;}
#box1{
position:absolute;
top:0px; left:0px;
background-color: red;
z-index: 3;
}
#box2{
position:absolute;
top:30px; left:30px;
background-color: green;
z-index: 2;
}
#box3{
position:absolute;
top:60px; left:60px;
background-color: blue;
z-index: 4;
}
</style>
</head>
<body>
<div id="box1">box #1</div>
<div id="box2">box #2</div>
<div id="box3">box #3</div>
</body>
</html> |
cs |
jswoo030@gmail.com 으로 메일을 보내시면 빠른 답변을 받으실 수 있습니다.
'HTML│CSS│Java Script' 카테고리의 다른 글
| Ajax 자바 스크립트 다른 jsp 파일 읽기 (2) | 2018.07.21 |
|---|---|
| Ajax 자바스크립트로 xml , json 파일 읽기 (0) | 2018.07.21 |
| html1208 (0) | 2017.12.07 |
| html 1207 (0) | 2017.12.07 |
| html / css (0) | 2017.12.06 |
댓글