336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 테두리 종류를 보여드릴려고 합니다.
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 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv1").style.borderBottom = "1px solid #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
document.getElementById("testDiv2").style.borderBottom = "1px dotted #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
document.getElementById("testDiv3").style.borderBottom = "1px dashed #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
document.getElementById("testDiv4").style.borderBottom = "1px double #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv1' id='testDiv1' style='width:100px'>text</div>
<div name='testDiv2' id='testDiv2' style='width:100px'>text</div>
<div name='testDiv3' id='testDiv3' style='width:100px'>text</div>
<div name='testDiv4' id='testDiv4' style='width:100px'>text</div>
</body>
</html>
|
cs |
1,2,3,4번쨰를 각각
버튼을 클릭시에 선, 점선, 굵은 점선, 선2개를 각각 표시해줍니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 아래쪽테두리 사용법을 쓸차례예요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.borderBottom = "1px solid #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv' style='width:100px'>text</div>
</body>
</html>
|
cs |
실행시작화면입니다.
버튼을 클릭하면 밑쪽에 테두리가 생겨요.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 위쪽 테두리를 넣을려고 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.borderTop = "1px solid #000000"; //위쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv' style='width:100px'>text</div>
</body>
</html>
|
cs |
이화면은 실행화면입니다. 버튼을 클릭하면 밑에 그림처럼 출력을 해줍니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 오른쪽 테두리를 추가할려고합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.borderRight = "1px solid #000000"; //오른쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
버튼을 클릭하기 전 그림입니다.
버튼을 클릭하면 오른쪽에 테두리를 생성해줍니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 왼쪽 테두리예요. 각각의 면마다 테두리를 할꺼예요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.borderLeft = "1px solid #000000"; //왼쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
첫번째 그림은 나오는 화면입니다.
두번째 그림은 결과화면으로 왼쪽테두리에 나옵니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요 이번엔 JAVASCRIPT에서 테두리 넣는것을 알려드릴꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.border = "1px solid #000000"; //1픽셀로 점선방식으로 검정색으로 넣습니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
이 화면에서 클릭하면
이렇게 대상에서 테두리가 나옵니다.