티스토리 뷰
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 25일차입니다!
오늘은 7번째 커리큘럼의 10~12. script (1)~(2), noscript 에 대하여 공부했어요.
간만에 예전에 문득 궁금했었던 것에 대하여 알게 되었는데요.
이론상으로는 <link>나 <script> 태그는 <head> 안에 쓴다고 하지만 html 문서의 코드는 순차적으로 읽히기 때문에,
실무나 프로젝트를 할 때 <script> 태그를 <body> 태그 가장 아래에 쓴다고 배웠었어요.
그런데 <script>의 defer 속성을 사용하면 <script>를 <head>에 써도 에러가 나지 않을 수 있습니다!
<Today I Learned>
<script>
https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
🔸 script 속성 (1) : async, 스크립트의 비동기적 실행 여부, Boolean 값, src 속성 필수
🔸 script 속성 (2) : defer, 문서 파싱(전체 읽기) 후 작동 여부, Boolean 값, src 속성 필수
🔸 script 속성 (3) : src, 참조할 외부 스크립트 URL 삽입
🔸 script 속성 (4) : type, 기본값 = text/javascript 이기 때문에 JavaScript를 삽입할 경우에는 생략 가능
🔹 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연됨, 즉 <body> 내용을 모두 읽은 뒤에야 <script> 가 실행됨.
<noscript>
https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript
🔸 브라우저가 JavaScript를 지원하지 않을 때 <noscript> 내용을 화면에 보여줌
🔹 외부 페이지를 <iframe>으로 가져올 때, sandbox 속성을 추가하면 스크립트가 동작하지 않게 제어할 수 있음. 이 때 작성 중인 HTML 문서에 <noscript>를 작성해두면 현재 페이지에서 스크립트가 동작하지 않는다는 것을 알 수 있음.
학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/
한눈에 보는 HTML 요소(Elements & Attributes) 총정리
인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online
heropy.blog
강의 링크: https://bit.ly/3m0t8GM
'[패캠] 프론트엔드 패키지 > HTML' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 27회차 미션 (0) | 2020.11.14 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 26회차 미션 (0) | 2020.11.13 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션 (0) | 2020.11.11 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 23회차 미션 (0) | 2020.11.10 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 22회차 미션 (0) | 2020.11.09 |