HTML head 안에 있는 스타일(style) 스크립트(script) 태그 개념 이해하기
이번 시간에는 간단한 개념을 짚고 넘어가려고 합니다. 저도 이 부분에 대해 궁금했는데 오늘 수업을 들으면서 궁금증이 해소되었습니다. HTML 코드 중 <head> 안쪽에서 존재하는 <style> 태그와 <script> 태그 입니다. 각각의 역할이 다른데 어떤건지 간단한 테스트를 통하여 알아보겠습니다.
먼저 스타일 부분입니다. HTML 첫 강좌 때 말씀드린것이 있는데, <head>는 사람으로 비유하면 얼굴과도 같은 부분이라고 말씀 드린 바 있습니다. 그냥 민얼굴은 밋밋할 수 있으니 좀 꾸미려면 헤어스타일도 바꿀 수 있고, 피부톤도 바꿀 수 있는 것 처럼 HTML의 헤드 부분에도 스타일링을 할 수 있습니다.
위의 예시에서는 h1 태그를 꾸며보았습니다. 사용된 스타일 태그는 다음과 같습니다.
<style>
h1 {color: red;}
</style>
여기에서 처음 나오는 h1이 바로 선택되어지는 대상, 즉 선택자라고 말합니다. 그리고 소괄호 안에 들어가는것이 바로 적용되는 스타일 내용입니다. 예시에서는 레드 컬러로 설정되었다는것을 확인할 수 있습니다. 따라서 이 뜻은, "h1 태그를 사용한 텍스트에 한해서는 글자색을 빨간색으로 만들어라!" 라는 뜻이 됩니다.
그렇기에 실제 웹으로 출력을 해보면 이렇게 <h1> 태그만 글씨가 빨갛게 적용된 것을 알 수 있습니다. 어려운 개념은 아니지요?
다음은 스크립트 (script) 입니다. 스크립트 또한 스타일을 변경하기도 하지만 주로 동적인 부분을 변경시켜 줍니다. 예를 들자면 시간에 따라 자연스럽게 이미지가 변하게 된다던지, 예제에 나오는 것 처럼 확인창을 띄운다던지 하는 부분입니다. 경고창을 띄우는 태그는 위에 작성한 대로입니다.
<script>
alert("텍스트");
</script>
이렇게 태그가 구성됩니다. 큰 따옴표 안쪽에 출력하고자 하는 텍스트를 작성해주시면 됩니다.
그리고 웹페이지에서 실행하시면 이렇게 알림창이 새로 뜨면서 안쪽에 작성하신 텍스트가 출력됩니다. 확인을 눌러서 닫습니다. 끝.
"친절한효자손 취미생활" 을 검색!
