'Web > JavaScript' 카테고리의 다른 글
| 자바스크립트 비교연산, 논리연산 (0) | 2020.03.09 |
|---|---|
| 자바스크립트 산술연산, 대입연산 (0) | 2020.03.09 |
| 자바스트립트 상수 (0) | 2020.03.09 |
| 자바스크립트 지역변수와 전역변수 (0) | 2020.03.09 |
| 자바스크립트 document.write (0) | 2020.03.09 |
분류 전체보기
- 자바스크립트 함수 사용하기, 이미지 img 전환 2020.03.09
- 코드펜 테스트 2020.03.08
- form 꾸미기 2020.03.06
- 테이블 꾸미기 2020.03.06
- nav 태그, 리스트를 메뉴처럼 2020.03.06
- 텍스트에 마우스 올렸을 때 마우스 모양 변경 2020.03.06
- 텍스트 그림자 만들기 2020.03.06
- div 박스에 배경 꾸미기 2020.03.06
자바스크립트 함수 사용하기, 이미지 img 전환
2020. 3. 9. 11:48
코드펜 테스트
2020. 3. 8. 23:59
'낙서장' 카테고리의 다른 글
| 200316 (0) | 2020.03.16 |
|---|---|
| 200313 (0) | 2020.03.13 |
| html파일과 jsp파일에서 사용할 수 있는 언어 (0) | 2020.03.04 |
| 웹서버 메모1 (0) | 2020.03.04 |
| 이클립스 코드 실행 단축키, form 태그 method 속성 (0) | 2020.03.04 |
form 꾸미기
2020. 3. 6. 11:56
|
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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
label {
display: block; /* 새라인에서 시작*/
padding: 5px;
}
label span {
display: inline-block;
width: 90px;
text-align: right;
padding: 10px;
}
input[type=text] {
color: red;
}
input:hover, textarea:hover {
background: aliceblue;
}
input[type=text]:focus, input[type=email]:focus {
font-size: 120%;
}
</style>
</head>
<body>
<h3>CONTACT US</h3><hr>
<form>
<label>
<span>Name</span>
<input type="text" placeholder="Elvis">
</label>
<label>
<span>Email</span>
<input type="email" placeholder="Elvis@graceland.com">
</label>
<label>
<span>Comment</span>
<textarea placeholder="메세지를 남겨주세요"></textarea>
</label>
<label>
<span><input type="submit" value="submit"></span>
</label>
</form>
</body>
</html>
|
cs |
위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.
'Web > Html_Css' 카테고리의 다른 글
| 자바스크립트 없이 onmouse효과주기 (0) | 2020.03.12 |
|---|---|
| onclick으로 페이지 내용 바꾸기 (0) | 2020.03.12 |
| 테이블 꾸미기 (0) | 2020.03.06 |
| nav 태그, 리스트를 메뉴처럼 (0) | 2020.03.06 |
| 텍스트에 마우스 올렸을 때 마우스 모양 변경 (0) | 2020.03.06 |
테이블 꾸미기
2020. 3. 6. 11:42
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table { /* 이중 테두리를 제거 */
border-collapse: collapse;
}
td, th {
text-align: left;
padding: 5px;
height: 15px;
width: 100px;
}
thead, tfoot {
background: darkgray;
color: yellow;
}
tbody tr:nth-child(even){ /* even은 짝수 라인에 적용 */
background: beige;
}
tbody tr:nth-child(odd){ /* odd는 홀수 라인에 적용 */
background: dimgrey;
}
tbody tr:hover {
background: pink;
}
</style>
</head>
<body>
<h3>1학기 성적</h3><hr>
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합</th>
<th>310</th>
<th>249</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>황기태</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>이재문</td>
<td>95</td>
<td>99</td>
</tr>
<tr>
<td>이병은</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>김남윤</td>
<td>50</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.
--
마우스를 올릴시 (김남윤)
'Web > Html_Css' 카테고리의 다른 글
| onclick으로 페이지 내용 바꾸기 (0) | 2020.03.12 |
|---|---|
| form 꾸미기 (0) | 2020.03.06 |
| nav 태그, 리스트를 메뉴처럼 (0) | 2020.03.06 |
| 텍스트에 마우스 올렸을 때 마우스 모양 변경 (0) | 2020.03.06 |
| 텍스트 그림자 만들기 (0) | 2020.03.06 |
nav 태그, 리스트를 메뉴처럼
2020. 3. 6. 11:40
|
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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mbar{background: olive;}
#mbar ul{
margin: 0;
padding: 0;
width: 567px;
}
#mbar ul li {
display: inline-block; /*새줄로 넘어가지 않게*/
list-style-type: none;
padding: 0px 15px;
}
#mbar ul li a{
color: white;
text-decoration: none;
}
#mbar ul li a:hover{
color: violet;
text-decoration: none;
}
</style>
</head>
<body>
<nav id="mbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Cappuccino</a></li>
<li><a href="#">Cafe Latte</a></li>
<li><a href="#">F.A.Q</a></li>
</ul>
</nav>
</body>
</html>
|
cs |
위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.
'Web > Html_Css' 카테고리의 다른 글
| form 꾸미기 (0) | 2020.03.06 |
|---|---|
| 테이블 꾸미기 (0) | 2020.03.06 |
| 텍스트에 마우스 올렸을 때 마우스 모양 변경 (0) | 2020.03.06 |
| 텍스트 그림자 만들기 (0) | 2020.03.06 |
| div 박스에 배경 꾸미기 (0) | 2020.03.06 |
텍스트에 마우스 올렸을 때 마우스 모양 변경
2020. 3. 6. 10:56
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>마우스 커서</h3><hr>
<p style="cursor: crosshair;">마우스커서</p>
<p style="cursor: help;">마우스커서</p>
<p style="cursor: pointer;">마우스커서</p>
<p style="cursor: progress;">마우스커서</p>
<p style="cursor: n-resize;">마우스커서</p>
</body>
</html>
|
cs |
'Web > Html_Css' 카테고리의 다른 글
| 테이블 꾸미기 (0) | 2020.03.06 |
|---|---|
| nav 태그, 리스트를 메뉴처럼 (0) | 2020.03.06 |
| 텍스트 그림자 만들기 (0) | 2020.03.06 |
| div 박스에 배경 꾸미기 (0) | 2020.03.06 |
| border 둥근 모서리 테두리 (0) | 2020.03.06 |
텍스트 그림자 만들기
2020. 3. 6. 10:55
|
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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {font: normal 24px verdana;}
.dropText {text-shadow: 3px 3px;}
.redText {text-shadow: 3px 3px red;}
.blurText {text-shadow: 3px 3px 5px skyblue;}
.glowEffect {text-shadow: 0px 0px 3px red;}
.wordArtEffect {
color: white;
text-shadow: 0px 0px 3px darkblue;
}
.threeDEffect {
color: white;
text-shadow: 2px 2px 4px black;
}
.multiEffect {
color: yellow;
text-shadow: 2px 2px 4px black,
0 0 25px blue,
0 0 5px darkblue;
}
</style>
</head>
<body>
<h3>텍스트 그림자 만들기</h3>
<hr>
<div class="dropText">Drop Shadow</div>
<div class="redText">Color Shadow</div>
<div class="blurText">Blur Shadow</div>
<div class="glowEffect">Glow Effect</div>
<div class="wordArtEffect">WordArt Effect</div>
<div class="threeDEffect">3D Effect</div>
<div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>
|
cs |
위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.
'Web > Html_Css' 카테고리의 다른 글
| nav 태그, 리스트를 메뉴처럼 (0) | 2020.03.06 |
|---|---|
| 텍스트에 마우스 올렸을 때 마우스 모양 변경 (0) | 2020.03.06 |
| div 박스에 배경 꾸미기 (0) | 2020.03.06 |
| border 둥근 모서리 테두리 (0) | 2020.03.06 |
| border 테두리 (0) | 2020.03.06 |
div 박스에 배경 꾸미기
2020. 3. 6. 10:39
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div { background-color: skyblue;
background-size: 100px 100px;
background-image: url("media/spongebob.png");
background-repeat: repeat-y;
background-position: center center;
width: 200px;
height: 200px;
color: blueviolet;
font-size: 16px;
}
</style>
</head>
<body>
<h3>div 박스에 배경 꾸미기</h3>
<div>SpongeBob is an over-optimistic
sponge that annoys other characters. </div>
</body>
</html>
|
cs |
위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.
'Web > Html_Css' 카테고리의 다른 글
| 텍스트에 마우스 올렸을 때 마우스 모양 변경 (0) | 2020.03.06 |
|---|---|
| 텍스트 그림자 만들기 (0) | 2020.03.06 |
| border 둥근 모서리 테두리 (0) | 2020.03.06 |
| border 테두리 (0) | 2020.03.06 |
| 이미지 border, margin (0) | 2020.03.06 |