월페이퍼 엔진 프로젝트 만들기
우선은 편한 디렉토리에서 프로젝트 폴더를 하나 생성한 후에
HTML 파일을 하나 만들어준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>위의 HTML 기본 양식을 html 파일에 작성해준다.
짧은 코드의 수정은 메모장을 사용해도 상관은 없지만
기능을 이것저것 추가하다보면 코드가 금방 길어지기 때문에
가급적이면 Visual Studio Code를 설치해서 사용하거나
자바 개발자라면 인텔리제이를 사용해도 무관하다.
기존 배경화면에 기능 추가하기
위의 방식처럼 백지에서 시작하는 방법도 있지만
창작마당에서 맘에 드는 배경화면에
기능만 조금 추가하는 방법도 있다.
우선 창작마당에서 [필터 - 유형 - 웹사이트]만 체크 한 후에
마음에 드는 웹 사이트 배경화면을 다운 받는다.
다운 받은 배경화면을 우클릭으로 [탐색기에서 열기]를 클릭하여
해당 폴더에서 html 파일을 편집하면 된다.
CodePen을 통해 꾸미기
프론트 개발자들이 HTML/CSS/JS 소스코드들을 공유하는 사이트다.
이쁘거나 화려하거나 신기한 디자인들이 많으니
이 사이트에 있는 코드들을 가져다 사용하기만 하면 된다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
위의 사이트에서 자신이 추가하고자 하는 기능을 검색한 후
맘에 드는 기능들을 즐겨찾기나 로그인 후에 북마크에 추가해둔다.
Music Widget
...
codepen.io
이번 글에서는 해당 코드를 추가해보겠다.
추가하고자 하는 코드에 들어가 오른쪽 하단의 Export를 누른 후에
Export.zip을 눌러서 코드들을 다운 받아준다.
압축을 푼 폴더의 dist 폴더에 들어가면 위와 같은 파일들이 있다.(캡처를 잘못해서 dist가 맞다)
index.html 파일은 디자인과 동작을 뺀 뼈대라고 생각하면 되고
script.js 파일은 동작
style.css는 디자인이라고 생각하면 된다.
이제 처음에 만들어두었던 html 파일이나
창작마당에서 받아둔 html 파일을 수정하면 된다.
우선은 html 파일을 열어보자
글에서는 창작마당에서 받아온 파일에 기능을 추가해보겠다.
이거저것 코드가 많아서 무슨 말인지 이해가 안되겠지만
기존 코드들을 알 필요는 없다.
우선은 기존 코드의 어느 부분에 추가해야하는지를 알아야하기 때문에
기존 코드를 브라우저에서 실행시켜본다.
엣지 브라우저 기준 우클릭 후 검사를 눌러서 페이지의 소스코드를 볼 수 있다.
페이지의 소스 코드에 마우스를 올리면 해당 코드가
어느 부분에 대한 영역인지 알 수 있다.
이렇게 코드마다의 영역을 파악하면
자신이 추가하고자 하는 기능을 어디에 끼워 넣어야할지 알 수 있다.
이제 마찬가지로 코드펜에서 다운 받은 코드를 열고
html 파일의 코드에서 복사할 부분을 선택한다.
<body> 태그 안의 내용들을 모두 복사하여
기존 html 코드에 추가하고자 하던 위치에 붙여넣는다.
마지막으로 js 파일과 css 파일도 옮겨주면 되는데
이때 파일의 위치를 잘 확인하고 옮겨줘야한다.
<head>
<meta charset="UTF-8">
<title>CodePen - Music Widget</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
</head>위의 양식처럼 head 태그 안에 css와 js를 추가할 수 있다.
이렇게 필요한 코드들을 추가하면서 만들 수도 있지만
대부분 서로 JS나 CSS 요소들이 겹치고 충돌하는 문제들이 생길건데
이 때는 각자 검색이나 챗지피티를 통해서 해결해나가야한다.
챗지피티에 코드를 알려주고 해결방안을 물어보는 것이 가장 편하긴 하다.
마치며
설명을 두루뭉술하게 하기도 했고
프론트 엔드 기술을 모르는 사람이라면 당연히 처음엔 어려울거지만
구글링이나 챗지피티의 도움을 받으며 한 번만 기능을 추가해보기만 하면
갈수록 기능을 추가하고 꾸미는 것이 쉬워질 것이다.
음악플레이어+달력.zip
예준님이 공유한 파일을 확인하세요.
mybox.naver.com
위의 링크는 현재 기존의 비주얼라이저 배경화면에
구글 캘린더와 플레이어를 추가해서 사용하고 있는 배경화면이다.
혹시라도 사용할 사람이 있다면 사용하길 바란다.
압축을 푼 후에 [월페이퍼 엔진 - 배경화면 열기 - 오프라인 배경화면 열기(애니메이션)]을 클릭한 후
index.html 파일을 선택하면 된다.
마지막으로 다들 개발자스러운(?) 배경화면 만들기에
성공하길 바라며 글을 마치겠다.
'Etc' 카테고리의 다른 글
| 내가 보려 정리한 개발 관련 북마크 (1) | 2024.03.25 |
|---|---|
| 개발 레퍼런스에 자주 나오는 영단어/문법 정리노트 (0) | 2023.08.11 |
| 배경화면을 개발자답게 꾸며보기! - 개요 (0) | 2023.06.20 |
