Html코딩 - 실습(실행편)

주제  : HTML

 

실습목표 

구체적인 디테일보다(CSS와 JavaScript에서 더 배울테니)

1) 게시판 메뉴에 따른 페이지 구분

2) 영상삽입 및 의견 의사소통 기능

에 집중하여 만들어보자!

 

부딪힌 문제 - 해결과정

문제1. disqus 댓글기능을 이용해 참여자가 여러 질문에 답을 하게 하려고 했는데.. 코드를 여러번 달아도 구현되는 댓글창은 하나뿐이다.. ㅠ

분명 코드를 두번 쳤는데..

댓글 서비스는 하나만 나온다..ㅠ

 

문제2. 서칭을 해보니 disqus의 댓글기능은 한페이지에 하나가 제공된다는 것을 알게 되었다. 그래서 livere 사이트의 댓글기능을 추가하여 2개의 댓글창을 운영하려고 했으나.. 내가 만든 웹페이지를 입력하는 창에서 에러가 뜬다.

ㅠㅠ..

문제3. 내가 만든 웹페이지가 서버를 통해 호스팅된 것이 아니라 적용이 안되는걸까?하는 생각이 문득 들어 깃허브를 이용해서 웹페이지를 생성해보려고 했는데, 생활코딩에서 할 때는 잘 되었던 것이 지금은 안된다.. 왜 그럴까? 댓글기능의 코드가 문제였던 것일까..?? 

ㅠㅠ....

문제4.

혹시나 해서 disqus의 댓글기능 코드를 제거하고 다시 웹페이지 등록을 해보았는데.. 그래도 결과는 같다..ㅠㅠㅠㅠㅠ 대체 뭐가 문제인거지???

제발.. 이러다 다 죽어 ㅠㅠ

 

 

해결1.

구글신의 도움을 빌려야 한다. '깃허브 웹페이지 404 오류'라는 것을 가지고 검색해보았더니 업로드 할 때 처음 시작시 들어가는 파일이 index.html이 아니면 안된다는 것이다다아아아아아!!!!!! 그래서 페이지 하나를 index.html로 바꾸었더니 정말.. 정상가동이 되었다! 너무 행복쓰..

자세한 내용은 요 블로그를 참고하세요! 문과언니짱!! https://eunhee-programming.tistory.com/164

(GitHub)깃허브 페이지 404 에러 해결법 총 정리/깃허브 호스팅 404에러

깃허브 업뎃 완료! 히히히힣ㅎㅎ

 

깃허브 업뎃도 완료했겠다. 다시 라이브리 댓글 기능을 추가해보자! 우선 깃허브를 통해 배포한 사이트를 입력해보자!

그럼 아래와 같이 배포할 수 있는 코드를 준다. 이 코드를 비쥬얼 스튜디오 코드에 그대로 복붙하면 된다는 건데..

복붙해서 입력해보니 아래와 같이 파일이 빨간색으로 뜬다.. 왜 그러지? 에이 모르겠다 일단 저장하고 깃허브에 배포해!

 

문제5. 잉 근데 댓글기능도 그렇고 미리 한 문구수정도 제대로 반영이 안되어있다.. 파일명에 빨간색이 뜨는 경우에는 제대로 저장이 안되는 걸까??

난 수정하고 저장했는데, 왜 파일내용은 그대로지??

 

해결2. 구글링을 다시 시작했다..  '비쥬얼 코드 파일명 빨간색'을 쳐봤더니 시원한 답을 얻을 수는 없었지만 '빨간색 밑줄'의 존재를 알게 되었다. 그리고 내 코드를 찬찬히 살펴보니 아주 조그맣게 빨간줄이 있다는 걸 알게 되었다.. 

왜 자꾸 저게 빨간색으로 뜨는지 몰라 답답했다

 

뭐가 잘못된 걸까..? 아까는 무시?!했던 라이브리 설치가이드를 들어가보니 ;}가 아니라 }; 임을 알게되었다... ㅋㅋㅋㅋㅋㅋ

