이번 포스팅에서는 크롬 개발자 도구를 가지고 html / css / javascript 를 작성하고 바로바로 확인하는 방법을 알아보도록 하겠습니다.
많은 분들이 에디터 환경에서 직접 코딩을 하고 계실텐데 HTML과 CSS 를 작성하고 바로바로 확인해 볼 때 에디터를 이용하면 조금 불편한 점이 있습니다. 에디터 중에도 편하게 사용할 수 있는 것이 있지만 더욱 간편하게 크롬 개발자 도구를 이용해서 코딩하는 방법을 소개해 드리겠습니다.
Source > Filesystem 이용하기
먼저 Ctrl+Shift+I (Windows) 나 Cmd+Opt+I (Mac) 를 이용해서 크롬 개발자 도구를 띄워줍니다.
그리고 source > filesystem 을 선택해줍니다.
그리고 + 버튼을 눌러 원하는 위치에 폴더를 하나 생성해줍니다.
저는 my_work 라는 폴더를 만들어주었습니다. 이 폴더는 내 컴퓨터 안에 해당 위치에 생성이 됩니다.
해당 위치에 정상적으로 폴더가 생겼는 지 확인해 봅니다. 잘 생성이 되었네요.
크롬 개발자 도구에서 폴더를 우클릭하고 New File 을 누르고 html 파일을 하나 만들어줍니다.
저는 1.html 이라고 파일을 만들고 html 문서를 다음과 같이 작성했습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box">
<h1>Hello World!</h1>
<p>저의 블로그 입니다~!<p>
<button id="btn" onclick="changeBackground();">배경색 바꾸기</button>
</div>
</body>
</html>
그 다음 오른쪽에서 1.html 파일을 드래그 해서 왼쪽 웹사이트 영역에 놓아줍니다.
그럼 아래와 같이 새 창이 열리면서 작성한 내용이 표시되는 것을 볼 수 있습니다.
폴더 안에 1.css, 1.js 라는 파일도 한번 만들어보겠습니다. 다음과 같이 코드를 작성하였습니다.
<!-- 1.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./1.css">
<script src="./1.js"></script>
</head>
<body>
<div class="box">
<h1>Hello World!</h1>
<p>저의 블로그 입니다~!<p>
<button id="btn" onclick="changeBackground();">배경색 바꾸기</button>
</div>
</body>
</html>
<!-- 1.css -->
.box {
background: aqua;
text-align: center;
}
<!-- 1.js -->
function changeBackground() {
console.log(1);
document.querySelector(".box").style.background = "red";
};
그리고 저장을 한 다음 웹페이지를 새로고침 해보면 다음과 같이 변경된 것을 확인할 수 있습니다.
버튼도 한번 클릭해 봅니다.
버튼을 누르면 아래와 같이 배경색이 바뀌고 콘솔창에 숫자 1 이 찍히는 것을 확인할 수 있습니다.
그리고 내 컴퓨터의 폴더 안에도 파일들이 생성되어 있는 모습을 확인할 수 있습니다.
Source > Snippets 이용하기
이번에는 Snippet 을 이용하는 것을 해 보도록 하겠습니다. 스니펫은 따로 파일을 만드는 것이 아니고 자바스크립트 코드를 등록해두면 그 코드를 웹상에서 편리하게 실행해 줄 수 있도록 해 줍니다. 기본적으로 콘솔창에 자바스크립트 코드를 입력하면 잘 동작을 하는데 이는 페이지를 새로고침하거나 나중에 다시 켰을때 다시 작성을 해 줘야 하지만, snippet에 등록을 해두면 언제든 재활용 할 수 있습니다.
아래오 같이 Snippets > New snippet 을 누르고 이름을 적어준 뒤 코드를 입력해봅니다.
저는 아래와 같은 코드를 적어봤습니다.
코드의 내용은 따로 설명하지 않겠습니다.
console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
적고 저장을 했다면 재생 버튼을 눌러 실행을 해 봅시다. 화면이 전환되고 콘솔창에 내용이 잘 출력되는 것을 확인할 수 있습니다.
이렇게 저장한 스니펫은 파일로 저장되는 것이 아니고 크롬에 저장되는 것이기 때문에 언제든 크롬을 다시 켜도 다시 사용할 수 있습니다.
이상으로 별도의 에디터나 IDE 없이 크롬 개발자 도구를 가지고 코딩을 하는 방법을 살펴보았습니다.
프로젝트를 진행할 때에는 이런 방법보다는 에디터를 이용해 작업하는 것이 좋겠지만 간단한 작업등을 할 때에, 그리고 다른 웹사이트의 코드를 복사해서 이것저것 만져보고 싶을 때 활용하면 편리하게 이용할 수 있을 것입니다.
'프로그래밍 > html' 카테고리의 다른 글
| [html] html5 시맨틱 태그란? 태그별 사용법 (0) | 2020.10.16 |
|---|
