צעדי חסד
Create WebSite 본문
1.HTML을 이용하여 자기소개서 페이지 만들기
2.XSS(앞선 게시물에 등록이 되어있는 내용입니다.)
3.VS code 를 이용하여 주소록 만들기
- 직접 작성한 코드는 git에 올려놓았습니다. 아래 링크를 걸어놓을테니 VS code에서 실행시켜 보시길 바랍니다.
1.HTML을 이용해서 자기소개서를 만들기 위해서 HTML의 코드를 먼저 작성해 봅니다. HTML은 웹 페이지를 구성하기 위한 코드이며 이 코드를 실행시키기 위해서는 (파일명).js(자바스크립트)가 필요합니다. 아래는 순서대로 HTML코드와 main.js 코드입니다.
<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=, initial-scale=1.0">
<title>숙제</title>
</head>
<body>
<h1>나에 대하여</h1>
<img src="그림.jpg" height="604", title="단색 배경 사진", a href "" >
<a href="http://www.instagram.com/kim_ngeunhye/"><img src ="C:\Users\kittu\OneDrive\바탕 화면\웹 시큐어 코딩\그림.jpg"></a>
<p>그림에 커서를 갖다대면 링크로 이동합니다.</p>
<ul>
<li>이름:김은혜</li>
<li>학교:경북대학교 심화컴퓨터학과 1학년</li>
<li>고향:경상북도 포항시</li>
<li>자기소개:안녕하세요! 저는 경북대학교 심화컴퓨터에 재학중인 1학년입니다. 희망 분야는 인공지능이며, 소프트웨어 중에서도 딥러닝 기술에 대해 심도있게 배워보고 싶습니다.</li>
</ul>
</body>
</html>
<main.js코드>
// git push test
var http = require('http');
var fs = require('fs');
var url = require('url');
var app = http.createServer( (request, response) => {
console.log("server start");
var _url = request.url;
var queryData = url.parse(_url, true).query;
var title = queryData.id;
if (_url = '/') {
title = 'Welcome';
}
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ol>
<h2>${title}</h2>
<p>
KERT: KNU Computer Emergency Response Team
</p>
</body>
</html>
`;
response.writeHead(200);
response.end(template);
});
app.listen(3000);
위의 두 개의 코드가 자기소개서를 작성하기 위한 코드입니다. 간략히 주석을 붙여보면, href에는 링크를 걸 수 있으며 img src에는 사진(이미지)가 저장된 파일 링크를 걸어서 해당 이미지를 클릭하면 href에 걸어놓은 링크로 이동할 수 있도록 해 줍니다. <li></li> 사이에는 글을 작성할 수 있습니다. main.js에서 app.listen(3000)은 해당 웹 사이트를 호출시키기 위한 번호이며 구글에 localhost:3000을 치면 작성한 자기소개서가 나오게 됩니다.
localhost:3000에 접속하여 작성한 자기소개서를 보여준다.
localhost:3000에 접속하여 작성한 자기소개서를 보여준다.
3번 주소록 만들기는 다음 게시글에 작성하도록 하겠습니다. 3번은 시스템 고급 설정에서 환경변수를 바꿔주어야 하는 부분이라 내용이 다소 길어질 것 같습니다.
'Project > Create_Front' 카테고리의 다른 글
| Create the Dashboard (0) | 2023.09.10 |
|---|
