스크립트 태그 알아보기
오늘은 티스토리 블로그 운영자라면 꼭 한 번 이상은 사용하게 되는 <script> 태그에 대해서
알려드리려고 해요!
저도 티스토리 블로그를 운영하면 스크립트태그라는 걸 처음 만났고, 처음 다뤄보는 컴퓨터언어였어요!
그래서 솔직히 진짜 되게 어렵고 복잡하고 헷갈리고 여전히 헤매고 있지만,
그래도 제가 아는 만큼, 알고 있는 걸 공유해보고 싶어서 부족하지만 올려봅니다!
▼※ 모든 글과 사진은 직접 촬영 및 작성하였습니다. (직접 작성이 아닌 경우에는 출처명시)
▷ 무단복제 및 저장, 공유 금지🚫
▶ 무분별한 신고나 악의적인 신고❌(신고 시 , 맞신고 함)
▷ 악의적인 목적의 댓글, AI댓글 금지🚫
▶ 불법적인 인용 금지🚫
적발 시, 즉시신고⚠️
더 자세히 보러 가기▼
<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' 테마로 지정되어 있어요!
이를 '커스텀 스크립트'라고도 한다고 합니다!!
스크립트를 추가할 때는 신뢰할 수 있는 안전한 곳에서 가져오는 것이 중요하다고 하니까
여러분들도 가능한 출처가 명확한 곳에서 스크립트를 가져와 추가하시길 바라요!
그리고 스크립트를 추가하고 계속 확인을 해봐야 합니다, 제대로 기능이 올바르게 생성이 되었고
제대로 실행이 되는지, 만약 실행이 되지 않는다면 다른 스크립트를 찾아서 수정해 보거나
정 안될 때는 아주 다른 방향을 찾던지, 아니면 그냥 삭제하는 것이 좋습니다..
처음에는 실수도 많고 실행도 안되고.... 틀리고..........
그렇지만, 이 과정이 계속 지나고 쌓이다 보면,
또 언젠가 문제점이 하나씩 눈에 띄고 알아보는 게 생기더라고요!
그러니까 여러분들도 지금 당장 안된다고 포기하지 마시고
계속 도전해 보세요! 그렇다고 너무 한 곳에만 취중 하지도 마세요!
다른 것도 해보면서 자연스럽게 익숙해지면
지금 안되던 것도 어느 순간 답이 보일 때가 올 거예요!
저도 목차니 상단바니, 사이드바니.. 글꼴이니.. 이런저런 여러 가지 해보면서
처음엔 전혀 안 보이던 것들이 하나씩 하나씩 보이더니
html과 css용어에 대해 공부까지 곁들여지니 이젠 웬만한 건 읽히더라고요!
참으로 신기한 일이 아닐 수 없어요!
그러니 너무 조급해하지도 쉽게 포기하지도 마세요!!
[티스토리] css가 뭔가요? css에 대해서 알아보자!
≣ 바로가기Opening 안녕하세요!! 티스토리 블로그의 기본 중의 기본! 'CSS' 에 대해서 알아보려고 합니다!!((요새 계속 CSS랑 HTML에 대해서 공부하고 있거등요! 그래서 같이 공유할 수 있는 건 해보
gureum5.tistory.com
[티스토리] html태그, link? href? rel? 바로알기!
공지 및 알림1. 혹시 틀린 부분이 있거나 잘못된 부분이 있을 시, 바로 수정.2. 문제가 될 시, 즉시 삭제조치합니다.3. 허위신고나 블로그에 지장을 주기위한 의도적인 댓글 및 공감, 신고는 즉시
gureum5.tistory.com
