포스트 난이도: HOO_Junior
# Visual Studio Code
이미 웹사이트를 만들어 보려는 브로들에게 있어서 Visual studio code (VScode)는 참 익숙한 존재일 수 있다. 그럼에도 모르는 분들을 위해서 간단히 설명하자면 마이크로소프트에서 개발한 통합 코드 편집 프로그램이다. IDE의 특성을 가지고 있으면서도 다양한 환경에서 개발할 수 있도록 개발자에 의해 커스터마이징이 가능하다는 게 가장 큰 장점이다.
한마디로 그냥 개발자가 원하는 방향대로 이것저것 코딩을 할 수 있는 프로그램이라고 보면 된다. 그래서 이번 포스트에서 살펴볼 웹사이트 만들고 데모로 실행시키는 방법도 VScode에서 해보려고 한다.
# HTML 코드 만들기
자, 우선 간단하게 html과 css 파일을 통해서 VScode에서 바로 실행시켜볼 수 있는 페이지를 만들어보자. 실제로 도메인을 가지고 실행시키는 것이 아니라 해당 코드가 제대로 돌아가는 지를 확인하는 목적으로 실행시켜 볼 수 있다. 우선 각 파일을 생성하는 데 있어서 [File]에서 [New Text File]을 통해 새로운 파일을 만들어줄 수 있다. 이때 확장자명을 html로 해줘야 html 형식에 맞는 파일이 생성된다. 이후에 코드를 넣어주면 되는데 아래의 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">
<link rel-"stylesheet" href="style.css">
<title>Main PAGE</title>
</head>
<body>
<div class="container">
<h1>Main Page </h1>
<p>Test_main_page</p>
<a href="./about"><h2>Click here to go to detail lab page!</h2></a>
</div>
</body>
</html>
html 파일만 있어도 실행이 되지만 참고하는 목적에서 css 코드도 아래에서 확인이 가능하다. 해당 코드는 다른 html 파일에 대한 코드도 포함되어 있다보니 필요한 경우 수정해서 사용하면 된다.
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #4a90e2, #007aff);
color: #333;
line-height: 1.6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Container Styling */
.container, .login-container {
width: 80%;
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Header Styling */
h1 {
color: #007BFF;
margin-bottom: 20px;
}
/* Paragraph Styling */
p {
margin-bottom: 20px;
}
/* Link Styling */
a {
text-decoration: none;
color: #007BFF;
}
a:hover {
text-decoration: underline;
}
/* H2 Styling */
h2 {
color: #0056b3;
margin-top: 20px;
}
/* Input Group Styling */
.input-group {
margin-bottom: 15px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #555;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Remember Me Checkbox Styling */
.remember-me-checkbox {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.remember-me-checkbox input {
margin-right: 10px;
}
/* Button Styling */
button {
background-color: #007aff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #005bb5;
}
/* Register Link Styling */
.register-link {
margin-top: 20px;
}
코드를 작성하고 [Run]을 시켜보면 아래와 같이 페이지가 출력되는걸 확인할 수 있다.
# Run without debugging
만일 위의 예제코드로 실행을 시킨다면 디버깅을 하거나 하지 않거나 상관없이 출력이 된다. 여기서 말하는 "Run without debugging"이란 코드 에러를 확인하지 않고 코드를 실행시킨다는 걸 의미한다. 한마디로 코드가 에러가 있어서 출력되지 않더라도 뭐가 문제인지 확인할 수 없다. 디버깅을 할 경우에는 문제가 되는 라인의 코드를 잡아주면서 문제를 해결해 나갈 수 있도록 도와준다.
그럼에도 without debugging 기능이 중요하고 알아둬야하는 이유 중 하나는 exception인 경우로 실행시켜야 하는 일이 종종 있기 때문이다. 이게 무슨 말이냐면 코드에 에러가 있는 걸 알면서도 실행시켜봐야 하거나 아니면 코드 자체에 에러가 있는 채로 실행시켜도 문제가 없을 경우 등 디버깅을 하지 않고 실행시켜야 하는 일이 있을 때 해당 기능을 사용하곤 한다. 특히 데모 버전이나 테스트 단계에서 프로그램 실행 결과를 살펴보기 위해서 디버깅을 제외하고 런을 돌려보기도 하니, 두 실행의 의미를 이해하고 있으면 좋다.
'Computer Science > Web' 카테고리의 다른 글
| [Web] .css에서 이미지 사이즈 조정이 안될때, Inline Style Testing (3) | 2024.11.13 |
|---|---|
| [Web] 로그인 페이지 (validateLogin) (0) | 2024.08.20 |
| [Web] 배경 이미지 크기 조정하기, background-size (0) | 2023.07.21 |
댓글