저번 게시글에 이어서 이번에는 기초적인 html, css, javascript를 활용해서 직접 사이트를 만들어보고자 한다.
개발은 Visual Studio Code(VS code)로 이루어질 것이다. VS code 설치 방법은 조만간 글을 남기겠다.
1.
VS code 처음 화면이다. 왼쪽 위의 File->Open Folder를 누른 후 새 폴더를 만들고 그 폴더를 선택한다.
그 후 새 폴더에 마우스를 갖다대면 New file이 있는데, 그걸 눌러서 lotto.html, style.css, random.js를 추가해준다.
이제 만들 준비가 모두 끝났다.
lotto.html 파일에서 아래와 같이 !를 치고 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>이게 기본적인 html 세팅이다.
<!DOCTYPE html>: 이 선언은 웹 문서가 HTML5 버전을 사용하고 있다는 것을 웹 브라우저에 알려준다.
<html lang="en">: 이 태그는 HTML 문서의 시작을 나타내고, lang="en" 속성은 페이지의 주요 언어가 영어라는 것을 나타낸다.
<head>: 이 태그는 웹 페이지의 메타데이터를 담고 있는 부분이다. 메타데이터는 페이지의 제목, 문자 인코딩, CSS 스타일 시트 연결, JavaScript 파일 연결 등을 포함한다.
<meta charset="UTF-8">: 이 태그는 웹 페이지의 문자 인코딩이 UTF-8임을 나타낸다. UTF-8은 모든 유니코드 문자를 지원하는 인코딩 방식이다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: 이 태그는 Internet Explorer에서 페이지가 최신 모드로 렌더링되도록 지시한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 이 태그는 반응형 웹 디자인을 위한 것이다. 이는 페이지의 뷰포트 너비를 기기의 스크린 너비에 맞추고, 초기 확대 레벨을 1.0(100%)으로 설정하는 것을 나타낸다.
<title>Document</title>: 이 태그는 웹 페이지의 제목을 설정한다. 이 제목은 브라우저의 탭에 표시되며, 검색 엔진 결과 페이지(SERP)에서 페이지를 설명하는데 사용된다.
<body>: 이 태그는 웹 페이지의 주요 콘텐츠를 담는 부분이다. 여기에는 텍스트, 이미지, 동영상, 게임, 스크립트 등 사용자가 보거나 상호작용할 수 있는 모든 콘텐츠가 포함된다.
</html>: 이 태그는 HTML 문서의 끝을 나타낸다.
우리는 한국어를 주로 사용할 거니까 <html lang="en">을 <html lang="kr">로 수정해주고 제목을 "로또 번호 추첨기" 로 하기 위해서 <title>Document</title>를 <title>로또 번호 추첨기!</title>로 바꿔준다. 그 후 로또 번호를 출력할 함수와 버튼을 넣어 아래와 같이 만들면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>로또 번호 추첨기</title>
<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>
<button onclick="lottoNum()">로또 번호 생성!</button>
<div id="result"></div>
<script>
function lottoNum() {
var lottoNumbers = [];
while(lottoNumbers.length < 6){
var num = Math.floor(Math.random() * 45) + 1;//1~45까지의 수 중 하나를 랜덤으로 뽑음
if(lottoNumbers.indexOf(num) === -1) lottoNumbers.push(num);//만약 num이 배열에 없는 숫자라면 넣는다
}
lottoNumbers.sort(function(a, b) {
return a - b;
});
document.getElementById('result').innerText = lottoNumbers.join(', ');
}
</script>
</body>
</html>사용되는 명령어들은 [JavaScript] JS random 함수, ==, === 차이!, sort (tistory.com)에 자세히 서술해놓았다.
<button onclick="lottoNum()">로또 번호 생성!</button>: 이 버튼은 클릭될 때 lottoNum()이라는 JavaScript 함수를 실행한다.
<div id="result"></div>: 이 <div>는 로또 번호 생성 결과를 출력할 공간이다. 이 <div>의 id는 'result'로 설정되어 있는데, result값을 출력한다는 의미이다.
JavaScript 함수 lottoNum()은 로또 번호를 생성하고, 그 결과를 <div id="result">에 출력하는 역할을 한다.
var lottoNumbers = [];: 이 라인은 빈 배열을 만들어 lottoNumbers라는 변수에 할당한다. 이 배열에는 생성된 로또 번호가 저장된다.
while(lottoNumbers.length < 6): 이 라인은 lottoNumbers 배열의 길이가 6보다 작을 동안, 즉 배열에 6개의 로또 번호가 저장될 때까지 반복하는 while 루프를 생성한다.
var num = Math.floor(Math.random() * 45) + 1;: 이 라인은 1부터 45까지의 무작위 정수를 생성하여 num이라는 변수에 할당한다.
if(lottoNumbers.indexOf(num) === -1) lottoNumbers.push(num);: 이 라인은 만약 num이 lottoNumbers 배열에 아직 없다면, 그 값을 배열에 추가한다. 이로써 로또 번호가 중복되지 않게 한다.
lottoNumbers.sort(function(a, b) { return a - b; });: 이 라인은 생성된 로또 번호들을 오름차순으로 정렬한다.
마지막으로 document.getElementById('result').innerText = lottoNumbers.join(', ');는 lottoNumbers 배열의 모든 요소를 콤마와 공백으로 이어붙인 문자열을 <div id="result">의 텍스트로 설정한다. 이로써 생성된 로또 번호가 웹 페이지에 출력된다.
이후 파일을 실행하면(Run and Debug를 누르면 된다. 나는 Chrome을 통해 실행하였다.)
이렇게 웹페이지가 잘 만들어진 것을 알 수 있다. 버튼을 누를때마다 새 번호가 출력되는 것도 볼 수 있다.
다음 시간에는 html에 css와 javascript를 연결해볼 것이다.
'웹' 카테고리의 다른 글
| [웹] AWS(Amazon Web Services) 서버, 웹사이트 만들기! - 1 (0) | 2023.05.31 |
|---|---|
| [웹] AWS(Amazon Web Services) 서버, 웹사이트 만들기! - 2 (SSH) (0) | 2023.05.31 |
| [웹] 로또 번호 뽑아주는 사이트 만들기! - 2 (0) | 2023.05.30 |
| [웹] 웹 개발을 위한 HTML, CSS, JavaScript 기초 뽀개기! (0) | 2023.05.27 |
