[ 완성본 ]
[ 예제 설명 ]
1. 정사각형 박스를 만든다.
2. 박스 위에 Button을 추가하여 'Click it' 이라 쓴다.
2. 'Click it' Button을 누를시, 박스 안에 상단에 'Center' 라는 글씨가 박스 상단 중앙에 나온다.
[ 코딩 ]
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 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> JavaScript Button </title> <style type="text/css"> #click-button{ width: 70px; height: 50px; position: relative; top: -50px; left: 60px; } #BOX{ border: thin solid black; margin: auto; width: 200px; height: 200px; position: relative; top: 100px } #TEXT{ margin-top: -50px; font-weight: bold; font-size: 25px; line-height: -1000px; text-align: center; } </style> </head> <body> <div id=BOX> <input type="button" value="Click it" onclick="button()" id="click-button"> <div id="TEXT"> </div> </div> <script type="text/javascript"> function button(){ document.getElementById("TEXT").innerHTML="Center" } </script> </body> </html> | cs |
'예제' 카테고리의 다른 글
| [ HTML, CSS ] Box 생성, Text 삽입 (0) | 2018.02.19 |
|---|
