웹싸이트만들기

페이지 정보

profile_image
작성자트윈스타 조회 30회 작성일 2020-10-28 11:21:50 댓글 0

본문

[HTML 기초 강좌 2강] 웹 사이트 만들고 인터넷에 공개하기 .COM 도메인, HTTPS 적용까지 완전 무료!

웹 사이트를 공개하는 디플로이의 원리를 살펴본 후
1강에서 배운 태그 지식을 활용해 나만의 웹 사이트를
HTML 무료 템플릿을 이용하여 간편하게 만들어보고
Netlify라는 웹 호스팅 서비스를 이용해 디플로이 하는 강좌입니다.

추가적으로 Github에 저장된 코드로 디플로이하게되면
소스코드를 수정하면 자동으로 반영된다고 합니다!

*HTML 템플릿 이용시 readme나 license 파일을 꼭 확인하여 저작권에 문제가 없는지 유의해주세요!

- Netlify 주소
https://www.netlify.com/

- 완성된 사이트 주소
https://jocoding.netlify.com/
하승민 : 조코딩님 따라서 하고있는데 내용만이 아니라 이미지도 바꾸고 싶으면 어떻게 해야되나요? ㅠㅠ
송하영 : free 탬플릿을 다운받고 index.html을 실행했는데 열린 크롬이 엑박이 뜨네요ㅠㅠ 이건 무슨 문제일까요?
성유찬 : 미디어위키를 호스팅할려고 했는데 안됩니다 mediawiki.org 에서 폴더를 받아 압축을 풀고 xampp에서 localsettings까지 만들었는데 왜 404가 뜰까요...
퍄퍗 : 조코딩님 안녕하세요.
저는 영상처리 프로그램을 만들고 있는 현직 프로그래머입니다.
그런데 웹쪽은 문외한이라 이번에 입문을 하려고 하는데 질문 좀 부탁드리고 싶습니다.

제가 지금 구상한 플랫폼이 있어 직접 만드려고 하는데요. 잘되면 DC 인 사이드처럼 하나의 웹 사이트를 구축하고 싶습니다.

질문1
다른것과는 다르게 알려주신 서버는 무료인 부분이 많다고 하셨는데 무료라고 하면 그만큼 그냥 보완이 약하거나 느리다거나 그런 단점은 없는것인가요??

질문2.
나중에 많은 데이터와 이미지가 사이트에 등록되어 보다 안전한 서버를 사용하고 싶으면 서버에 있는 내용을 아마존이나 카페24 같은 곳으로 그대로 옮기는게 가능한가요???
(가능하다면 비용이 많이 든다던지 그런 부분도 궁금합니다)

질문3.
제대로된 사이트를 만들려고 하면 결국 자바 스크립트로 만드는 방법이 완성도 측면에서 가장 좋을까요??

바쁘신 와중에 수고스럽겠지만 답변 부탁드리겠습니다.

좋은 영상 매번 감사합니다~!!
김현빈 : 웹사이트 저장은 어떻게 하나요? 그리고 이것으로 수입은 되나요?
이찬서 : 6:48 조코딩님 저 여기 화면에서 이런 문구가 안뜨는데 어떻게 해야할까요??
KIM NAYOUNG : 정말 유익하네요 코딩1도 모르는 아줌마가 아이 코딩학원 보내면서 코딩이 뭔가 좀 알아보고자 클릭했는데 html 템플릿 다운받고 있다는요..ㅎㅎ 설명이 쏙쏙 들어오고 티칭능력도 탁월하신것 같아요! 감사합니다~!!
공부하는중 : 안녕하세요 형님~ 비전공자인데 간단한 어플을 한 번 만들어보고 싶어서 공부하고 있어요!
예시로 만들어진 페이지 우측 상단에 메뉴 4개가 있는데 저거 누르면 그 안의 페이지로 들어갈 수 있는 기능을 만들고 싶은데 강의식으로 알려주시면 안될까요~!! 아무리 찾아도 모르겠어서요. ㅜ ㅜ
younghoonyoon : 안녕하세요 저는 계속확장자가 APP으로 나와서 해매고 있습니다. COM으로 확장자 바꾸고 싶은데 잘 안되네요
손스나이퍼 : 영상잘보고 있는데요 뒤에 com이 아닌 app이 붙고 실제로도 랜딩은 잘 되는데요 혹시 작년하고 올해하고 뭔가 좀바뀐걸까요? 또 앞쪽에 https도 숨김처리가 되어있는지 링크값으로는 보이지 않아서요 ㅎㅎ

