[Section1 기술면접 준비] HTML, CSS, JavaScript, DOM

Professor Jeon 전교수님·2022년 7월 20일
0

HTML

  • 일반적으로 CSS를 불러오기 위해 < link> 요소를 < head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 < script> 요소를 < body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?

  • < li> 요소는 왜 < ul> 요소의 자식 요소여야만 하나요?

<li>는 list item이라는 뜻으로, 목록 안의 아이템 항목을 나타냅니다.
따라서 정렬되지 않은 목록이라는 뜻의 unordered list <ul>과 
정렬된 목록이라는 뜻의ordered list <ol>의 직계자식 요소일 수밖에 없습니다.
추가로, li의 순서를 바꿨을 때 목록의 의미가 바뀐다면 <ul>이 아니라 <ol>을 사용하는 편이 맞습니다.
  • id 속성과 class 속성의 차이에 대해서 설명해주세요.

CSS

  • CSS box model에 대해서 설명해주세요.
W3S에 따르면 CSS 박스모델은 레이아웃이나 디자인 얘기를 할 때 쓰이는데, 
기본적으로 모든 html 요소를 감싸고 있습니다. 
Margin, Border, Padding, Content 순서로 이뤄져 있는데, 
컨텐츠를 감싸고 있는 공간이라 볼 수 있습니다. 
그 공간에 선이나 배경색, 두께 등을 설정할 수 있고, 
이를 통해 CSS를 꾸미고 공간을 구획하는 등 다양하게 활용할 수 있는 기본적인 요소입니다.
  • 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
  • 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
    div.author-container
    +--------+------+------+
    | 글쓴이 | 빈칸 | 공유 |
    +--------+------+------+

JavaScript

  • 스코프에 대해서 설명해주세요.
  • 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
  • 원시 자료형과 참조 자료형에 대해서 설명해주세요.
원시자료형과 참조자료형은 변수에 할당할 수 있는 두 가지 데이터 타입을 말합니다.
첫째로 원시자료형은 String, boolean, Number 등 총 6가지의 타입을 가지고 있습니다.
그리고 하나의 변수에 하나의 데이터가 담긴다는 특징이 있어서, 
복사를 했을 때 원본의 value를 그대로 가져가기 때문에 복사본을 수정해도 원본에 영향을 끼치지 않습니다. 
둘째로 참조자료형은 원시자료형이 아닌 모든 자료형을 말합니다. 
객체, 배열, 함수 등이 있는데, 변수에 할당된 정보 데이터는 heap이라는 저장소에 저장되고, 
만약 참조자료형을 복사한다면 그 heap의 주소를 복사하는 것이므로 
변수를 수정했을 때는 원시자료형과 다르게 원본의 내용이 바뀝니다.
  • 얕은 복사와 깊은 복사에 대해서 설명해주세요.

DOM

  • innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.
  • event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.

0개의 댓글