본문 바로가기
알면 써먹기 좋은 지식

HTML head 태그 내에 style 태그를 여러개 넣어도 될까?

by ◉∙⏎・❖•▶︎⁍ 2023. 7. 23.
반응형

HTML에서 style tag 는 css 등을 사용하기 위해 필수입니다. 그런데 이미 내 HTML 파일(혹은 티스토리 스킨편집) 에 <style> 태그가 이미 있으면 어떻게 해야 할까요? 새로 style태그를 넣어야 할까요? 아니면 기존 style 태그에 새로운 내용을 합쳐야 할까요?

 

HTML의 `<head>` 요소 안에는 `<style>` 태그를 여러 개 사용할 수 있습니다. `<style>` 태그는 웹 문서에 CSS (Cascading Style Sheets)를 포함하여 해당 문서의 스타일을 정의하는 데 사용됩니다.
여러 개의 `<style>` 태그를 사용하는 경우, 각각은 해당하는 스타일 블록을 포함합니다. 예를 들어, 다음과 같이 여러 개의 `<style>` 태그를 사용할 수 있습니다.

 

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Style Tags</title>
    <style>
        /* 첫 번째 스타일 블록 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
    <style>
        /* 두 번째 스타일 블록 */
        h1 {
            color: #007bff;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an example of using multiple style tags in the head section.</p>
</body>
</html>

 

 

구글 애드센스 수익이 보장되는 글 주제 50가지 추천

웹사이트를 시작하는 것이 그 어느 때보다 쉬워졌습니다. 또한 Google 애드센스 와 같은 광고 플랫폼 을 사용하면 이러한 웹사이트에서 쉽게 수익을 올릴 수 있습니다. 그러나 모든 웹사이트가 동

icandothat.tistory.com


위의 예시에서, `<head>` 요소 내부에 두 개의 `<style>` 태그가 있습니다. 첫 번째 `<style>` 태그는 `body` 요소에 대한 스타일을 지정하고, 두 번째 `<style>` 태그는 `h1` 요소에 대한 스타일을 지정합니다.

각 `<style>` 태그 내에서는 CSS 규칙을 사용하여 해당 요소들의 스타일을 지정할 수 있습니다. `<style>` 태그 안에 있는 CSS 규칙은 해당 문서에 포함된 모든 적용 대상 요소에 적용되게 됩니다. CSS는 캐스캐이딩 (Cascading) 원칙을 따르므로, 동일한 요소에 대해 여러 규칙이 적용되는 경우 우선순위에 따라 스타일이 결정됩니다.

이와 같이 HTML 문서에서 `<head>` 내에 여러 개의 `<style>` 태그를 사용하여 웹 페이지의 스타일을 지정할 수 있습니다.

반응형

댓글