수업예고
웹이 태어난 직후에 HTML에는 디자인을 위한 코드가 대거 추가됩니다. 무분별하게 추가된 디자인 기능은 정보로서의 웹이라는 가치를 오히려 퇴보시킵니다. 이를 극복하기 위해서 웹을 만드는 사람들은 디지털 정보의 세계를 완전히 바꿔놓을 기술을 궁리하기 시작하는데...
강의
소스코드
댓글
-
25.4.20 완료 -
25.02.23 완
-
25.02.07 복습
-
25.01.13
-
25.01.12 완료
-
25.01.08
-
2025.01.06. 완료
-
HTML에서 `<style>` 태그를 사용하여 CSS 스타일을 작성할 때, **기본적으로는 `<head>` 태그 안에서 사용하는 것이 원칙이자 권장 사항**입니다. 하지만 `<style>` 태그를 다른 부분에 넣어도 대부분의 브라우저에서는 제대로 작동합니다.
### 이유
`<style>` 태그는 HTML 문서 내에서 **CSS 규칙을 정의하는** 목적으로 사용되며, HTML 문서의 **구조적 원칙**에 따라 `<head>` 태그 안에 배치하는 것이 맞습니다. 그렇지만 브라우저는 상당히 유연하게 작동하므로 `<style>` 태그가 다른 위치에 있더라도 스타일 규칙을 렌더링하는 데는 문제가 없습니다.
### `<head>` 안에 넣는 이유
1. **HTML 문서의 구조를 명확히 함**:
- `<head>`는 메타정보(문서의 제목, 스타일, 스크립트 등)를 정의하는 곳입니다.
- `<style>` 태그를 `<head>` 안에 넣어 CSS를 정의하면 문서의 스타일 정보가 어디에 있는지 쉽게 알 수 있습니다.
2. **표준 준수와 유지보수성**:
- W3C 표준에 따르면 `<style>` 태그는 `<head>` 안에 위치해야 하는 것으로 정의되어 있습니다.
- 코드를 작업하는 사람들이나 협업 환경에서 코드 구조를 일관성 있게 유지할 수 있습니다.
3. **가독성과 협업의 편리성**:
- `<style>` 태그가 `<head>` 안에 위치하면 다른 사람이 문서를 읽을 때 스타일 정의를 쉽게 찾을 수 있습니다.
### `<style>` 태그를 다른 위치에 넣어도 되는 경우 (작동은 되지만 권장되지 않음)
브라우저는 HTML 문서를 위에서 아래로 읽으면서 DOM(Document Object Model)을 렌더링합니다. 따라서 `<style>` 태그가 `<body>` 태그나 다른 위치에 있더라도 해당 CSS 스타일이 브라우저에 적용됩니다. 그러나 이렇게 하면 몇 가지 문제가 발생할 가능성이 있습니다:
1. **CSS 적용 순서 문제**:
- 브라우저는 HTML 문서를 읽으면서 CSS를 적용합니다. 만약 CSS가 `<body>`나 하위 태그에 있다면 일부 스타일 규칙들이 해당 시점 이후에만 적용될 수 있습니다.
2. **혼란 발생**:
- `<style>` 태그가 문서의 중간이나 하위에 산재해 있으면 코드의 가독성이 떨어지고, 유지보수가 어려워집니다.
3. **표준 준수 문제**:
- `<style>` 태그가 `<head>` 외부에 있으면 표준을 벗어난 코드로 간주되어, 여전히 최신 브라우저에서는 작동하더라도 오래된 브라우저나 특수 환경에서 제대로 작동하지 않을 가능성도 있습니다.
### 코딩하는 사람들 간의 약속
네, `<style>` 태그를 `<head>` 안에 넣는 것은 일종의 **코딩 관례**이자 **표준**입니다. 예를 들어:
- 협업 시 코드 구조가 일관성을 갖습니다.
- 다른 사람이 작업 내용을 읽고 수정하기 쉽습니다.
- 코드가 표준에 맞는 방식으로 작성되어 브라우저 호환성 문제가 줄어듭니다.
### 더 좋은 방법: **외부 CSS 활용**
현대적인 웹 개발에서는 `<style>` 태그보다 **외부 CSS 파일**을 활용하는 것이 더 권장됩니다. 외부 CSS 파일을 사용하면 아래와 같은 장점이 있습니다:
1. 코드 분리로 HTML과 CSS가 각각 간결해짐.
2. 한 번 스타일을 정의하여 여러 HTML 파일에서 재사용 가능.
3. 유지보수가 더 쉬워짐.
### 결론
- **원칙적으로 `<style>` 태그는 `<head>` 안에 있어야 합니다.**
- 다른 위치에서도 작동은 가능하지만 권장되지는 않으며, 유지보수성과 표준 준수를 위해 `<head>` 안에 넣는 것이 좋습니다.
- 가능하다면 외부 CSS 파일을 사용하는 방법을 고려해보세요. -
양질의 강의 감사합니다.
강의를 들으면서
궁금한 게 있습니다.
==========================
<style>
a{ color : red;}
</style>
==========================
이 테그는 <head>테그 안에서만 있어야 하나요?
궁금해서 다른 곳에 넣고 실행했는데 작동은 되서요.
<head>안에 넣어서 코딩하는 게 코딩하는 사람들 간의 약속인지 궁금합니다. -
완료
-
24.10.10 완료
-
완료
-
[Complete] 2024.08.05.월 -
완료
-
2024.06.20 완료
-
완료
-
2025-05-22 완료
-
2025-05-05 완료
-
2024-05-03 완료!
-
완료
-
24.4.1 완료
-
없는 셈 쳐라 태그
<!--
<ol>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>
-->
첫 CSS
<style>
a {
color:red;
}
</style> -
20240305
-
2024.02.05 완료
-
2024.01.22 완료
-
2024.01.22 완료
-
시작
-
2024.1.6
-
2023.11.10 완료 -
231026
-
20231016 완 -
230929완
-
23.09.10 완 -
2023-08-23 완료
-
230822 완료
-
23.08.08
-
23.08.05
-
23.08.03.
-
2023.07.18
-
2023.07.14
-
2023.07.13
-
23.07.07 완료 -
230611 -
23.05.23 -
2023.05.18. WEB2 - CSS - CSS의 등장 파트를 시작합니다. -
230515
-
23.04.30 check.
-
23.04.13
-
2023.03.07
-
23.03.06
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
