728x90
반응형
VS Code
- 나이 계산 프로그램 -
KeyPoint
- <link rel="stylesheet" href="..."> : css 파일 링크
- onclick = "함수명()" : 클릭 시 함수 호출
- document.querySelector("#xxx").innerHTML = xxxxxx
> document : 현재 웹 브라우저의 페이지
> querySelector("#xxx"): id=xxx인 웹 요소
> innerHTML : 대입한 값(등호 뒤 내용, xxxxxx)으로 html문서 내용 대체
0. Path Intellisense 설치
Extension > path 검색 > Path Intellisense 설치
1. HTML 기본 틀 만들기 & lang="ko" 설정
▶ 새 html 파일(age.html)을 하나 만들고, html:5 입력 또는 !+Tab 으로 html 기본 틀 작성 + lang="ko"로 수정
(title은 본인 취향에 맞게 수정)
<!DOCTYPE html>
<html lang="ko">
<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>age</title>
</head>
<body>
</body>
</html>
2. CSS 폴더 및 파일 생성
▶ 탐색기 > 새폴더(css) 하위에 age.css로 파일 생성 및 age.html에 link 태그로 연결
<!DOCTYPE html>
<html lang="ko">
<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>age</title>
<link rel="stylesheet" href="css/age.css"> <!-- 이 부분 -->
</head>
3. body 구성 및 css 설정
▶ age.html
<body>
<button class="btn" onclick="calc()">나이 계산</button>
<div id="result" class="show">(결과값 표시)</div>
</body>onclick="calc()" : 클릭 시 calc() 함수 호출
▶ age.css
body {
text-align: center;
}
.btn {
margin-top: 50px;
font-weight: 400;
color: #fff;
background-color: #007bff;
text-align: center;
vertical-align: center;
border: 1px solid blue;
padding: 5px;
}
.btn:hover {
color: #fff;
background-color: aquamarine;
border-color: aquamarine;
}
.show {
margin-top: 50px;
padding: 20px 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}body {} : <body>태그 css 속성 지정
- text-align: center; 글자 중앙 정렬
.xxx {} : class="xxx"인 요소의 css 속성 지정
- margin-top:50px; 윗쪽 마진을 50px만큼 설정
- font-weight: 400; 글자 무게(두께)를 400만큼 설정
- color: #fff; 글자 색을 흰색(#fff)으로 설정
- background-color: #007bff; 배경색을 #007bff로 설정
- vertical-align: center; table-cell box에서 수직정렬
- border: 1px solid blue; 테두리 설정(1px 두께로 파란색 solid 타입으로 설정)
- padding: 5px; 상하좌우 box 안쪽으로 5px 두께로 패딩
.xxx:hover {} : class="xxx"인 요소 위에 마우스 오버 했을 때 css 속성 지정
4. script 작성
▶ body에 작성한 요소 밑에 <script>태그를 사용하여 작성
<body>
<!-- onclick="calc()": 버튼을 클릭하면 calc() 호출 -->
<button class="btn" onclick="calc()">나이 계산</button>
<div id="result" class="show">(결과값 표시)</div>
<!-- 여기부터 작성 -->
<script>
function calc() {
// 변수 선언 및 초기화
var currentYear = 2022;
var birthYear = prompt("태어난 연도를 입력하세요.", "YYYY");
var age = 0;
// 나이 계산 코드
age = currentYear - birthYear + 1;
// 결과값 반영
document.querySelector("#result").innerHTML = "당신의 나이는 <b>" + age + "</b>세 입니다.";
}
</script>
</body>function calc() {}
- 함수 calc() 선언과 구현
var currentYear = 2022;
- 올해 연도를 변수 currentYear에 저장
var birthYear = prompt("태어난 연도를 입력하세요.", "YYYY");
- 사용자로부터 입력받은 값을 변수 birthYear에 저장
- prompt 기능으로 태어난 연도를 입력하세요 출력
- 미리보기 용으로 YYYY 입력
var age = 0;
- 변수 age를 0으로 초기화
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "</b>세 입니다.";
- id=result인 요소의 내용을 "당신의 나이는 age세 입니다"로 대체
> document: 현재 웹 브라우저의 페이지
> querySelector("#result"): id=result인 웹 요소(여기서는 div태그)
> innerHTML: 대입한 값(등호 뒤 내용)으로 html문서 내용 대체
5. 실행 결과
▶ F5키 또는 Alt+B 키를 눌러 실행한 화면
▶ 나이 계산을 누른 후 화면
▶ 1995를 입력 후 확인 클릭
정상적으로 나이 계산이 되는 것을 확인하고 종료.
End.
heisely's 괴발개발 개발일지
728x90
반응형
'Programming > VS Code' 카테고리의 다른 글
| [VS Code] prompt (0) | 2022.04.06 |
|---|---|
| [VS Code] HTML, JavaScript 환경 설정 (0) | 2022.04.06 |
