HTML 웹 페이지에서 CSS 및 Javascript 코드를 어디에 넣어야합니까?
웹 페이지를 디자인 할 때 다음 코드를 어디에 넣어야합니까?
<link rel=stylesheet type="text/css" href="css/layout.css">
해야 내가 그것을 넣어 <head>또는 나는 그것을 넣어해야 <body>? 다음 질문을 명확히하십시오.
<head>HTML 코드 안이나 다른 곳에 넣으면 어떤 차이가 있습니까?- 두 개의 CSS (또는 Javascript) 파일이있는 경우 어떻게합니까? 다른 파일 앞에 하나의 파일 만 포함 할 수 있으므로 웹 브라우저에서 웹 페이지를 표시하는 데 사용할 파일은 무엇입니까?
제 생각에 가장 좋은 방법은 헤더에 CSS 파일을 배치하는 것입니다.
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
닫는 </body>태그 앞의 자바 스크립트 파일
<script type="text/javascript" src="script.js"></script>
</body>
또한 두 개의 CSS 파일을 말한 것처럼 가지고 있다면. 브라우저는 둘 다 사용합니다. 선택자가있는 경우, 즉. .content {}두 CSS 파일에서 동일했던 브라우저는 첫 번째 속성의 유사한 속성을 두 번째 속성의 속성으로 덮어 씁니다. 그게 말이된다면.
Yahoo!에서 성능을 조사하는 동안 스타일 시트를 문서 HEAD로 이동하면 페이지가 더 빨리로드되는 것처럼 보입니다. HEAD에 스타일 시트를 넣으면 페이지가 점진적으로 렌더링 될 수 있기 때문입니다.
성능에 관심이있는 프런트 엔드 엔지니어는 페이지가 점진적으로로드되기를 원합니다. 즉, 브라우저가 가능한 한 빨리 모든 콘텐츠를 표시하기를 원합니다. 이는 콘텐츠가 많은 페이지와 인터넷 연결 속도가 느린 사용자에게 특히 중요합니다. 진행률 표시기와 같은 시각적 피드백을 사용자에게 제공하는 것의 중요성은 잘 연구되고 문서화되었습니다. 우리의 경우 HTML 페이지가 진행률 표시기입니다! 브라우저가 페이지를 점진적으로로드 할 때 헤더, 내비게이션 바, 상단의 로고 등은 모두 페이지를 기다리는 사용자에게 시각적 피드백 역할을합니다. 이것은 전반적인 사용자 경험을 향상시킵니다.
문서 하단에 스타일 시트를 배치 할 때 발생하는 문제는 Internet Explorer를 포함한 많은 브라우저에서 점진적 렌더링을 금지한다는 것입니다. 이러한 브라우저는 스타일이 변경 될 경우 페이지의 요소를 다시 그릴 필요가 없도록 렌더링을 차단합니다. 사용자가 빈 흰색 페이지를보고 멈춰 있습니다.
HTML 사양은 스타일 시트가 페이지의 HEAD에 포함되어야한다고 명확하게 명시합니다. "A와 달리 [LINK]는 여러 번 나타날 수 있지만 문서의 HEAD 섹션에만 나타날 수 있습니다." 대안, 빈 흰색 화면 또는 스타일이 지정되지 않은 콘텐츠의 플래시는 위험 할 가치가 없습니다. 최적의 솔루션은 HTML 사양을 따르고 문서 HEAD에 스타일 시트를로드하는 것입니다.
맨 아래에 스크립트 넣기
스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. HTTP / 1.1 사양은 브라우저가 호스트 이름 당 2 개 이하의 구성 요소를 병렬로 다운로드하지 않도록 제안합니다. 여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드를 동시에 수행 할 수 있습니다. 그러나 스크립트가 다운로드되는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다.
어떤 상황에서는 스크립트를 맨 아래로 이동하기가 쉽지 않습니다. 예를 들어 스크립트가 document.write를 사용하여 페이지 콘텐츠의 일부를 삽입하는 경우 페이지에서 아래로 이동할 수 없습니다. 범위 지정 문제도있을 수 있습니다. 대부분의 경우 이러한 상황을 해결하는 방법이 있습니다.
종종 나타나는 대안은 지연된 스크립트를 사용하는 것입니다. DEFER 속성은 스크립트에 document.write가 포함되어 있지 않음을 나타내며 렌더링을 계속할 수있는 브라우저에 대한 단서입니다. 불행히도 Firefox는 DEFER 속성을 지원하지 않습니다. Internet Explorer에서 스크립트는 지연 될 수 있지만 원하는만큼 지연되지는 않습니다. 스크립트를 연기 할 수있는 경우 페이지 하단으로 이동할 수도 있습니다. 그러면 웹 페이지가 더 빨리로드됩니다.
- 스타일 시트 링크와 자바 스크립트 는 형식에 따라 지정되므로
<script>에 넣어야합니다<head>. 그러나 일부는 javascript를<script>본문 하단에 배치하여 페이지 콘텐츠가를 기다리지 않고로드<script>되지만 다른 리소스가로드 될 때까지 스크립트 실행이 지연되기 때문에 이것은 절충안입니다. - CSS는 링크 된 순서 (역방향)로 우선합니다. 첫 번째는 두 번째로 재정의되고 세 번째로 재정의됩니다.
<head>사양이하는 일이기 때문에 CSS를 넣어야 합니다.
CSS 파일이 두 개 이상있는 경우 코드에 넣은 순서대로로드됩니다. 두 번째 CSS 파일에 스타일이 있으면 첫 번째 CSS 파일의 스타일을 덮어 씁니다. 그것은 의도적으로 일어날 것입니다. 따라서 Cascading Style Sheets.
대부분의 브라우저는 여전히 머리에서 CSS 파일을 효과적으로 렌더링하지만 코드가 의미 상 정확하지 않습니다.
문서의 어디에서나 JavaScript 파일 링크를 사용할 수 있습니다. <head>페이지의 일부 를 사용하는 이유 와 페이지의 다른 곳 에서 사용하는 이유가 다릅니다 . (예를 들어 Google 분석 코드는 하단에 배치하도록 지시합니다.)
내 생각에 가장 좋은 방법은 1) 헤드 태그 사이의 헤더 부분에 CSS 파일을 배치하는 것입니다. 이유는 첫 페이지에 CSS가 필요한 뷰를 보여주기 때문입니다 .2) 모든 js 파일은 본문 닫기 태그 앞에 배치해야합니다. 이유는 모든 구성 요소 표시 js가 적용될 수 있기 때문입니다.
<head>에 넣어야합니다. 나는 일반적으로 JS 위에 스타일 참조를 배치하고 일부가 다른 것에 의존하는 경우 JS를 위에서 아래로 정렬하지만 페이지가 렌더링되기 전에 모든 참조가로드된다고 믿습니다.
CSS 포함은 스크립트가 포함 head되기 전에 있어야합니다 js. 자바 스크립트는 어디든 갈 수 있지만 실제로 파일의 기능이 위치를 결정할 수 있습니다. 페이지 콘텐츠를 작성하면 머리에 올려 놓으십시오. 이벤트 또는 추적에 사용되는 경우</body>
에 대해서 <link />그리고 <style />당신은 선택의 여지가 없어, 그들은 해야한다 에있을 <head />(섹션 하나 와 두 ).
에 관해서 <script />는 수 모두를 표시 <head />하고 <body />(참조 세 ), 일반적으로는 가장 좋은 방법은에 넣어하는 것입니다 <head />그들은 정말하지 않기 때문에 ( "내용"사용자가 화면에서 보는 것입니다) "내용", 그들은 뭔가 더있는 " "컨텐츠"에서 작동합니다.
W3C의 HTML4 사양 FTW!
그리고 호출 할 .css 또는 .js 파일이 두 개 이상있는 경우 차례로 포함하거나 다음을 수행하십시오.
<head>
<link href="css/grid.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>
</head>
내 연구에 따라 CSS 장소에서 항상 .like :-
<head>
<link href="css/grid.css" rel="stylesheet" />
</head>
그리고 스크립트의 경우 :-
- If inside the script document. write present then it will be in the head tag.
- If script contain DEFER attribute, BECAUSE defer downloaded all in parallel
'Program Tip' 카테고리의 다른 글
| 축 제목에 그리스 문자 추가 (0) | 2020.12.11 |
|---|---|
| Google + 1 버튼에 맞춤 이미지를 사용 하시겠습니까? (0) | 2020.12.11 |
| Chrome 브라우저에서 deviceready 이벤트를 시작하는 방법 (phonegap 프로젝트 디버그 시도) (0) | 2020.12.11 |
| mongodb 메모리 사용을 제한하는 옵션이 있습니까? (0) | 2020.12.11 |
| C ++ 11에서 명시 적으로 삭제 된 멤버 함수를 사용하여 복사 할 수없는 기본 클래스에서 상속 할 가치가 있습니까? (0) | 2020.12.11 |