html 1208
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 문법, 적용방법</title>
<!--
CSS : Cascading Style Sheet
CSS는 HTML과 함께 동작하는 언어
문서의 요소에 크기, 색상, 배경, 두께 등 시각적 스타일 제공
적용방법 :
Inline(태그안에), Internal(<style></style>),External(외부파일에서호출)
CSS문법 : 선택자 {속성 : 값 ; 속성 : 값 ;...}
-->
<style type="text/css">
/* Internal */
h2{ background-color: yellow; border: 1px solid red; }
</style>
<!-- External -->
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
<!-- Inline -->
<h1 style="background-color: yellow; border: 1px solid red;">This is a heading </h1>
<h2>This is a heading </h2>
<h3>This is a heading </h3>
</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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<!--
CSS, jQuery, Ajax => 공통
요소 선택자 = 태그 선택 = 해당태그 호출(같은 태그들은 동시에 같이 적용)
전체 선택자 = 해당 페이지 전체 선택 ( * )
아이디 선택자 (#), 클래스 선택자 (.) , 자식( > ) 자손(공백 )
의사 선택자 (a:hover), 속성 선택자 (h1[title])
-->
<style type="text/css">
/* 전체 선택 */
*{color: blue;}
/* 요소 선택 */
h1{ color: red;}
/* 아이디 */
#myp{ background-color: skyblue ;}
/* 클래스 */
.p1{background-color: pink}
/* 자식 (>) */
div > p { background-color: yellow;}
/* 자손(공백) */
div p { background-color: purple;}
/* 의사 선택 */
a:hover{color: red}
</style>
</head>
<body>
<h1> HTML5 & CSS & JavaScript </h1>
<h2 id="myp"> HTML5 & CSS & JavaScript </h2>
<p class="p1"> HTML5 & CSS & JavaScript </p>
<p class="p1"> HTML5 & CSS & JavaScript </p>
<p class="p1"> HTML5 & CSS & JavaScript </p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p><h3><a href="#"> This is a link </a></h3></p>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경색, 글자색</title>
<style type="text/css">
.a{background-color: aqua;}
.b{background-color: rgb(60%, 40%, 10%)}
.c{background-color: rgb(255,0,0)}
.d{color: orange;}
</style>
</head>
<body>
<h2> Background-color set by using rgb </h2>
<h2 class="a"> Background-color set by using rgb </h2>
<h2 class="b"> Background-color set by using rgb </h2>
<h2 class="c"> Background-color set by using rgb </h2>
<h2 class="d"> Background-color set by using rgb </h2>
</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>
<!-- 글꼴 : font-family, font-weight : 볼드체,
font-size=크기, font-style=이테릭 -->
<style type="text/css">
.a{font-family: serif;}
.b{font-family: sans-serif;}
.c{font-family: Times New Roman, 궁서}
.d{font-family: 궁서}
</style>
</head>
<body>
<h2> Background-color set by using rgb </h2>
<h2 class="a"> Background-color set by using rgb </h2>
<h2 class="b"> Background-color set by using rgb </h2>
<h2 class="c"> Background-color set by using rgb </h2>
<h2 class="d"> Background-color set by using rgb </h2>
</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>텍스트 스타일</title>
<!-- color, text-align, text-decoration, -->
<style type="text/css">
</style>
</head>
<body>
<h1> CSS 텍스트 정렬 예제 </h1>
<p class="a">2017년 12월 7일</p>
<p> java script html programming </p>
<p>html css</p>
<p class="b"> hi </p>
<p class="c"> hello </p>
<p class="d"> world </p>
<p class="e"> java script </p>
<p class="f"> java </p>
<p class="g"> html programming </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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>경계선</title>
<style type="text/css">
/* 경계선 그림자 : box-shadow */
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 style="border: 1px dotted black"> dotted </p>
<p style="border: 1px dashed black"> dashed </p>
<p style="border: 1px solid black"> solid </p>
<p style="border-style:double;border-color: red;"> double </p>
<p style="border: 1px solid black;border-radius: 10px; "> 둥근 모서리 </p>
<div></div>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| Ajax 자바 스크립트 다른 jsp 파일 읽기 (2) | 2018.07.21 |
|---|---|
| Ajax 자바스크립트로 xml , json 파일 읽기 (0) | 2018.07.21 |
| html 1207 (0) | 2017.12.07 |
| html / css (0) | 2017.12.06 |
| html (0) | 2017.12.06 |
댓글