질문
" 일반적으로 CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? "
- 위 질문에 내가 생각한 질문의 요점 : HTML이 코드를 읽는 순서와, 사용자 경험을 위한 link 요소의 배치를 할 수 있는가?
답변
- html은 구조적 언어이다. 구조에 따라 담기는 정보가 다르다.
html은 head요소에 문서와 관련된 정보를 적기 때문에, HTML문서와 연결된 정보로서 연결되는 CSS 정보를 담은 link 요소를 자식요소로 넣어준다.- 또한 JS를 head안에 넣어줄 수 있지만 body의 맨 끝에 위치시키는 이유는, 동적 콘텐츠를 파싱하는데 로딩 시간이 더 길기 때문이다. 사용자에게 먼저 정보 콘텐츠를 제공해 정보를 읽는 사이 동적 콘텐츠를 불어올 수 있기 때문이다.
예상 꼬리 질문
1) CSS를 HTML에 연결하는 방법
- HTML태그 내에 직접 스타일 넣기
- style태그 사용 : HTML head 태그 안에 css코드 작성
- 파일분리 : CSS파일 분리해서 작성한 뒤 연결하기
2) 파일 분리 해서 연결하는 이유?
- 가독성 증가: 코드를 나누면 긴 페이지의 쪽과 테마를 나누는 효과로 가독성이 높아진다.
- 코드 재활용성 증가: 스타일에 대한 코드만 따로 다른 파일에 적용할 수 있다.
- 중복 코드 제거 : HTML 태그 내에 직접 스타일을 매번 넣어주는 것보다, 중복되는 코드를 묶음으로 만들어 한번에 적용 가능하다.
3) HEAD 요소의 역할 :
데이터의 데이터, '메타데이터'
메타데이터는 스타일, 스크립트, 브라우저의 탐색 및 렌더링을 도와줄 데이트 등 페이지에 대한 정보를 가진다.
4) BODY 요소의 역할 :
브라우저에서 시각적으로 보여지는 모든 정보는 body 요소 안에 작성된 것이다. (그 외 페이지의 정보에 관한 것들은 head요소에 포함된다.)
- title 태그 : 브라우저 제목표시줄이나 페이지 탭에 보이는 문저의 제목(후에 검색최적와에도 매우 중요한 요소가 되니 대충 지으면 안된다!)
- link 태그 : 현재 문서와 외부 리소스와의 관계를 명시하고 연결. 보통 CSS 를 첨부하는데 사용하지만, 웹 폰트, 아이콘 연결할 떄도 쓰일 수 있다.
- link 요소는 대표적인 빈요소로 닫힌 태그를 작성하지 않는다.
- attribue : rel: 연결된 문서와의 관계를 나타냄
href: 연결하려는 리소스의 URL 지정
5) script 태그 :
HTML문서 내에 JS파일을 첨부할때 사용한다.
사실, script 태그는 head안에 작성해도 된다.
하지만 body 안에 작성하는 것이 더 좋다고 하는 이유는 뭘까?
브라우저는 HTML의 문서의 위에서부터 아래로 한줄씩 읽어 내려가며 작동한다. HTML은 JS코드를 만나면,HTML 문서 읽기를 멈추고 JS코드를 읽기 시작한다. 따라서, head태그에서 script코드 로딩이 완료될 때까지 잡고 있으면 그만큼 사용자의 랜더링이 길어진다.
=> 사용자 경험에 유리하다.
- attribute : src : 연결하려는 리소스의 URL지정
답변전에 질문을 규정해라
"해당 질문이 HTML이 parsing하는 순서에 대한 질문이라고 이해했습니다."
Hello world!