기초 HTML

Jun·2021년 6월 24일
0

link 태그는 외부 소스를 가져올때 주로 사용된다. 주로 외부스타일 시트랑 연결될떄 많이 사용된다.

<head>
  <link rel="stylesheet" href="mystyle.css" /> 
<head>

HTML은 위에서 한줄한줄 읽어 렌더링이되는데 head 태그가 맨위에 있는 이유이고 link태그 가 head 태그 안에 있는 이유이다.
link 태그는 외부 소스를 가져올때 주로 사용된다. 주로 외부스타일 시트랑 연결될때 많이 사용된다.
head 태그 가 맨위에 있어서 HTML이 실행이될때 head 태그 를 읽어 스타일이 지정된 상태로 한번 렌더링이 된다. link 태그 가 만약 코드의 마지막줄에 있다고 가정해보면 HTML 이 처음 한번 렌더링이되고 마지막줄에 있는 link 태그 를 읽고 스타일을 적용하여 화면이 깜빡거리며 다시 리렌더링이된다. 두번 렌더링이되는 것 즉 비효율적인 것을 막기위해서 head 태그 안에 넣어준다.

Javascript script 태그를 body 태그가 끝나기 직전에 위치시키는 이유

브라우저 동작방식

HTML을 읽기 시작한다.
HTML을 파싱한다.
DOM 트리를 생성한다.
Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되고
Display에 표시한다

결론부터 말하지면 웹 성능을 향상시키기 위해서다.
HTML은 위에서부터 아래로 차례대로 읽어 실행이된다. 차례로 실행될때 script 태그를 만나면 HTML 실행을 멈추고 javscript 코드를 실행하게되는데 이는 렌더링의 속도를 늦추는 이유이다. 또 다른 이유는 javscript는 DOM을 사용하여 새로운 기능을 웹페이지에 실행하는데 만약 script태그를 body 마지막에 사용하지 않고 DOM이 javscript 실행위한 준비가 되지않을때 오류를 발생 할 수 있다.

<script> <script async> <script defer> 태그

async 는 script 파일들을 다운로드 한 동시에 렌더링한후 HTML 을 읽어오지만 defer은 script 파일이 다운로드가 완료가 되어도 바로 렌더링 되지않고 HTML을 다 읽어온 후에 실행이된다.

시맨틱 태그(sementic tag)란?

sementic 의 사전적 의미로 의미론적인 이라는 뜻을 갖고있다 의미론적이란 어떠한 기호에 대해서 의미를 파악하는 것 인데 sementic tag 의 뜻을 보면 tag에 의미가 있는 것 이라고 생각하면 될 것같다. 태그의 종류는

<html>, <head>, <body>, <p>, <b>,<div>,<span>

등 정말 다양하다.

<div>, <span> 

을 사용하면 어떠한 것을 묶기 위해 사용되었다는 것만 알고 태그만 봐서는 의미를 파악하기 어렵다. 하지만

<header>,<nav>,<section>,<footer> 

이러한 태그를 보면 내용을 보지않고 태그만 봐도 의미가 한번에 파악된다. 이러한 태그들을 시맨틱 태그 라고 한다.

0개의 댓글