Programming/VS Code
[VS Code] prompt
Jimnya
2022. 4. 6. 15:22
728x90
반응형
VS Code
- prompt -
KeyPoint
- prompt() : 사용자로부터 입력을 받고자 할 때 사용하는 함수
- document.write(): 현재 문서(document)에 출력(write).
> document(객체): 현재 문서
> write(): 출력하는 함수
1. HTML 기본 틀 만들기
▶ 새 html 파일을 하나 만들고, html:5 입력 또는 !+Tab 으로 html 기본 틀을 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. lang, title, style 설정
▶ <html lang="en"> 부분을 <html lang="kor"> 로 수정
▶ <title>Document</title> 부분을 <title>prompt test</title>로 수정
▶ <style>태그를 이용해 body style 지정
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>prompt test</title>
<style>
body {
font-size: 1.3em;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>▷ font-size: 1.3em; 글자 크기를 1.3em으로 지정
▷ em: M의 높이를 1em으로 해서 글자 크기 조정
▷ text-align: center; 글자 가운데 정렬(left/center/right)
3. body & script
<body>
<h1>안녕하세요</h1>
<script>
var name = prompt("이름을 입력하세요.");
document.write("<b>" + name + "</b>님, 환영합니다.");
</script>
</body>▷ var name = prompt("이름을 입력하세요.");
- var : 변수 선언 시 사용
- 알림창으로 이름을 입력하세요 문구 및 밑에 입력창이 뜨고, 입력한 내용을 name이라는 변수에 저장한다.
▷ document.write("<b>" + name + "</b>님, 환영합니다.");
- document.write() : 현재문서에 ()안의 내용을 출력한다.
- <b></b>: bold체로 출력
모든 것이 랜더링 된 후 script를 실행하기 위해 body 안녕하세요 밑에 작성했다.
4. 실행결과
▶ F5 키 또는 Alt+B를 눌러 실행하면 아래와 같은 입력창이 뜬다.
▶ "홍길동"을 입력하고 확인을 클릭하면 name에 홍길동이 저장되고,
document.write에 의해 "안녕하세요" 밑에 "홍길동님, 환영합니다." 문구가 출력된다.
End.
heisely's 괴발개발 개발일지
728x90
반응형