기술면접학습
HTML
- 일반적으로 css를 불러오기 위해, <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script>요소를 <body>요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
- <li>요소는 왜 <ul> 요소의 자식요소여야만 하나요?
- id 속성과 class 속성의 차이에 대해서 설명해 주세요.
- 첫째로, <head>의 자식요소로 CSS 의 <link>를 가져오고 <body>요소가 끝나기 직전에 <script> 요소를 가져오는 것은 최적화된 웹 사이트를 구축하기 위함이다.
브라우저에서 HTML 데이터를 가져오면, 이 데이터는 분석 과정을 거치게 되는데, 이 과정을 파싱이라하고, 이결과를 화면에 그려주는 작업을 렌더링 이라고 한다. HTML 데이터는 위에서부터 읽어 내려가는데, HTML과 CSS를 먼저 렌더링하여 사용자에게 페이지 정보를 빠르게 전달하기 위함이다.
또한, 몇몇 브라우저에서는 스타일이 변경되면 페이지 요소를 다시 그리는 것을 막기위해 렌더링을 차단하는 경우가 있는데, 이 경우
문서 최하단에 stylescheet가 있다면 사용자는 빈화면을 보게된다.
<script>요소를 <body>요소가 끝나기 직전에 위치시키는 이유도 이와 비슷한데, 웹 브라우저는 파싱하는 과정에서 <script> 요소를 만나면 HTML의 파싱을 멈추고 <script>요소를 실행하므로, 상단에 위치할 경우 HTML 파싱을 막아서 렌더링을 방해하게 된다. 또, <script>를 하단에 위치 시키지 않으면, 브라우저가 전체 문서 파싱완료되기 전에 스크립트를 다운로드하므로, DOM을 핸들링하는 코드가 오류를 발생시킬 수 있다. 만약 <script>를 <head>에 넣어야 하는 경우엔 defer를 사용해서, 페이지가 모두 로드된 후에 외부 스크립트가 실행되도록 하여 이런 상황을 막을 수 있다.
- <li> 요소는 목록 아이템을 보여주기 위한 요소로서, 목록을 담는 ul 요소와 ol의 자식 요소로서 사용한다.
li 요소와 ul 요소의 의미에 맞게, 시멘틱하게 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다.
- ID속성은 단일하고 class 요소는 단일하지 않습니다.
하나의 html 요소에는 한개의 id만 적용될 수 있으며, 또 이 id는 한번만 사용이 가능합니다, 같은 id를 다른 요소에 사용할 수 없습니다.
하지만 class의 경우에는 중복 사용이 가능하여 여러 요소에 같은 class명을 줄 수 있으며, 한 요소에 여러가지 class명을 적용할 수도 있습니다.
안녕하세요, Blog 2022.06 ~