역시 상품설명서를 꼼꼼히 읽어야.. ㅎ

 

수정하니 언제 그랬냐는 듯이 평온해진 파일명 색깔..

요걸 놓치다니...

 

적용해서 배포했더니.. 드디어 댓글기능 2개 달기 완성! 기뻐서 직접 댓글도 쳐보았다 ㅎ

영상을 보기전에 질문 - 라이브리 댓글창으로 답변

활동질문 - 디스코스 댓글창으로 답변

 

여기까지 html으로 수업 콘텐츠 만들끼 끝!

다음은 보잘것 없지만 제가 배포한 웹페이지입니다..! https://mooongmooong.github.io/medialiteracy/

 

배포한 웹페이지 간단한 설명을 해보자면

-미디어리터러시 능력을 향상시키기 위해 '영상을 해석하기&비판적으로 바라보기'를 목표로 영상을 보고 자신의 생각을 정리하고, 다른 사람들과 의견을 교류할 수 있는 페이지를 만들고자 했다.

-그래서 '콘텐츠의 취지 소개  /  이용방법 / 시작하기 / 문의사항'으로 콘텐츠 설명부터 이용, 문의까지 가능한 페이지를 만들어보았다.

-각 페이지대로 설명해보자면

 

1) 소개

 

가장 처음에 나오는 화면이다. 콘텐츠의 취지와 더불어 흥미를 가질 수 있는 멘트를 배치했다.

 

2)이용방법

처음 콘텐츠를 접하는 사람들을 위해 이 콘텐츠 활동의 단계 및 구체적 사용법에 대해 안내했다.

 

3)시작하기

영상을 보기 전에 - 영상과 연관된 주제를 생각해보며 흥미를 유도하기

영상 - 영상에 대한 간단한 내용 소개 및 영상시청

활동질문 - 영상에 대한 내용에 대한 구체적인 의견 묻기

 

컨텐츠를 '1)영상을 보기 전에 -  2)영상 - 3)활동질문' 순으로 배치하여, 단순히 영상만을 시청하는 데에서 그치는게 아니라, 처음부터 자신의 생각을 가지고 영상을 해석하고, 내용을 한 번 더 곱씹을 수 있도록 구성했다. 

 

4)문의사항

채팅기능을 넣어서 이용자가 콘텐츠의 내용 및 진행방식에 관한 여러가지 질문을 할 수 있도록 하였다.

 

느낀점

1.내가 생각만 하던 웹콘텐츠를 직접 만들었다는 점이 신기하다.

2. 댓글 채팅창 등을 이용해 참여자가 소통할 수 있는 도구를 만들었지만, 외부에서 가져온 기능이다 보니 따로 노는 느낌이다.

3. 기획할 때 채팅기능을 이용해 주제를 정하는 등 소통을 활발히 할 수 있는 도구를 만들어보려했지만 문의사항으로 활용하는 데에 그쳤다.

3. 태그를 만들 때 여는태그는 잘 만들어놓고 닫는 태그를 자꾸 까먹는다.. 까먹지 말기!

4. 코드를 볼 때 틀린지점이 없는지 꼼꼼히 보기!

5. 모르면 구글에 검색하자 ㅎ 구글신 짱!

 

앞으로 배우며 더 추가할게 있다면?

1. 게시판에 배치할 이미지의 크기를 조절하며 원하는 위치에 배치 하려면 어떻게 하나?

2. 게시판 메뉴 옆에 아이콘처럼 이미지를 배치할 수 있나?

3. 게시판의 구획을 나누는 선을 긋고 싶다.

4. 텍스트 주변에 배경색을 넣고 싶다.

5. 글자 크기를 조절하고 싶다.

6. 웹사이트 사용자 간의 의사소통수단은 어떤 식으로 만들게 될까?

ex)예를 들면 누가 접속해있는지, 채팅을 하는 사람은 누구이며 텍스트를 작성중인지 알려면?

7. 텍스트 너비를 모두 통일하면 좋을 것 같다.