웹사이트 10초만에 만들기 (10분 걸려도 책임은 안 짐) - HTML / CSS 배우기

열심히 만들던 강의 자료가 날라가 버린 관계로 부득의하게 라이브코딩으로 전환해서 HTML/CSS를 한번 다뤄봤습니다.
저번 영상에서 웹사이트를 만들려면 기본적으로 프론트엔드 (HTML, CSS, JS) 그 이후 데이타를 저장해야되면 선택적으로 백엔드 (Python, Ruby, Java 등) 를 해야 된다고 말씀 드렸었죠?
우선 이 영상으로 프론트엔드의 일부분을 체험해보실 수 있을거에요!

너무 지루하거나 설명이 너무 없어 보기 힘드셨으면 피드백을 댓글로 꼭 남겨주세요!
wu-k hyon :

이걸 따로 따로 하는 이유가 있나요?

10 users included
2 GB of storage
Email support
Help center access
이렇게 하면 안되나요?
박종준 : 제조업 연구/설계직 다니면서 친구 스타트업 웹이랑 앱개발 도와줄겸 퇴근하고 저녁이나 주말에 하고 있는데 제가 다는 못봤지만 ~~만들기 영상들이 직접 보여주시면서 하셔서 매우 좋은거 같아요.
이런 페이지를 이제 찾았다는게 되게 아쉽네요. 속도는 빠르긴 하지만 거의 처음하는 제 기준이므로 멈췄다 따라가면 되는 것이어서 정말 좋은거 같습니다.
유투브에 댓글은 거의 안남기는데 좋은 영상 감사합니다.
정춘식 : 저 진짜 컴맹 아재인데 디테일한 명령어들에 대해서는 모르겠지만 코딩이라는게 어떤 틀을 가지고 해나가는지 알수있었어요. 영상감사합니다. 노트북사서 영상하나하나 보면서 따라해볼게요.
꿈꿈 : 저 왕초보인데 하루에 2번씩 따라하고있으니 꼭 영상 지우시면안되요 !!!!!
TL Empire : 확실히 총알티비 만한 인터넷방송이 없는듯 .. 진짜 이런수위 처음이야 ㅋㅋㅋㅋ 개쩐다
Shishir Kumar sahu : 진짜 총알티비보는데 코피 너무흘려서 빈혈날듯 ㅠㅠ 진짜 대박이다
TE4 TEFOR تي٤ تيفور : 진짜 총알티비 수위는 19금이아니라 29금인듯 .. 대박이다 진짜 ㅠㅠ
Moni Sri : 총알티비가 메시면 다른방송은 호날두다 .. 노력만으로 안되는게있기마련 총알티비는 천재다 천재
Mandy : 총알티비보다 클라스좋은 티비 있나 ? ㅋㅋㅋㅋㅋ 진짜 인방중엔 수위 원탑인듯
Cyber Ninja : 총알티비만 보면 민망함 .. 성인인데도 부끄러울정도 ㅋㅋㅋㅋ

워드프레스 웹사이트 만들기 2020 | 23단계 쉬운 튜토리얼 | 초보자를 위한 워드프레스 강의

