Notice

목표

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

짧은코딩

HTML) 첫 번째 웹사이트 본문

HTML, CSS

HTML) 첫 번째 웹사이트

5_hyun 2022. 3. 30. 02:25

오늘 갑자기 진로에 대한 고민을 하였다. 그러다가 프론트엔드 공부를 해보기로 마음 먹어 무작정 시작했다. 사실 2-1학기에 웹 프로그래밍 수업을 들어서 어느정도는 알고있는 상태였다. 하지만 시간이 1년 정도 지나니까 기억을 다 하지는 못했다. 그렇게 막연하게 유튜브를 보던 중 생활코딩님의 영상을 보고 따라했다.

-생활코딩님 영상

https://www.youtube.com/watch?v=tZooW6PritE&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=1

그렇게 이 강의를 하루만에 다 보게되었다. 참 많은걸 배우게 되었다. 복습겸 다시 블로그에 정리하겠다.

내가 만든 사이트

https://github.com/5hyun/my-first-web-site

GitHub - 5hyun/my-first-web-site

Contribute to 5hyun/my-first-web-site development by creating an account on GitHub.

github.com

내 깃허브에 오늘 대강 만들어본 것을 올려봤다. 요리를 소개해주는 사이트이며(아직 초라하지만) 댓글, 채팅, 방문자수 기능을 구현했다. 하루만에 만든거라 아직 내용이 별거 없지만 차차 꾸며 나갈 것이다.

사이트 주소: https://5hyun.github.io/my-first-web-site/

댓글 기능 구현

댓글 기능은 DISQUS라는 사이트에서 구현했다.

https://disqus.com/

Disqus – The #1 way to build your audience

Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.

disqus.com

<div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://web1-vjdymcq4sz.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

사이트에서 제공하는 코드를 가져다가 <body>에 넣어줬다.

사이트 맨 밑에 이렇게 구현되는 것을 확인할 수 있다.

채팅 기능 구현

채팅 기능은 tawk라는 앵무새가 있는 사이트에서 구현했다.

https://www.tawk.to/

100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to

tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a free customizable page.

www.tawk.to

이 사이트에서 구현을 했다.

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/624330602abe5b455fc23582/1fvb79uji';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

이 코드를 복사하여 body 부분에 넣어줬다.

내 사이트에서 채팅 기능으로 hi라고 보내면

이런 메시지가 twak에서 뜨게된다. join을 누르면 나도 관리자 입장에서 채팅을 보낼 수 있다.

방문자 수 구현

방문자 수는 구글 애널리틱스에서 구현했다.

https://analytics.google.com/analytics/web/#/p308773629/reports/intelligenthome

Redirecting...

analytics.google.com

애널리틱스에서 계정을 만들고 데이터 스트림에서 내 사이트를 등록했다.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-15L88J0F7P"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '측정ID');
</script>

그리고 추적 코드를 복사하여 head 부분에 넣어줬다. 측정ID에는 개인마다 다른 문자가 있다.

그러고 나서 깃허브에서 내 사이트에 들어가보니까

1명이 들어왔다는 것을 확인했고 내가 현재있는 주소까지 나오는 것을 확인했다. 조회수도 알려주고 있었다.

저작자표시

'HTML, CSS' 카테고리의 다른 글

CSS-가상 셀렉터, flexbox (0)	2022.05.04
CSS-Positon, float/display, 박스 요소 정렬 (0)	2022.05.03
CSS-캐스케이딩, 박스 모델, 레이아웃 (0)	2022.05.03
CSS) 미디어 쿼리 (0)	2022.03.31
CSS) grid (0)	2022.03.31