{"id":169,"date":"2024-02-18T15:50:44","date_gmt":"2024-02-18T15:50:44","guid":{"rendered":"http:\/\/www.freelifemakers.org\/wordpress\/?p=169"},"modified":"2024-03-10T00:31:45","modified_gmt":"2024-03-10T00:31:45","slug":"website240219","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/02\/18\/website240219\/","title":{"rendered":"1 \ud398\uc774\uc9c0 \uc6f9\uc0ac\uc774\ud2b8 \uc81c\uc791(1Page website creation) &#8211; 1"},"content":{"rendered":"\n<p><strong>1)\uc6f9\uc0ac\uc774\ud2b8 \ud15c\ud50c\ub9bf \uc0ac\uc6a9\ud558\uae30<\/strong><\/p>\n\n\n\n<p>\uc9c0\uae08 \uc0c8\ub85c \ub9cc\ub4e4\uace0 \uc788\ub294 \uc6f9\uc0ac\uc774\ud2b8 \uc8fc\uc18c \uc785\ub2c8\ub2e4.<br>This is the address of the new website I am currently creating.<br><a rel=\"noreferrer noopener\" href=\"http:\/\/freelifemakers.com\/onePage\/\" target=\"_blank\">http:\/\/freelifemakers.com\/onePage\/<\/a><\/p>\n\n\n\n<p>\uc800 \uac19\uc740 \uacbd\uc6b0 \uae30\uc874\uc758 \uc6f9\uc0ac\uc774\ud2b8\uac00 \uc788\uc9c0\ub9cc \uc74c\uc545\uc744 \uc18c\uac1c \ud558\uae30 \uc704\ud55c \uc6f9\uc0ac\uc774\ud2b8\uac00 \ud544\uc694\ud558\uace0 \ub2e4\ub978 \ubcf5\uc7a1\ud55c \uae30\ub2a5\uc774 \ud544\uc694 \uc5c6\uc5b4\uc11c<br>\ubb34\ub8cc \ud15c\ud50c\ub9bf \uc0ac\uc6a9\ud574\uc11c \uc6f9\uc0ac\uc774\ud2b8\ub97c \uc0c8\ub85c \ub9cc\ub4e4\uae30\ub85c \ud588\uc2b5\ub2c8\ub2e4.<br>In my case, I have an existing website, but I need a website to introduce music and I don&#8217;t need any other complicated functions. so I decided to create a new website using a free template.<br><br>\uc81c\uac00 \uc0ac\uc6a9\ud558\ub294 \ud15c\ud50c\ub9bf \uc8fc\uc18c \uc544\ub798 \ub9c1\ud06c\ub97c \ud655\uc778 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br> \uc544\ub798 \uc6f9\uc0ac\uc774\ud2b8 \ub9c1\ud06c \uac00\ubcf4\uc2dc\uba74 \ubb34\ub8cc\ub85c \uc0ac\uc6a9\uac00\ub2a5\ud55c html\ud15c\ud50c\ub9bf \ub9ce\uc774 \uc788\uc2b5\ub2c8\ub2e4. <br>Live Demo\ub97c  \ud655\uc778\ud574\ubcf4\uc2dc\uace0 Download\ubc84\ud2bc \ub204\ub974\uc2dc\uba74 \uc18c\uc2a4\ucf54\ub4dc \ub2e4\uc6b4 \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>You can check the link below for the template address I use.<br>If you go to the website link below, you will find many HTML templates that can be used for free.<br>Check out the Live Demo and click the Download button to download the source code.<br><br>\ud15c\ud50c\ub9bf \uc8fc\uc18c(Templates) : <br><a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapmade.com\/free-html-bootstrap-template-lonely\/\" target=\"_blank\">https:\/\/bootstrapmade.com\/free-html-bootstrap-template-lonely\/<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/bootstrapmade.com\/\" target=\"_blank\">https:\/\/bootstrapmade.com\/<\/a><\/p>\n\n\n\n<p>\uc544\ub798\ub294 \uc81c\uac00 visual studio\ucf54\ub4dc\ub85c \uc5f4\uc5b4\ubcf8 \ubaa8\uc2b5\uc778\ub370 \uc5ec\uae30 html\ucf54\ub4dc\uc758 \uba54\ub274 \ubd80\ubd84 \uc785\ub2c8\ub2e4. \uc774\ub807\uac8c \ud544\uc694\ud55c \ud14d\uc2a4\ud2b8 \ubd80\ubd84\uc774\ub098 \uc774\ubbf8\uc9c0 \uc218\uc815\ud574\uc11c \uc6f9\ud638\uc2a4\ud305 \uc11c\ubc84\uc5d0 \uc5c5\ub85c\ub4dc \ud558\uc154\uc11c \uc0ac\uc6a9 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br>Below is what I opened with visual studio code, and here is the menu part of the html code. You can use it by modifying the text or image as needed and uploading it to the web hosting server.<\/p>\n\n\n\n<p>html,\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8,css\ub97c \uc880 \uacf5\ubd80\ud558\uc2dc\uba74 \uc5b4\ub835\uc9c0 \uc54a\uac8c \uc218\uc815\ud574\uc11c \uc0ac\uc6a9\ud558\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>If you study HTML, JavaScript, and CSS, you can easily modify and use it.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"677\" height=\"263\" data-id=\"173\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/02\/20240219_005311.png\" alt=\"\" class=\"wp-image-173\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/02\/20240219_005311.png 677w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/02\/20240219_005311-300x117.png 300w\" sizes=\"auto, (max-width: 677px) 100vw, 677px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>2)\uc720\ud22c\ube0c \ud50c\ub808\uc774\uc5b4 Youtube Player<br>\uc81c\uac00 \ub9cc\ub4e0 \uc74c\uc545\uc744 \uc6f9\uc5d0\uc11c \ud50c\ub808\uc774 \ud558\ub824\uba74 \uc5ec\ub7ec\uac00\uc9c0 \ubc29\ubc95\uc774 \uc788\uc9c0\ub9cc \uc720\ud22c\ube0c\uac00 \uac00\uc7a5 \uc88b\uc744 \uac83 \uac19\uc544\uc11c \uc774\uac78\ub85c \uac04\ub2e8\ud55c \ud50c\ub808\uc774\uc5b4 \ub9cc\ub4e4\uae30\ub85c \ud588\uc2b5\ub2c8\ub2e4. <br>There are many ways to play the music I made on the web, but I thought YouTube would be the best, so I decided to create a simple player with this.<br><br>\ud50c\ub808\uc774\uc5b4\uc758 \uae30\ub2a5\uc740 \uc568\ubc94\uc758 \ub9c1\ud06c\ub97c \ud074\ub9ad\ud588\uc744\ub54c iframe\uc744 \ud1b5\ud574\uc11c YouTubePlayer.php\ud30c\uc77c\uc744 \ubd88\ub7ec \uc624\uace0  \ub9c1\ud06c\ub85c get\ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud574\uc11c \ubcc0\uc218\ub97c \uc804\ub2ec\ud558\uba74  \uc774 \uac12\uc744 \ud1b5\ud574\uc11c \uc720\ud22c\ube0c \uc601\uc0c1\uc744 \ubd88\ub7ec\uc624\uace0  \ud50c\ub808\uc774\uc5b4\uc758 \uc7ac\uc0dd\uc744 \ucee8\ud2b8\ub864 \ud569\ub2c8\ub2e4.<br>The player&#8217;s function is to load the YouTubePlayer.php file through an iframe when clicking on the album link, and when a variable is passed to the link using the get method, the YouTube video is loaded through this value and the playback of the player is controlled.<br><br>\ud50c\ub808\uc774\uc5b4 \ucee8\ud2b8\ub864\uc740 html,\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8,php,\uc720\ud22c\ube0c \ud50c\ub808\uc774\uc5b4 API\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. <br>Player control uses HTML, JavaScript, PHP, and YouTube player API.<br><br>Youtube Player API[ENG] :<a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=en\" target=\"_blank\">https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=en<\/a><br>\uc720\ud22c\ube0c \ud50c\ub808\uc774\uc5b4  API\ud55c\uad6d\uc5b4 : <a href=\"https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=ko\">https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=ko<\/a><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1)\uc6f9\uc0ac\uc774\ud2b8 \ud15c\ud50c\ub9bf \uc0ac\uc6a9\ud558\uae30 \uc9c0\uae08 \uc0c8\ub85c \ub9cc\ub4e4\uace0 \uc788\ub294 \uc6f9\uc0ac\uc774\ud2b8 \uc8fc\uc18c \uc785\ub2c8\ub2e4.This is the address of the new website I am currently creating.http:\/\/freelifemakers.com\/onePage\/ \uc800 \uac19\uc740 \uacbd\uc6b0 \uae30\uc874\uc758 \uc6f9\uc0ac\uc774\ud2b8\uac00 \uc788\uc9c0\ub9cc \uc74c\uc545\uc744 \uc18c\uac1c \ud558\uae30 \uc704\ud55c \uc6f9\uc0ac\uc774\ud2b8\uac00 \ud544\uc694\ud558\uace0 \ub2e4\ub978 \ubcf5\uc7a1\ud55c \uae30\ub2a5\uc774 \ud544\uc694 \uc5c6\uc5b4\uc11c\ubb34\ub8cc \ud15c\ud50c\ub9bf \uc0ac\uc6a9\ud574\uc11c \uc6f9\uc0ac\uc774\ud2b8\ub97c \uc0c8\ub85c \ub9cc\ub4e4\uae30\ub85c \ud588\uc2b5\ub2c8\ub2e4.In my case, I have an existing website, but I need a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-169","post","type-post","status-publish","format-standard","hentry","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":6,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":310,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/169\/revisions\/310"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}