css 파일을 넣거나 넣어도 뭐가 달라요?
은 cs 을 에 안에 .<head></head>요, 에 요 요 에 ?<body></body>요? , , 요 를 이 요 를 ?
jdel Strother가 w3 사양에 대해 언급한 것과 브라우저 렌더링에 대한 ART studio에 대해 덧붙이자면 됩니다.
했을 는 과 됩니다 에 됩니다 과 전에 를 선언한 이므로 권장합니다.<body>시작합니다. 스타일이 이미 로드되었습니다.따라서 사용자는 화면에 나타나는 것(예: 배경색)을 매우 빠르게 볼 수 있습니다.그렇지 않은 경우 CSS가 사용자에게 도달하기 전에 한동안 공백 화면이 나타납니다.
그리고 스타일을 어딘가에 두면.<body>되었을 때 새 것과 것)를 다시 입력해야 는 된 되었을 할 를 해야 과 이 를 해야 할 과 .
의 은 은 의 <style>본체 요소 내에 태그를 지정합니다.https://www.w3.org/TR/html5/dom.html#flow-content 또한scoped기해던성를aeo던ueoheed기해a를ostyle꼬리에 꼬리를 물다body이제는 더 이상 쓸모가 없습니다.
이것은 당신이 그들을 이용할 수 있다는 것을 의미합니다.style원하는 모든 곳에 태그를 지정합니다. 브라우저가 페이지 트리에서 스타일을 더 아래로 칠하면 리플로우/재칠 가능성으로 인해 페이지 성능이 저하된다는 것만 의미합니다.
오래된 답변:
<style>지다 내에서 수 .<body>사양에 w3에를 통해 수 .) (w3론을할수다라인다수할론gews을a )<div style="color:red">필요한 경우, 일반적으로 스타일과 내용의 분리가 잘 되지 않는 것으로 간주됩니다.
CSS를 본체에 넣는 것은 나중에 로드된다는 것을 의미합니다.이것은 브라우저가 인터페이스 그리기를 더 빨리 시작하도록 하기 위해 사용되는 기술입니다(즉, 차단 단계를 제거합니다).이것은 스마트폰에서 사용자 경험을 위해 중요합니다.
나는 작은 css 하나를 유지하기 위해 최선을 다합니다.<head>그리고 나머지는 밑에서 옮깁니다.예를 들어, 페이지가 JQuery UI CSS를 사용하는 경우 항상 아래쪽으로 이동합니다.<body> JQuery javascript 링크 바로 앞.적어도 Jquery가 아닌 모든 항목은 이미 그릴 수 있습니다.
헤드는 다음 용도로 설계되었습니다(W3C 인용).
"현재 문서의 제목, 검색 엔진에 유용할 수 있는 키워드, 기타 문서 내용으로 간주되지 않는 데이터 등 현재 문서에 대한 정보"
HTML 문서의 전역 구조를 참조하십시오.CSS는 문서 내용이 아니기 때문에 머릿속에 있어야 합니다.
또한 다른 모든 웹 개발자들은 그것을 그곳에서 보기를 기대할 것이므로, 그것이 작동하더라도 그것을 몸 안에 넣는 것으로 사물을 혼란스럽게 만들지 마세요!
제가 보통 인라인 스타일은 피하지만, 몸에 넣어야 하는 CSS는 인라인 CSS뿐입니다.
표준(HTML 4.01: style element)에는 스타일 태그가 헤드 태그 내부에서만 허용됨을 명확히 명시하고 있습니다.만약 당신이 본문 태그에 스타일 태그를 넣는다면, 브라우저는 가능하다면, 어쨌든 그것을 최대한 활용하려고 할 것입니다.
엄격한 문서 유형을 지정할 경우 브라우저가 본문의 스타일 태그를 무시할 수 있습니다.현재 브라우저 중에 이런 기능을 하는 브라우저가 있는지는 모르겠지만, 스타일 요소를 어디에 배치할 것인지에 대해 앞으로의 모든 버전이 그렇게 느긋해질 것이라고 기대하지는 않습니다.
style할 수 .는에지다다지에g는esnet .link태그는, 외부 스타일시트를 참조하는 한, 모든 브라우저는 CSS를 올바르게 렌더링하고 사용해야 합니다.body.
출처 : https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
이전의 답변 외에도 최신 브라우저에서는 스타일 코드 블록을 요소 안에 넣을 수 있지만(그렇다고 해서 정확하지는 않지만), 특히 오래된 브라우저에서는 스타일 섹션이 CDATA 섹션에 포함되지 않는 한 브라우저가 코드를 텍스트로 렌더링할 위험이 항상 존재합니다.
물론 인라인 스타일을 제외하고 요소 안에 넣었을 때 다른 점은 W3C HTML/XHTML 사양과 맞지 않기 때문에 본문 안에 있는 페이지는 W3C 검증기에서 실패한다는 것입니다.코드가 모두 유효한 경우 예기치 않은 디스플레이 문제를 버그를 더 쉽게 검색하여 오류를 더 쉽게 발견할 수 있습니다.잘못된 HTML 요소는 코드에서 발생하는 위치를 넘어 모든 요소의 렌더링에 악영향을 미칠 수 있으므로 있어서는 안 되는 곳에 요소가 있는 예기치 않은 효과를 얻을 수 있습니다. 브라우저가 잘못된 요소를 발견하면 이를 어떻게 표시해야 하는지에 대한 최선의 추측을 할 뿐이기 때문입니다.그리고 브라우저마다 렌더링 방식에 따라 다른 결정을 내릴 수 있습니다.
임시 또는 엄격한 도식을 사용하더라도 (X)에 따라 여전히 유효하지 않습니다.HTML 스펙.
두 가지 상반된 대답:
링크 태그의 MDN 페이지에서:
A
<link>가할수다할 수 .<head>아니면<body>body-ok인 에 따라 를 들어,은 body-ok이므로를어결이트 body-ok, a<link rel="stylesheet">체내에서 허용됩니다.하지만 이것은 최선의 방법이 아닙니다. 당신의 제품을 분리하는 것이 더 합리적입니다.<link>당신의 신체 내용물에서 나오는 요소들을 당신의 머리 속에 집어넣는 것입니다.
CSS The Definitive Guide (4th Edition/2017) 10페이지
외부 스타일시트를 성공적으로 로드하려면 링크를 헤드 요소 내부에 배치해야 하지만 다른 요소에는 배치할 수 없습니다.
몸에 스타일을 넣음으로써 CSS를 사용하는 목적을 사실상 무산시킬 수 있습니다.요점은 프레젠테이션(및 기능)에서 콘텐츠를 분리하는 것입니다.이렇게 하면 내용이 아닌 스타일시트에서 스타일 변경을 수행할 수 있습니다.인라인 스타일 방법을 사용하면 인라인 스타일이 있는 모든 페이지가 하나씩 바뀌어야 합니다.지루하고 위험해요 한 페이지나 세 페이지, 열 페이지를 놓칠 수도 있으니까요
스타일시트를 사용하면 스타일시트만 변경하면 됩니다. 변경사항은 스타일시트에 연결되는 모든 HTML 페이지에 자동으로 전파됩니다.
네온블의 포인트 또한 큰 이유입니다. 만약 당신이 CSS inline을 추가하여 HTML을 망치면 렌더링이 문제가 됩니다.HTML은 당신의 코드에 예외를 두지 않습니다.대신에 그것은 밖으로 나가서 최선의 방법으로 그것을 만들고, 앞으로 나아갑니다.
스타일시트를 사용하여 웹 표준을 준수하면 더 나은 웹 사이트를 만들 수 있습니다.그리고 페이지에 있는 것들이 여러분이 원하는 방식이 아니기 때문에 도움이 필요할 때, CSS를 본체와 반대로 머리에 배치하면 여러분 자신과 여러분이 도움을 요청하는 누구에게나 훨씬 더 나은 문제 해결을 할 수 있습니다.
다른 점은.페이지의 로딩은 비동기적이기 때문에 외부 스타일시트가 있으면 링크 태그에 도달하면 cs 파일을 바로 로딩하기 때문에 머리 상단에 두는 것이 좋습니다.
어떤 차이가 있을까요?
찬성: 특정 장소에 특정 속성을 적용하는 것이 더 쉬운 경우가 있는데, 특히 코드가 즉시 생성되는 경우(예: php를 통해 구축되고 동적으로 크기가 지정된 목록은 각각 고유한 클래스가 필요함)...예를 들어 변환에 대한 항목 타이밍 등).
반대: 약간 느리지만 먼 미래에 언젠가는 효과가 없을 수도 있습니다.
그것에 대한 저의 일반적인 의견: 그럴 필요는 없지만, 꼭 해야 한다면 잠을 설치지 마세요.
퍼팅.<style>본체는 모든 현대 브라우저와 잘 작동합니다.
저는 이베이에서 이것을 사용하고 있었습니다.
효과가 있으면 발로 차면 안 돼요.
언급URL : https://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body
'programing' 카테고리의 다른 글
| 특정 SQL 오류 코드를 가져오거나 PHP의 PDO로 잠금 시간 초과를 식별하시겠습니까? (0) | 2023.09.09 |
|---|---|
| CSS 자식 대 후손 선택기 (0) | 2023.09.09 |
| GitHub에서 분기 시각화 (0) | 2023.09.09 |
| ajax 호출 후 'like' 버튼 렌더링 (0) | 2023.09.09 |
| Visual Studio 2010용 OpenCV-2.3 설정 (0) | 2023.09.09 |