몇 주전부터 웹퍼블리셔 과정을 공부하고자 학원을 다니기 시작했다.
이 시국에 학원이 웬 말인가 싶겠지만 대면/비대면으로 분류하고 방역이 철저히 시행된 학원이고, 마스크도 계속 끼고 있고 뭐 아무튼 아무 탈 없게 하기 위해 서로가 노력을 하고 있는 상황 속에 시작을 했다.
몇 주 좀 지났지만 그동안 배웠던것들 그 기록들, 그리고 다음 주부터는 전원 비대면으로 들어가는데 수업이 끝나고 나면 또 여기 올릴 계획.
이 블로그는 일종의 나의 공부 기록 블로그.
* 소스 자료 제공 페이지
한빛미디어 홈페이지
https://www.hanbit.co.kr/src/10158
www.hanbit.co.kr
* 저자님의 동영상강의도 있음
윤인성
IT 전문서 저자 + 역자[영어+일본어] 윤인성입니다. 책의 인터넷 강의를 올리는 계정입니다. 뭐 딱히 본론 이외의 말을 잘 못 하는 히키코모리라서 'ㅅ' .... 딱히 적을 말이 없군요 'ㅅ' ....
www.youtube.com
저자는 말합니다. HTML5 공부를 하려면 자바스크립트도 알아야 하는 것이고, 그것을 모르면 HTML5도 모르는 거다.
그렇다. 난 그동안 코딩을 조금조금은 했었지만 모르는 거나 다름없는 것이지.
그래서 이 기회에 제대로 배우고자 하는 것.
1. Visual Studio Code 설치
나는 업무 하면서 가볍고 간단하고 쓰기 편해서 에디트 플러스를 쓰고 있다.
장점은 메모장처럼 가볍게 쓸 수 있는 것. 단점은 드림위버나 이번에 설치할 얘처럼 자동으로 코드가 안 나온다는 점 정도?
수업시간 때 이 프로그램으로 배우므로 집 컴에도 얘를 설치하겠다.
파일은 구글에서 저 프로그램을 찾으면 된다.
code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
다음번에 또 찾기 하면 귀찮으니 바로 링크 걸기
짠!
설치 끝
한글 언어로도 바꿀 수 있지만 글로벌하게 영어로 쓰겠다.
자 그리고 수업시간 때 무료로 만든 웹페이지가 있는데 그것을 저 녀석으로 불러오겠다.
그러려면 해야 되는 작업이 있는데
오른쪽에 있는 메뉴 중 제일 밑에 네모네모로 된 녀석을 누른다.
얘는 Extensions인데 확장 프로그램 같은 것들을 설치할 수 있게 해 준다.
그리고 sftp라고 검색
install로 설치
일단 설치할 것은 끝
2. 작업환경 만들기
그리고 나면 이제 작업할 폴더를 만들어줘야 한다.
나는 바탕화면에 만들겠다.
폴더를 만들었으면 상단 메뉴의 File에서 Open Folder로 들어가서 아까 내가 만든 폴더를 지정해준다.
그리고 내가 만든 폴더로 다시 들어가서 보면
요런 녀석이 생긴 것을 알 수 있다.
이제 그러면 HTML5를 작성할 수 있는 환경은 만들어졌다.
다시 비쥬얼스튜디오코드(이제부턴 줄여서 비코로 부르겠다.)
비코의 왼쪽 탐색기(explorer) 부분에서 F1을 누르고 sftp:config로 들어갑니다.
보면 host부분에 localhost라고 나와있죠.
그래서 이 컴에서 로컬로 사용할 수 있는 환경이 구축된 거 뭐 그런 뜻
웹 서버가 아니란 뜻입니다.
그럼 새 파일을 한번 만들어서 간단하게 화면만 보이면
옆 빈 화면에서 마우스 우클릭 후 New File 그리고 파일명은 반드시 xxx.html로 해야 합니다.
html 안 붙이면 안돼요~~
html이라고 쓰면 저렇게 세 가지가 나오는데 참 똑똑한 녀석이네요.
중간에 있는 html:5를 선택
지가 알아서 코딩이 쭈욱
기본적인 내용이 나옵니다.
head부분에 meta name=viewport... 이 부분 덕분에 모바일이든 태블릿이든 다른 환경에서 봐도 페이지가 자동으로 탁탁 맞춰지는 것입니다.
이것이 바로 HTML5의 장점 아니겠습니꽈~!!
뭐
그리고 실제로 내용이 보일 body 사이에 안녕 2021년을 넣어볼게요
이왕이면 영어로
이렇게 나옵니다.
간단하죠?
<body>
HELLO 2021
</body>
간단합니다. 간단하게 했으니까.
그럼 수업시간에 했었던 무료 웹서버를 이용해서 만든 그 녀석을 땡겨와볼게요.
3. 우비에서 무료로 웹서버호스팅 만들기
우비 - 무료 웹 호스팅, 웹 호스팅, 도메인 최저가
woobi.co.kr
이 사이트를 들어가셔서 회원가입을 하고 계정을 만들면 1일 이후 생성됩니다.
근데 회원가입이나 로그인 시 이런 화면이 뜰 수 있습니다.
어떻게 만든 사이트인지는 모르겠지만 저렇게 뜰 때는 '고급'들어가서 안전하지 않게 들어가면 됩니다.
안전하지 않아
가입 후 무료 웹호스팅 신청하고 하루가 지난 뒤 마이페이지 들어가 보시면
이렇게 되어 있는 것을 보실 수 있습니다.
무료 무료 무료
돈 주고 안 하셔도 됩니다.
물론 무료라서 한계는 있지만 난 공부용이니까요.
4. 웹호스팅 작업 환경 만들기 sftp이용
우비로 만든 웹호스팅은 인터넷 환경이기 때문에 이젠 localhost가 아닙니다. 그래서 아까 본 sftp를 이제 손대야 합니다.
어떻게?
이렇게!!!
name은 원하는 이름으로 하시고 나머지는 해당 사이트를 참고하셔서 - 우비면 저렇게 호스트를 쓰셔야 합니다. - 작성해주시면 됩니다.
protocol은 ftp이면 port는 21로 해주셔야 하고, sftp이면 22로 해줘야 합니다.
username은 아이디, password는 비밀번호인데, password 부분은 원래 없기 때문에 작성해주셔야 합니다.
그리고 저장 후 옆 빈 공간에서 마우스 우클릭 후
Sync Local -> Remote을 해주시면 로컬이랑 웹이랑 연동하는 것이고, 반대로 Sync Remote -> Local은 웹에서 로컬로 가져오는 것입니다.
암튼 난 되어있으니까 리모트에서 싱크로 얍 뿅.
그동안 작업했던 애들을 불러왔습니다.
다음 주부터는 학원이 비대면으로 진행되기 때문에... 음 학원에 저거 저장되어있는데 누군가 지우지 않겠지...
세팅하고 작업환경 구축까지 했으니 일단 여기까진 복습 끝
위 과정을 거쳐 만든 저의 무료 웹호스팅 홈페이지 주소는
jsddp.woobi.co.kr
'about WEB DESIGN > HTML5+CSS3' 카테고리의 다른 글
| 복습2 : HTML5 태그 기본 part 1 (0) | 2021.01.03 |
|---|
댓글