[코드스테이츠/20DAY] 기술면접 준비

🌊 기술면접 준비

: 하나 이상의 질문을 고른 후 질문에 대한 답을 글로 작성한다.

 

내가 고른 질문

 

Q. event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요

A.

event.preventDefault() 메서드는 이벤트에 대한 기본 동작을 실행하지 않도록 합니다.

예를 들어 회원가입을 할 때 양식에 맞지 않는 문자를 키보드로 입력할 때 입력이 되지 않게 하거나 a태그나 form 태그 안에 있는 submit 버튼을 클릭하여도 페이지가 이동하거나 새로고침 되지 않게 합니다.

 

Q. 왜 사용 하는 지?

A.

a태그나 button 또는 input type submit은 유용한 기능을 가지고 있지만 그 의도로 사용하지 않을 때 불편함을 야기할 수 있습니다.

a태그는 href 속성에 적힌 주소로 이동하는 특성을 가지고 있지만 event.preventDefault를 이용해 click 이벤트를 사용할 수 있게 되고

submit은 form태그 안의 내용은 전송되지만 새로고침이 되지 않아 해당 페이지의 reroad를 방지할 수 있습니다. 

 

Q. event.stopPropagation()와의 차이점은?

A.

이벤트를 막는 또 다른 메서드인 event.stopPropagation()는 이벤트 버블링을 막습니다.

 

Q.이벤트 버블링이란?

A. 

특정 태그 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 부모 태그에게 전달되어 가는 특성을 의미합니다. 

stopPropagation은 이 것을 방지합니다.

 

정리하자면,

event.preventDefault는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드이며 event.stopPropagation()는 상위 요소에 이벤트 전달을 막는다는 차이가 있습니다. 

 

 

Q. id 속성과 class 속성의 차이에 대해서 설명해주세요.

A. 

둘 다 태그에 네이밍을 하지만,

ID는 태그에 유일한 이름을 지정하고 싶을 때 사용하며, class는 같은 유형으로 반복되는 태그들을 분류할 때 사용합니다.

같은 유형의 태그들에게 같은 class를 지정하여 css로 한 번에 디자인할 수 있습니다.

 

Q. CSS에서의 차이는?

A.

css에서 id를 호출할 땐 #을 붙이고, class를 호출할 때는 .를 붙여줍니다. css에서는 id로 지정한 코드가 우선됩니다.

Q. 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?

div.author-container
+--------+------+------+
|  글쓴이 | 빈칸  | 공유 |
+--------+------+------+

 

A.

float을 사용하여 정렬 후 가운데에 마진값을 주는 등 여러가지 방법이 있겠지만 가장 간단한 방법은 css flex를 사용한 후 justify-content 속성을 이용하는 것이라고 생각합니다. 

div.author-container { display: flex; justify-content: space-between; }