프론트엔드 질문 모음집

Q. XHTML / HTML 차이

<img src="#"></img> <!--HTML-->
<img src="#"/>  <!--XHTML-->

Q. !DOCTYPE html 사용시 문제점

👉 IE 레이아웃 깨짐

Q. Javascript 프리징 현상 발생은 왜?

👉 script가 먼저 읽혀서 body 밑에 script 코드를 넣으면 해결됨

Q. Jq 체이닝?

👉 원래 있던 객체를 동적으로 바꾸는 것

Q. Ajax 사용시 단점

👉 뒤로가기 시 오류가 나는 경우, 비동기로 통신했을 때 오류가 날 수 있음,

SEO (search engine optimization) 가 까다롭다.

Q. `forEach`, `map` 차이점

👉 배열을 이용하는 forEach는 원본을 변형시킬수 있음, filter 사용 불가, map은 새로운 배열로 반환 가능

Q. float을 해제하지 않을 경우 발생하는 문제?

👉 브라우저가 요소의 높이 값을 인지하지 못한다.

• 해지하는 방법
  1. float된 요소의 부모태그에 강제로 높이 값을 지정해줍니다.
  (단점 : 반응형시 자동 높이 값 설정 불가)
  2. float된 요소의 부모태그에 overflow:hidden을 적용해줍니다.
  (단점 : 해당 요소 안의 컨텐츠를 박스 외부로 표현해줄 수 없음)
  3. float된 요소의 부모태그에 overflow:auto를 적용해줍니다.
  (단점 : 특정 브라우저에서 스크롤 바가 표시 됨)
  4. float된 요소의 부모태그에 float을 또 설정해줍니다.
  (단점 : 가운데 배치 불가능)
  5. float된 요소의 다음에 나오는 태그에 clear:both를 지정합니다.
  (단점 : clear:both가 적용된 요소에는 margin-top 적용 불가)
  6. float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해줍니다. 권장

Q. Css 애니메이션과 jq 애니메이션의 차이

👉 적용 범위가 CSS가 더 넓다.

Q. SetTimeOut, setInterval 중첩을 해결하는 방법

👉 <meta http-equiv=refresh content="1, url"/> 로 해결 가능