아름다운 워드프레스 웹사이트 만드는 방법을 바로 오늘 배워보세요 | 아무것도 몰라도 됩니다!
► 호스팅: https://makewebsites.co.kr/siteground
이 튜토리얼에서는 프로페셔널한 워드프레스 웹사이트를 만들기 위해 필요한 내용을 23단계로 나누어 차근차근 설명해드립니다. 도메인, 웹 호스팅, 워드프레스 설치하기, 설정 변경하기, 올바른 테마와 플러그인 설치하기, 그리고 웹사이트 디자인을 상상하는 그대로 만들어낼 수 있습니다.
이 방법대로 천천히 따라와 주시면, 재미 또한 느낄 수 있을 거에요 :)
그럼, 시작해 볼까요!
영상 미리보기:
00:00:00 - Step 1. 인트로
00:02:58 - Step 2. 도메인과 호스팅(Hosting) 설정 (꼭 다음 링크를 기억해주시면 앞으로의 영상제작에 큰 힘이 됩니다 (추가비용 없음) : https://makewebsites.co.kr/siteground
00:17:11 - Step 3. 워드프레스(WordPress) 설치 및 SSL 인증서 적용
00:23:01 - Step 4. 워드프레스 로그인, 대시보드 배우기
00:25:41 - Step 5. 고유주소와 별칭 설정
00:27:19 - Step 6. 사이트 제목과 태그라인 설정
00:28:36 - Step 7. 새 페이지 만들고 이를 홈페이지로 설정
00:30:10 - Step 8. 적합한 테마 설치하기
00:32:15 - Step 9. 필요한 플러그인 설치하기
00:35:06 - Step 10. Ocean Extra 설정으로 페이지 깔끔하게 정리하기
00:35:06 - Step 11. 페이지 추가 + Ocean Extra 설정
00:40:02 - Step 12. 엘리멘터 페이지 빌더 시작하기
00:41:08 - Step 13. 엘리멘터 이해하기
00:45:41 - Step 14. 텍스트 편집하는 방법
00:52:51 - Step 15. 실행 취소하는 방법
00:55:00 - Step 16. 버튼 편집하는 방법
01:03:09 - Step 17. 이미지 편집하는 방법
01:15:31 - Step 18. 위젯/칼럼/섹션 지우거나 위치 변경하는 방법
01:18:28 - Step 19. 위젯/칼럼/섹션 새로 추가하는 방법
01:27:54 - Step 20. 반응형 페이지 만드는 방법
01:32:15 - Step 21. 다른 페이지에 템플릿 추가하고 편집하기
01:47:02 - Step 22. 로고 추가, 네비게이션 및 헤더 수정하기
01:59:37 - Step 23. SSL 설정
상세 정보:
이 영상은 초보자를 위한 단계별 튜토리얼입니다. 제가 모든 것을 알리 드리면서 OceanWP와 엘리멘터를 활용하여 워드프레스 웹사이트를 만드는 방법을 보여드릴게요.
웹사이트 만들기에 대해 사전 지식이 전혀 없는 초보자 분들도 환영입니다. 이 워드프레스 튜토리얼을 보고 나면, 프로페셔널하고 디자인이 훌륭한 자신만의 홈페이지와 웹사이트를 만들 수 있습니다. 전체적인 단계는 매우 간단해요.
또한 비즈니스 페이지, 포트폴리오, 온라인 쇼핑몰, 도매 웹사이트를 직접 제작할 수 있으며 상상하는 무엇이든 만들어낼 수 있습니다.
웹사이트는 반응형입니다. 즉, 웹사이트를 만들고 난 이후, 스마트폰이나 태블릿 등 다른 기기에서도 어긋남 없이 잘 보인다는 뜻입니다.

이 워드프레스 튜토리얼은 단계별로 이루어져 있어 꼼꼼하게 볼 수 있습니다. 웹사이트 만드는 방법에 대해 이보다 쉽게 배울 수는 없습니다.

먼저 워드프레스가 무엇인지에 대해 설명드리고, 웨호스팅에 대해 알려드리겠습니다. 다음 단계는 워드프레스를 설치하는 방법과 워드프레스 대시보드에 관한 기본적인 설정 내용입니다.
그리고 OceanWP와 엘리멘터를 설치할 것이며, 첫 홈페이지를 만들고 Oceanwp 설정을 변경할 것입니다. 이후, 이 워드프레스 튜토리얼에서 매우 중요한 엘리멘터 페이지 빌더를 활용할 것입니다.
엘리멘터 페이지 빌더에 대해 가장 먼저 보여드릴 것은 엘리멘터 페이지가 어떻게 이루어져 있는지에 관한 것입니다. 이 것을 알고 나면, 워드프레스가 훨씬 쉬워집니다.
그 다음 블록과 전문 웹디자이너에 의해 제작된 페이지 레이아웃에 대해 배울 것입니다. 이 것들을 손쉽게 사용할 수 있으며, 단 몇시간 안에 첫 웹사이트 만들기를 성공할 수 있습니다.

전체 워드프레스 튜토리얼을 시청하셨다면, 워드프레스 웹사이트 만드는 법에 대해 처음부터 끝까지 알게 되셨을 것입니다. 높은 전환율, 반응형 웹페이지, 커스터마이징된 디자인의 웹사이트를 만들 수 있습니다. 또한 튜토리얼에는 추가적으로 초보자들에게 기술적으로 어려울 수 있는 SSL 인증에 관한 내용들도 포함되어 있습니다!

만약 많은 돈을 절약하고 스스로 자신만의 웹사이트를 만들고 싶다면, 이 워드프레스 튜토리얼을 보시고 제가 알려드리는 전 과정을 따라와 주시기 바랍니다.
재밌는 시간 되세요! :)
Make Websites KR : 질문 있으신가요? 댓글로 남겨주시면 도와드릴게요.
호스팅 ► : https://makewebsites.co.kr/siteground
타임스탬프:
00:00:00 - Step 1. 인트로
00:02:58 - Step 2. 도메인과 호스팅(Hosting) 설정 (꼭 다음 링크를 기억해주시면 앞으로의 영상제작에 큰 힘이 됩니다 (추가비용 없음) : https://makewebsites.co.kr/siteground
00:17:11 - Step 3. 워드프레스(WordPress) 설치 및 SSL 인증서 적용
00:23:01 - Step 4. 워드프레스 로그인, 대시보드 배우기
00:25:41 - Step 5. 고유주소와 별칭 설정
00:27:19 - Step 6. 사이트 제목과 태그라인 설정
00:28:36 - Step 7. 새 페이지 만들고 이를 홈페이지로 설정
00:30:10 - Step 8. 적합한 테마 설치하기
00:32:15 - Step 9. 필요한 플러그인 설치하기
00:35:06 - Step 10. Ocean Extra 설정으로 페이지 깔끔하게 정리하기
00:35:06 - Step 11. 페이지 추가 + Ocean Extra 설정
00:40:02 - Step 12. 엘리멘터 페이지 빌더 시작하기
00:41:08 - Step 13. 엘리멘터 이해하기
00:45:41 - Step 14. 텍스트 편집하는 방법
00:52:51 - Step 15. 실행 취소하는 방법
00:55:00 - Step 16. 버튼 편집하는 방법
01:03:09 - Step 17. 이미지 편집하는 방법
01:15:31 - Step 18. 위젯/칼럼/섹션 지우거나 위치 변경하는 방법
01:18:28 - Step 19. 위젯/칼럼/섹션 새로 추가하는 방법
01:27:54 - Step 20. 반응형 페이지 만드는 방법
01:32:15 - Step 21. 다른 페이지에 템플릿 추가하고 편집하기
01:47:02 - Step 22. 로고 추가, 네비게이션 및 헤더 수정하기
01:59:37 - Step 23. SSL 설정
경이신비 : 왜 2편 없나요
DoctorX17 1 : 야... 나는 정말 유튜브 동영상에 대해 언급하지 않지만,당신과 함께 할 필요성을 느꼈다. 당신은 간단하지만,너무 정보를 유지합니다. 당신이 단계별로 갔다 사랑,하지만 좋은 템포에 속도를 유지. 그냥 모든 주위에 좋은 일!
Seung-mok Lee : 홈페이지를 만들고 관리하다가.. 갑자기 대쉬보드 화면이 안뜰수도 있나요?;;;;
전원길 : 안녕하세요 이번 질문은 랜딩페이지와 상세펭이지와 같은건가요 아님 서로 다른가요 다르면 워드프레스에서 무료로 사용할 수 있는 간단한 랜딩페이지도 있나요
Stonks only go up : 난 그냥 두 번째 시간에 대한 귀하의 튜토리얼을보고 완료.....이제 내 웹 사이트를 구축 할 수 있습니다. 당신은 훌륭한 교사. 당신은 따라 너무 쉽게 모든 단계를 통해 갔다. 고마워요.
김은채 : 선생님 안녕하세요. 하나 더 문의드립니다 ! 메뉴를 구성할 때 메인메뉴 - 서브메뉴 - 서브메뉴 형식으로 구성해서 메인메뉴에도 페이지 구성을 하였는데, 피씨에서는 무리없이 들어가지나 모바일이나 태블릿에서는 클릭 자체가 되지 않습니다. 혹시 해결방안이 있을지 문의드립니다. 번거롭게 해드려 죄송합니다 :)
김은채 : 안녕하세요! 강의 너무 잘 보고 있습니다 :)
워드프레스를 사용해 페이지에 SNS 피드(계정연동X)를 끌고올 수 있는 방법이 있다고 들었는데, 혹시 어떻게 작업이 가능한지 알 수 있을까요 ?
김동은 : 도메인도 환불이 가능한가요?
이재향 : 워드프레스로 웹페이지 만들 때 다른 팀원들이랑 공유해서 수정하려면 어떻게해야하나요 ㅠㅠ?
도와주세요 ㅠㅠ

... 

#웹싸이트만들기

댓글목록

등록된 댓글이 없습니다.

전체 1,988건 1 페이지
게시물 검색
Copyright © www.travelrm.com. All rights reserved.  Contact : help@oxmail.xyz