답변:
jdelStrother가 w3 사양과 ARTstudio에 대해 브라우저 렌더링에 대해 언급 한 내용을 추가하기 만하면됩니다.
<body>시작 하기 전에 CSS를 선언하면 스타일이 실제로로드되었으므로 권장 됩니다. 따라서 사용자는 화면에 무언가가 나타나는 것을 볼 수 있습니다 (예 : 배경색). 그렇지 않으면 CSS가 사용자에게 도달하기 전에 일정 시간 동안 빈 화면이 표시됩니다.
또한 스타일을에서 어딘가에두면 <body>선언 된 스타일이 구문 분석 될 때 브라우저가 페이지를로드 할 때 (로드 할 때 새롭고 오래된 것) 다시 렌더링해야합니다.
link그리고 style그들 중 하나 (스타일) 범위 경우를 제외하고 본문에 표시하거나 속성이 없어야합니다 itemprop(링크) 선언합니다.
scoped속성은 더 이상 사용되지 않습니다.
HTML 스펙의 최신 버전은 이제 <style>body 요소 내 에서 태그를 허용합니다 . https://www.w3.org/TR/html5/dom.html#flow-content
또한 태그 scoped가 있어야하는 전제 조건 이 이제 더 이상 사용되지 않습니다.stylebody
즉, style원하는 곳 어디에서나 태그를 사용할 수 있으며 브라우저가 페이지 트리에서 스타일을 한 번 더 떨어 뜨리면 리플 로우 / 재 도장으로 인해 페이지 성능이 저하 될뿐입니다.
더 이상 사용되지 않는 답변 :
<style>태그 내에 허용되지 <body>W3 사양에 따라. (물론 <div style="color:red">필요한 경우 인라인 스타일을 적용 할 수 있지만 일반적으로 스타일과 내용의 분리가 좋지 않은 것으로 간주됩니다)
본문에 CSS를 넣으면 나중에로드됩니다. 브라우저가 인터페이스를 더 빨리 그리기 시작할 수 있도록하는 기술입니다 (즉, 차단 단계를 제거함). 이는 스마트 폰의 사용자 경험에 중요합니다.
나는 하나의 작은 CSS를 유지하기 위해 최선을 다하고 <head>나머지는 맨 아래로 움직입니다. 예를 들어, 페이지가 JQuery UI CSS를 사용하는 경우 항상 <body>JQuery 자바 스크립트 링크 바로 앞에 페이지를 맨 아래로 이동합니다 . 적어도 Jquery가 아닌 모든 항목을 이미 그릴 수 있습니다.
헤드는 (W3C 인용)을 위해 설계되었습니다 :
"제목, 검색 엔진에 유용한 키워드 및 문서 내용으로 간주되지 않는 기타 데이터와 같은 현재 문서에 대한 정보 "
HTML 문서 의 전역 구조를 참조하십시오 . CSS는 문서 내용이 아니므로 헤드에 있어야합니다.
또한 다른 모든 웹 개발자는 그것을 볼 것으로 예상하므로 작동하더라도 본문에 넣는 것으로 혼동하지 마십시오!
본문에 넣어야하는 유일한 CSS는 인라인 CSS 이지만 일반적으로 인라인 스타일은 피합니다.
표준 ( HTML 4.01 : 스타일 요소 )은 스타일 태그가 헤드 태그 내에서만 허용되도록 명확하게 지정합니다. body 태그에 스타일 태그를 넣으면 브라우저는 가능하면 최대한 활용하려고 시도합니다.
엄격한 문서 유형을 지정하면 브라우저가 본문의 스타일 태그를 무시할 수 있습니다. 현재 브라우저 에서이 작업을 수행하는지 여부는 알 수 없지만 스타일 요소를 배치하는 위치에 대해 모든 버전이 완화 될 것이라고는 생각하지 않습니다.
style태그는 scoped속성 이있는 경우 본문에서 허용됩니다 .
style본문 에는 태그가 허용되지 않지만 link외부 스타일 시트를 참조하는 한 모든 브라우저 는 에서 사용될 때 CSS를 올바르게 렌더링하고 사용해야합니다 body.
출처 : https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
이전 답변뿐만 아니라, 요소 내에 스타일 코드 블록을 퍼팅 불구하고 있습니다 현대적인 브라우저에서 작동, 브라우저가 텍스트로 코드를 렌더링하는 것이 특히 이전 버전의 브라우저로, 항상 위험이있다 (즉, 아직 바로하지 않습니다하지만) 스타일 섹션이 CDATA 섹션에 포함되지 않는 한.
물론 인라인 스타일 이외의 요소에 요소를 넣으면 W3C HTML / XHTML 사양을 충족하지 않으므로 본문에 페이지가 있으면 W3C 유효성 검사기에서 오류가 발생한다는 것입니다. 모든 코드가 유효하면 예기치 않은 디스플레이 문제를 쉽게 버그 검색하여 실수를 쉽게 발견 할 수 있습니다. 유효하지 않은 HTML 요소는 코드에서 발생하는 위치를 넘어서서 모든 요소의 소급에 부정적인 영향을 줄 수 있으므로 브라우저가 유효하지 않은 요소를 발견하면 표시 방법에 대해 가장 잘 추측 할 수 있으며 브라우저마다 렌더링 방식에 따라 다른 결정을 내릴 수 있습니다.
전환 또는 엄격한 doctype을 사용하든 (X) HTML 사양에 따라 여전히 유효하지 않습니다.
실제로 스타일을 본문에 넣음으로써 CSS 사용의 목적을 물리치게됩니다. 요점은 컨텐츠를 프리젠 테이션 (및 기능)과 분리하는 것입니다. 이렇게하면 스타일이 아닌 스타일 시트에서 내용을 변경할 수 있습니다. 인라인 스타일 방법을 사용하면 인라인 스타일이있는 모든 페이지를 하나씩 변경해야합니다. 한 페이지 나 세 개 또는 열 개를 놓칠 수 있으므로 지루하고 위험합니다.
스타일 시트를 사용하면 스타일 시트 만 변경하면됩니다. 변경 사항은 스타일 시트에 링크 된 모든 HTML 페이지에 자동으로 전파됩니다.
neonble의 요점은 또 다른 큰 이유입니다. CSS 인라인을 추가하여 HTML을 망칠 경우 렌더링이 문제가됩니다. HTML은 코드에 예외를 발생시키지 않습니다. 대신에 밖으로 나가서 최선의 방법으로 렌더링하고 계속 진행합니다.
스타일 시트를 사용하여 웹 표준을 준수하면 더 나은 웹 사이트를 만들 수 있습니다. 페이지의 내용이 원하는 방식과 정확히 일치하지 않기 때문에 도움이 필요한 경우 CSS를 본문과 반대로 머리에 배치하면 자신과 도움을 요청하는 사람이 훨씬 더 나은 문제 해결을 할 수 있습니다.
두 가지 상충되는 답변 :
링크 태그의 MDN 페이지 에서 :
<link>요소는 하나의 발생<head>또는<body>그 신체 확인하는 링크 유형을 갖고 있는지 여부에 따라, 요소. 예를 들어, 스타일 시트 링크 유형은 body-ok이므로<link rel="stylesheet">본문에서 a 가 허용됩니다. 그러나 이것은 모범 사례가 아닙니다.<link>신체 내용과 요소 를 분리 하여 머리에 넣는 것이 더 합리적 입니다.
CSS에서 The Definitive Guide (제 4 판 / 2017) 10 페이지
외부 스타일 시트를 성공적으로로드하려면 헤드 요소 내부에 링크를 배치해야하지만 다른 요소에는 배치 할 수 없습니다.