노션에 존재하는 여러가지 제약들을(ex. https 이슈) 피하기 위해, 대문페이지를 노션처럼 꾸며 여러가지 솔루션을 자유롭게 붙이기 위해(ex. Google Anlytics) 이 챕터를 만들게 되었습니다. Front-end 코딩을 어느 정도 하실 수 있어야 할 수 있는 작업이기 때문에 별도의 챕터로 가지고 왔습니다.
참고할 수 있는 영상 2개를 아래 포함합니다. 자세히 아실 필요는 없습니다. 대부분의 코드는 인터넷에서 가져올 것이니까요. PDF로 보고 있으신 분들은 '제주코딩베이스캠프' 유튜브 채널 참고 부탁드립니다.
혹시 더 상세하게 알고 싶으시다면 아래 영상 강의를 참고해주세요. 무료입니다. 가볍게 HTML만 훑어주세요. 상세지식은 이번 튜토리얼을 사용하는데 필요하지 않습니다.
아래는 이번에 테스트할 페이지입니다. Heading 3개를 포함합니다.
Hello world
hello world
hello world
우선은 웹 페이지로 접속합니다. 접속한 화면에서 개발자 도구를 엽니다. 개발자 도구는
Ctrl + Shift + i를 누르시면 개발자 도구가 열립니다. 맥은 alt + cmd + i키를 눌러주세요. 아래와 같이 열렸으면 성공하신 것입니다.
Elements 창에서 아래 빨간색 사각형 부분을 클릭하신 다음
Ctrl + C를 누르셔서 복사를 합니다.
그리고 사용하시던 편집기(메모장이어도 상관 없습니다)를 여셔서
Ctrl + V를 하시면 아래와 같이 작성이 됩니다.
저는 Atom 이라는 에디터를 사용했습니다. 이 에디터에서 빨간색 네모 부분을 보시면 띄어쓰기나 여백이 전혀 고려되지 않고 작성된 것을 볼 수 있습니다. 아래와 같은 페키지로 자동화 하세요.
해당 패키지를 설치한 후 실행시키면 일렬로 되어 있던 코드가 아래와 같이 깔끔하게 정리된 것을 알 수 있습니다.
메모장을 사용하시는 분들은 자동화 도구가 없으니 그대로 저장을 하겠습니다. 파일명은
index.html로 저장하세요. 저장하실 때 텍스트가 아니라 모든 파일로 저장하십시오. Atom이라면 파일명만 index.html로 지정하시면 됩니다.해당 파일을 저장해놓으신 곳에서 실행해 보시면 아래와 같이 보입니다.
마치 노션에 들어와있는 듯한 화면이지만 URL을 보시면 index.html 파일입니다. 옆에 사이드 바가 거슬리신다면, 위에 개발자 도구를 열고 코드를 복사하기 전, 해당 사이드 바를 접어두고 코드를 복사하면 사이드바가 들어가지 않은 화면으로 보이게 됩니다.
중간에 내용 수정을 하려면 약간의 HTML/CSS 수정이 불가피합니다. 하지만, 역시 수정 정도의 기술이라 고도의 기술을 필요로 하지는 않습니다.
2가지 정도가 수정이 필요한데 클릭하시면 마치
textarea 태그 처럼 수정이 되는데 수정이 안되게 해주시고 <a>태그로 감싸 각각의 페이지가 노션 페이지로 연결되게 하면 충분히 대문 홈페이지로 사용하실 수 있습니다.HTML과 CSS를 직접 수정하시는 것보다는 일단 노션으로 거의 다 만들어놓고 최소한의 작업만 직접 하시는 것을 추천해드립니다.
이 페이지를 웹에서 Serving하기만 하면 됩니다. Cafe24에서 월 500원에 웹 Serving을 할 수 있는 서비스를 제공하고 있습니다. 물론 무료로 할 수 있는 곳도 많습니다. 서버 구매하시면 html파일 올리시기만 하시면 되십니다. 파일명은 꼭
index.html이어야 합니다.
