[티스토리] 블로그에서 많이 사용되는 <script> 태그! 스크립트 태그 알아보기!

≣ 바로가기

Opening(전체 보기)

 

안녕하세요! 어제는 못 올렸어요ㅜㅜ 그래서 이렇게 얼른 달려왔습니다!

오늘은 티스토리 블로그 운영자라면 꼭 한 번 이상은 사용하게 되는 <script> 태그에 대해서 

알려드리려고 해요! 

저도 티스토리 블로그를 운영하면 스크립트태그라는 걸 처음 만났고, 처음 다뤄보는 컴퓨터언어였어요!

그래서 솔직히 진짜 되게 어렵고 복잡하고 헷갈리고 여전히 헤매고 있지만,

그래도 제가 아는 만큼, 알고 있는 걸 공유해보고 싶어서 부족하지만 올려봅니다!

 

<SCRIPT> 태그 이해하기!

 

가장 먼저, 스크립트 태그에 대해서 이해를 해봐야겠지요! ((같이 공부한다는 마음으로 적어볼게요!

인터넷 같은데 찾아보면, 스크립트 태그는 자바스크립트를 포함하며 웹 페이지의 기능을 확장하는 데 사용된다고 나와있는데 쉽게 해석? 해보자면..

 

HTML에서 javascript를 포함할 때 사용, 즉 자바스크립트에서 파일을 불러올 때 사용하는 태그!라고 합니다!

또한, 웹 페이지에 동적인기능(움직이는 기능)을 추가할 수 있도록 도움을 주는 태그입니다!

더 쉽게 말하자면, 웹 페이지에서 버튼을 클릭하면 어떠한 동작을 수행한다거나, 어떠한 콘텐츠를 동적(움직임이 있는 것)으로 만들어줍니다!

 

예를 들어, 지금 제가 사용하고 있는 상단바스크롤; 사이드바기능; 목차기능; 등 모두 어떠한 기능을 멈춰있는 게 아니라 움직일 수 있도록 만들어주고 있고 목차 내에서도 '하이퍼링크'를 생성해 소제목(작은 제목들, 목차들) 클릭하면, 해당 글로 이동할 수 있게 해주는 그런 태그입니다!

 

*스크립트 태그는 CSS태그가 아닙니다. HTML태그입니다!

 

스크립트의 예시

 

1번 예시

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

이 스크립트는 "https://-" 를 불러온 뒤, 윈도우에서의 데이터를 본인의 태그 관리 시스템으로 추적 및 전송을 해줍니다!

 

2번 예시

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpC5ikm8amJc6a1kLeJlTVE9TXytJ8gO+ti1TVW0YupZfcajUQ0aZ9+7" crossorigin="anonymous"></script>

이 스크립트는 마찬가지로 링크를 불러와 실행하고 어떠한 기능을 추가합니다!

 

3번 예시

<script>
  $(document).ready(function () {
    if ($('body').width() > "960") {
      $("sidebar").mCustomScrollbar({
        theme: "dark-thin",
        autoHideScrollbar: "true"
      });
    }
  });
</script>

이 스크립트는 'body'에서 사이드바가 움직일 수 있도록 동적인 기능을 만들어주는 것입니다.

뿐아니라 사이드바의 동적인 기능을 위해 스크롤바가 생성되는데 그 스크롤바의 태마도 지정할 수 있습니다.

여기서는 'dark-thin' 테마로 지정되어 있어요! 

이를 '커스텀 스크립트' 라고도 한다고 합니다!!

 

Closing

 

마무리하며, 스크립트를 추가할 때는 신뢰할 수 있는 안전한 곳에서 가져오는 것이 중요하다고 하니까

여러분들도 가능한 출처가 명확한 곳에서 스크립트를 가져와 추가하시길 바래요!

 

그리고 스크립트를 추가하고 계속 확인을 해봐야합니다, 제대로 기능이 올바르게 생성이 되었고

제대로 실행이 되는지, 만약 실행이 되지 않는다면 다른 스크립트를 찾아서 수정해보거나

정 안될때는 아주 다른 방향을 찾던지, 아니면 그냥 삭제하는 것이 좋습니다..

 

저도 목차때문에 아직까지도 씨름중이지만 확실히 성능과 접근성..  등 모든면에서 많은 점수가

떨어졌더라구요.... 잦은 html 수정때문이었는지;;; 하......

 

아무튼 처음에는 계속 실수도 많고 실행도 안되고.... 틀리고.......... 

그렇지만, 이 과정이 계속 지나고 쌓이다보면, 또 언젠가 문제점이 하나씩 눈에 띄고 알아보는게

생기더군요... 그러니까 여러분들도 지금 당장 안된다고 포기하지 마시고

그렇다고 또, 너무 그곳 한곳에만 취중하지도 마세요.. 다른 것도 해보면서 자연스럽게 익숙해지면

지금 안되던 것도 어느순간 답이 보일 때가 올거에요! 

 

저도 목차니 상단바니, 사이드바니.. 글꼴이니.. 이런저런 여러가지 해보면서

처음엔 전혀 안보이던것들이 하나씩 하나씩 보이더니

html과 css용어에 대해 공부까지 곁들여지니 이젠 웬만한 건 읽히더라구요!

참으로 신기한 일이 아닐 수 없어요!

 

그러니 너무 조급해하지도 쉽게 포기하지도 마세요!!

 

예고

 

앞으로도 제가 아는 한에서는 계속해서 html과 css에 관한 글들을 올리려고 합니다!

 

다음 글에서는 너비와 높이 용어에 대해서 적어보려합니다!! ㅎㅎ

 

이런것도 있어요!

2024.10.18 - [핸드폰 설명서/티꾸(티스토리꾸미기)] - [티스토리] 티꾸1탄! 블로그 폰트 변경하기!!

[티스토리] 티꾸1탄! 블로그 폰트 변경하기!!

2024.10.16 - [핸드폰 설명서/티꾸(티스토리꾸미기)] - [티스토리] 배너가 안보여요! 배너가 안나와요! 배너 출력 플러그인 등록하고 배너 등록하는 법

[티스토리] 배너가 안보여요! 배너가 안나와요! 배너 출력 플러그인 등록하고 배너 등록하는 법

2024.10.17 - [핸드폰 설명서/티꾸(티스토리꾸미기)] - [티스토리] css가 뭔가요? css에 대해서 알아보자!

[티스토리] css가 뭔가요? css에 대해서 알아보자!