[면접대비]퍼블리셔 면접 예상질문

전유덕·2024년 8월 31일
1

1. Doctype에 대해서 아시는 대로 설명하라

Doctype은 HTML 문서의 유형을 명시하는 선언입니다. 브라우저에게 문서가 어떤 버전의 HTML을 사용하는지를 알려줍니다. HTML5에서는 <!DOCTYPE html>을 사용하며, 이 선언을 통해 브라우저가 문서를 표준 모드로 렌더링하게 됩니다.

2. Doctype을 안 썼을 때는 어떻게 되는가?

Doctype을 명시하지 않으면 브라우저는 문서를 쿼크 모드(Quirks mode)로 렌더링할 수 있습니다. 이 모드에서는 표준과 다른 방식으로 HTML과 CSS를 해석하여, 특히 구형 브라우저와의 호환성을 유지하려고 합니다. 결과적으로 디자인이 예상과 다르게 표시될 수 있습니다.

3. 쿼크모드? 표준모드?

  • 쿼크 모드(Quirks mode): 웹 페이지가 구형 브라우저와의 호환성을 위해 비표준 방식으로 렌더링되는 모드입니다.
  • 표준 모드(Standards mode): 웹 페이지가 W3C 표준을 준수하여 렌더링되는 모드로, 현대 브라우저에서 표준에 따라 HTML과 CSS를 해석합니다.

4. 웹표준은 무엇이며 웹접근성은 무엇인가?

  • 웹표준(Web Standards): 웹 개발 시 HTML, CSS, JavaScript 등 여러 기술의 표준을 의미하며, W3C와 같은 표준화 기구에서 정의합니다.
  • 웹접근성(Web Accessibility): 장애가 있는 사람들을 포함하여 모든 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 보장하는 방법과 원칙입니다. WCAG(Web Content Accessibility Guidelines)가 대표적인 가이드라인입니다.

5. 시멘틱태그는 무엇이며 왜 사용하는가?

시멘틱 태그(Semantic Tag)는 HTML5에서 추가된 의미론적인 태그입니다. 예를 들어, <header>, <footer>, <article>, <section>과 같은 태그들이 있습니다. 이러한 태그를 사용하면 코드의 가독성이 높아지고, 검색 엔진 최적화(SEO) 및 접근성 향상에 도움이 됩니다.

6. SEO는 무엇인가?

SEO(Search Engine Optimization)는 검색 엔진 최적화를 의미하며, 웹 페이지가 검색 엔진 결과에서 상위에 표시되도록 하는 다양한 기법을 말합니다. 키워드 사용, 메타 태그 최적화, 시멘틱 마크업 사용 등이 SEO의 중요한 요소입니다.

7. UI가 무엇인가?

UI(User Interface)는 사용자가 웹 사이트나 애플리케이션과 상호작용하는 인터페이스를 의미합니다. UI는 버튼, 메뉴, 폼과 같은 요소로 구성되며, 사용자가 직관적이고 효율적으로 시스템을 사용할 수 있도록 설계되어야 합니다.

8. Interface란?

인터페이스(Interface)는 두 개체 간의 경계를 의미하며, 컴퓨터 시스템에서는 사용자와 시스템, 혹은 시스템 간의 상호작용을 가능하게 하는 매개체를 의미합니다. 사용자 인터페이스(UI)와 애플리케이션 프로그래밍 인터페이스(API) 등이 있습니다.

9. API란?

Application Programming Interface의 약자로 응용프로그램들이 서로 통신하여 데이터를 교환할 수 있도록 하는 일종의 규칙입니다.

10. float를 clear하는 방법 대표적으로 2가지만 말해달라.

Clearfix 사용: 부모 요소에 clearfix 클래스를 추가하여 CSS로 ::after 가상 요소를 사용해 플로팅 요소를 클리어합니다.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

CSS overflow 속성 사용: 부모 요소에 overflow: auto 또는 overflow: hidden을 설정하여 내부의 플로팅 요소를 감쌉니다.

.clearfix {
    overflow: auto;
}

11. float clear하는 각각의 장단점은?

  • Clearfix 사용
    장점: HTML 구조를 변경하지 않고 CSS만으로 해결 가능.
    단점: CSS의 가상 요소를 사용하기 때문에 가독성이 떨어질 수 있음.
  • overflow 속성 사용
    장점: 간단하고 이해하기 쉬움.
    단점: 예상치 못한 스크롤바가 나타날 수 있음(특히 overflow: auto 사용 시).

12. ul, ol의 차이는?

  • <ul> (Unordered List): 순서가 없는 목록을 만듭니다. 보통 점(bullet)으로 표시됩니다.
  • <ol> (Ordered List): 순서가 있는 목록을 만듭니다. 숫자나 알파벳 등으로 항목을 표시합니다.

13. dl, dt, dd는?

  • <dl> (Definition List): 정의 목록을 나타내는 태그로, 용어와 정의 쌍을 포함합니다.
  • <dt> (Definition Term): 정의할 용어를 나타냅니다.
  • <dd> (Definition Description): 용어의 정의를 나타냅니다.

14. strong, em, b 차이는?

  • <strong>: 중요성을 나타내는 태그로, 스크린 리더는 강조하여 읽습니다.
  • <em>: 강조를 나타내는 태그로, 스크린 리더는 이탤릭체로 읽습니다.
  • <b>: 단순한 굵은 글씨를 만듭니다. 의미론적 강조가 없습니다.

15. figure태그 설명?

  • <figure> 태그는 독립적인 콘텐츠, 예를 들어 사진, 다이어그램, 일러스트레이션 등을 감싸는 컨테이너 역할을 합니다. <figcaption> 태그와 함께 사용하여 설명을 제공할 수 있습니다.

16. CSS 전처리기란?

CSS 전처리기는 CSS 코드를 더 효율적으로 작성할 수 있도록 도와주는 도구입니다. SASS, LESS, Stylus가 대표적이며, 변수, 중첩, 믹스인 등의 기능을 제공합니다.

17. MDN 사이트에 대한 설명

MDN(Mozilla Developer Network)은 웹 개발자들이 참고할 수 있는 웹 기술에 대한 종합적인 문서화 사이트입니다. HTML, CSS, JavaScript뿐만 아니라 최신 웹 API와 같은 다양한 웹 기술에 대한 자료를 제공합니다.

18. Button태그의 Default type은?

<button> 태그의 기본 타입은 "submit"입니다. 폼 안에서 이 버튼을 클릭하면 폼이 제출됩니다.

19. Button 태그의 Default type과 <input type="button"> 과의 차이점은?

<button>은 기본적으로 type="submit"이며, 폼 제출 기능을 가집니다.
<input type="button">은 기본적으로 버튼 기능만 가지며, 폼 제출과는 무관합니다.

20. 문장에 취소선을 넣고 싶을 때 어떤 태그를 사용하는가?

<s> 또는 <del> 태그를 사용하여 취소선을 표시할 수 있습니다.

21. 밑줄 넣는 태그는?

<u> 태그를 사용하여 밑줄을 넣을 수 있습니다.

22. section 태그와 article 태그의 차이점을 설명해달라

  • <section>: 웹 페이지의 여러 부분(예: 소개, 서비스, 연락처)을 나누는 큰 그룹으로 여러 주제로 나누기 위해 사용합니다.
  • <article>: 독립적으로 존재할 수 있는 하나의 콘텐츠 덩어리로 블로그 글, 뉴스 기사 등 독립적인 내용을 나타낼 때 사용합니다.

23. CDN이란?

CDN(Content Delivery Network)은 웹 콘텐츠를 전달하기 위해 전 세계 여러 서버에 콘텐츠를 분산 저장하고, 사용자에게 가장 가까운 서버에서 콘텐츠를 제공하는 네트워크 시스템입니다.

24. CDN 방식이 빠른가? 직접 로드가 빠른가? 혹은 케바케?

일반적으로 CDN 방식이 빠릅니다. CDN 서버가 사용자와 지리적으로 더 가깝고, 여러 사용자가 콘텐츠를 공유하기 때문에 캐싱 효과가 있습니다. 하지만 상황에 따라 다를 수 있으며, 특정 경우에는 직접 로드가 더 빠를 수도 있습니다.

25. 가상요소와 가상클래스에 대해서 설명해달라

  • 가상요소(Pseudo-element): 특정 요소의 일부를 선택하고 스타일을 적용합니다. 예: ::before, ::after.
  • 가상클래스(Pseudo-class): 요소의 특정 상태를 선택합니다. 예: :hover, :focus.

26. 가상요소 : 한 개와 :: 두 개의 차이는?

:는 가상 클래스, ::는 가상 요소를 의미합니다. HTML5 표준에서는 가상 요소에 대해 ::을 권장합니다.

27. CSS 적용 우선순위를 말해달라

CSS 우선순위는 다음과 같습니다:

  • 인라인 스타일
  • ID 선택자
  • 클래스, 속성 선택자, 가상 클래스
  • 태그 선택자
  • 전체 선택자(*), 상위 선택자(~, + 등)

28. 바닐라JS란?

바닐라JS(Vanilla JS)는 순수한 자바스크립트를 의미합니다. 라이브러리나 프레임워크 없이 작성된 자바스크립트 코드입니다.

29. 바닐라JS의 장점, 단점

  • 장점: 가볍고 빠르며, 브라우저 호환성이 높음.
  • 단점: 복잡한 기능 구현 시 코드가 길어지고 유지보수가 어려울 수 있음.

30. JQuery란?

JQuery는 자바스크립트 라이브러리로, DOM 조작, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 수행할 수 있게 해줍니다.

31. JQuery의 장점, 단점

  • 장점: 사용이 쉽고, 브라우저 호환성이 좋으며, 플러그인 생태계가 풍부함.
  • 단점: 최신 웹 표준을 완벽히 지원하지 않으며, 파일 크기가 크고, 최근에는 Vanilla JS와 최신 프레임워크로 대체되는 추세.

32. Plugin이란?

플러그인은 특정 기능을 쉽게 추가할 수 있도록 만들어진 작은 코드 모듈입니다. 예를 들어 JQuery 플러그인은 슬라이더, 모달 등 다양한 기능을 손쉽게 구현할 수 있습니다.

33. Plugin의 장점, 단점

  • 장점: 기능 추가가 용이하며, 코드 재사용이 가능함.
  • 단점: 플러그인 간 충돌이 발생할 수 있으며, 페이지 로딩 속도에 영향을 줄 수 있음.

34. 크로스브라우징이란?

크로스 브라우징(Cross-Browsing)은 웹 페이지가 다양한 브라우저에서 동일하게 작동하고 표시되도록 하는 기법입니다.

35. 이미지 스트라이프란?

  • 정의: 스트라이프는 여러 개의 작은 이미지를 하나의 큰 이미지 파일에 배열하여, CSS와 JavaScript를 통해 필요한 부분만을 화면에 표시하는 기법입니다.
  • 목적: 웹 페이지의 로딩 속도를 개선하고 서버 요청을 줄이기 위해 사용됩니다. 여러 개의 이미지 파일을 개별적으로 로드하는 대신, 하나의 큰 파일에서 필요한 부분만을 표시합니다.
  • 주의사항: img 태그가 아닌 css의 background-image로 처리되기 때문에 alt 속성을 지정해줄 수 없습니다. 따라서 아이콘, 로고와 같이 의미상 크게 중요하지 않을 때 사용하는 것이 좋습니다.

36. 이미지 스트라이프의 장점, 단점

  • 장점: 여러 개의 작은 이미지를 별도로 요청하는 대신, 하나의 큰 이미지 파일을 요청함으로써 서버 요청 횟수를 줄일 수 있고 이 결과로 로딩 속도 개선의 효과를 기대할 수 있습니다.
  • 단점: 포함된 이미지 개수가 늘어남에 따라 스프라이트 자체의 용량이 커질 수 있고 position을 사용하기 때문에 이미지의 정확한 크기와 위치를 알고 있어야 합니다.

37. script를 로드할 때 defer, async는 각각 무엇을 나타내는가?

  • defer
  1. 의미: 스크립트가 페이지의 HTML 문서가 완전히 파싱된 후에 실행되도록 합니다.
  2. 작동 방식: 스크립트는 HTML 문서의 로딩과 동시에 다운로드되지만, 문서 파싱이 완료된 후에 실행됩니다. 이 속성은 스크립트가 문서의 나머지 부분이 로드되고 난 후에 실행되도록 보장합니다.
    <script> 태그에 defer 속성이 적용된 모든 스크립트는 순서대로 실행됩니다. 즉, HTML 문서에 나열된 순서대로 실행됩니다.
  • async
  1. 의미: async 속성은 스크립트가 페이지의 HTML 문서가 로드되는 동안 비동기적으로 다운로드되고 실행되도록 합니다.
  2. 작동 방식: 스크립트는 HTML 문서와 동시에 다운로드되며, 다운로드가 완료되는 즉시 실행됩니다. 여러 개의 async 스크립트가 있을 경우, 실행 순서는 다운로드 완료 순서에 따라 다를 수 있습니다. 즉, 문서에서 나열된 순서와는 무관하게 실행됩니다.

38. 비동기 통신이란?

비동기 통신은 요청이 완료될 때까지 기다리지 않고, 다음 작업을 진행하며, 응답이 도착하면 콜백 함수가 실행되는 방식의 통신입니다.

39. AJAX란?

AJAX (Asynchronous JavaScript and XML)는 웹 페이지를 새로고침하지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있는 기술입니다. AJAX를 사용하면 웹 페이지의 일부분만을 업데이트할 수 있어, 사용자 경험을 개선하고, 웹 애플리케이션의 응답성을 높일 수 있습니다. AJAX는 비동기적으로 서버와 통신할 수 있기 때문에, 사용자 인터페이스(UI)를 보다 매끄럽고 빠르게 반응하도록 할 수 있습니다.

40. 슬라이드를 구현 코드

슬라이드 구현 코드는 여러 방식이 있으며, 간단한 JQuery 또는 JavaScript로 구현할 수 있습니다.

// JavaScript로 간단한 슬라이드 구현
let slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function showSlide(index) {
  slides[currentSlide].classList.remove('active');
  currentSlide = (index + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
}

document.querySelector('.next').addEventListener('click', function() {
  showSlide(currentSlide + 1);
});

document.querySelector('.prev').addEventListener('click', function() {
  showSlide(currentSlide - 1);
});

41. 제이쿼리의 attr(), prop()의 차이는?

  • attr()
  1. 용도: HTML 요소의 속성(attribute)을 가져오거나 설정합니다.
  2. 작동 원리: HTML 요소의 초기 속성을 읽거나 수정할 때 사용됩니다. 이 속성은 HTML 마크업에서 정의된 값입니다. 예를 들어, href, src, alt 등의 속성을 읽거나 설정할 때 사용됩니다.
  3. 특징: HTML 문서에서 초기값을 기준으로 설정됩니다. attr()는 속성을 문자열로 취급합니다. 동적 속성 값이 반영되지 않으며, 스크립트에서 변경한 값은 HTML 마크업에 반영되지 않습니다.
  • prop()
  1. 용도: HTML 요소의 프로퍼티(property)를 가져오거나 설정합니다.
  2. 작동 원리: DOM 요소의 JavaScript 프로퍼티를 읽거나 수정할 때 사용됩니다. 프로퍼티는 HTML 요소가 브라우저에서 렌더링된 후의 현재 상태를 나타냅니다. 예를 들어, checked, selected, disabled 등의 프로퍼티를 조작할 때 사용됩니다.
  3. 특징: 요소의 현재 상태를 기준으로 설정됩니다. prop()은 Boolean 값을 제대로 처리하며, 상태를 동적으로 변경할 수 있습니다. prop()은 프로퍼티 값을 직접 조작하므로, 브라우저에서의 실제 상태와 일치합니다.

42. 체크박스의 네모버튼을 커스텀으로 수정하고 싶다 어떻게 하는가?

체크박스를 숨기고, 레이블을 사용하여 스타일을 커스텀할 수 있습니다.

<input type="checkbox" id="customCheckbox" style="display:none;">
<label for="customCheckbox" class="custom-checkbox"></label>
.custom-checkbox {
  width: 20px;
  height: 20px;
  background: #ddd;
  display: inline-block;
  cursor: pointer;
}

#customCheckbox:checked + .custom-checkbox {
  background: #333;
}

43. 제이쿼리 선택자중 형제노드를 탐색하고 싶다 어떻게 하는가?

.siblings() 메서드를 사용하여 형제 노드를 탐색할 수 있습니다.

$('selector').siblings();

44. 제이쿼리 선택자중 부모선택자

.parent() 메서드를 사용하여 부모 노드를 선택할 수 있습니다.

$('selector').parent();

45. 제이쿼리 선택자중 자식선택자

.children() 메서드를 사용하여 자식 노드를 선택할 수 있습니다.

$('selector').children();

46. 제이쿼리 선택된 요소의 위치를 알고 싶다 어떻게 하는가?

.offset() 메서드를 사용하여 선택된 요소의 위치를 얻을 수 있습니다.

$('selector').offset();

47. 제이쿼리 e.preventDefault()란?

e.preventDefault()는 이벤트의 기본 동작을 막습니다. 예를 들어, 폼 제출을 막거나 링크 클릭 시 페이지 이동을 방지할 수 있습니다.

48. 버블링과 캡쳐링

  • 버블링 : 이벤트가 발생한 요소에서부터 시작하여, 그 요소의 상위 요소들로 전파되는 과정입니다. 즉, 이벤트는 가장 구체적인 요소(타겟 요소)에서 시작해 부모 요소, 조부모 요소 등을 거쳐 최상위 요소까지 올라갑니다.
  • 캡쳐링: 이벤트가 최상위 요소에서부터 시작하여, 타겟 요소까지 내려가는 과정입니다. 즉, 이벤트는 최상위 부모 요소에서 시작해 자식 요소들로 차례로 내려가면서 전파됩니다.
  • 방지: event.stopPropagation() - 이벤트가 발생한 요소에서부터 상위 요소로의 전파를 막습니다. 이 메서드를 호출하면, 현재 요소에서 이벤트가 처리된 후, 상위 요소로 이벤트가 전파되지 않습니다.

49. CSS keyframe을 사용하여 위아래로 움직이는 도형을 만들 수 있는가?

@keyframes moveUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.shape {
  animation: moveUpDown 2s infinite;
}

50. CSS로 세모는 어떻게 만드는가?

CSS에서 border 속성을 사용하여 삼각형을 만들 수 있습니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid black;
}

51. 자바스크립트 호이스팅?

자바스크립트에서 변수 선언과 함수 선언이 해당 범위의 최상단으로 끌어올려지는 동작을 말합니다.

52. 자바스크립트 ES6에서 많은 변화가 일어났는데 대표적으로 3가지만 말해달라

  • let과 const 키워드 추가
  • 화살표 함수(Arrow function) 추가
  • 템플릿 리터럴(Template Literal) 추가

53. var, let, const 차이는?

  • var: 중복 선언 가능, 재할당 가능. 호이스팅되어 초기화 전에는 undefined.
  • let: 중복 선언 불가능, 재할당 가능. 호이스팅되지만 선언 전에는 참조 불가.
  • const: 중복 선언 불가능, 재할당 불가능. 객체와 배열의 내용은 변경 가능. 호이스팅되지만 선언 전에는 참조 불가.

54. 한국에선 아직 최신 브라우저를 사용하지 않아 ES6에 대해 완벽한 지원이 안 되고 있다 어떻게 하면 좋을까?

Babel과 같은 트랜스파일러를 사용하여 ES6 코드를 ES5로 변환하여 브라우저 호환성을 확보할 수 있습니다.

55. CSS flex에 대해 설명하라

CSS Flexbox는 컨테이너 내의 아이템들을 배치하고 정렬하기 위한 1차원 레이아웃 모델입니다. 주로 수평 또는 수직 방향으로 아이템들을 쉽게 정렬할 수 있게 합니다.

56. 반응형웹이란? 적응형웹이란?

  • 반응형 웹(Responsive Web): 하나의 웹사이트가 다양한 화면 크기에 맞게 유동적으로 레이아웃을 조정하는 웹 디자인 방식입니다.
  • 적응형 웹(Adaptive Web): 특정 화면 크기 또는 디바이스에 맞춘 고정된 레이아웃을 사용하는 웹 디자인 방식입니다.

57. 반응형에서 중요한 건 무엇이라 생각하는가?

반응형 웹 디자인에서 중요한 것은 유연한 그리드 레이아웃, 유동적인 이미지 및 미디어, 그리고 적절한 미디어 쿼리 사용입니다.

58. meta태그는 무엇인가?

<meta> 태그는 HTML 문서의 메타데이터를 정의합니다. 예를 들어, 문서의 설명, 키워드, 작성자, 문자 인코딩 등을 지정할 수 있습니다.

59. 오픈그래프란(og)?

오픈그래프(Open Graph, OG)는 웹 페이지의 메타 정보를 제공하기 위한 프로토콜로, 웹 페이지를 소셜 미디어 플랫폼에서 공유할 때 어떻게 표시될지를 제어하는데 사용됩니다.

오픈그래프 메타 태그는 HTML 문서의 <head> 섹션에 추가되며, 소셜 미디어가 페이지를 공유할 때 다음과 같은 정보를 제공합니다:

  • og:title: 페이지의 제목을 설정합니다. 공유 시 제목으로 사용됩니다.
  • og:description: 페이지의 설명을 설정합니다. 공유 시 설명으로 사용됩니다.
  • og:image: 페이지에 대한 대표 이미지를 설정합니다. 공유 시 썸네일로 사용됩니다.
  • og:url: 페이지의 URL을 설정합니다. 공유 시 사용될 URL입니다.
  • og:type: 페이지의 콘텐츠 유형을 정의합니다. 예를 들어, website, article, video, 등으로 설정할 수 있습니다.
<head>
    <meta property="og:title" content="페이지 제목">
    <meta property="og:description" content="페이지 설명">
    <meta property="og:image" content="이미지 URL">
    <meta property="og:url" content="페이지 URL">
    <meta property="og:type" content="website">
</head>

60. 모바일에서 손가락으로 확대하는 것을 2배까지만 제한하고 싶다 어떻게 하는가?

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
</head>

태그를 사용하여 확대를 제한할 수 있습니다.

61. 팝업창을 구현해달라고 의뢰 받았다. 대략적으로 어떤 방식으로 구현이 되는지 말로 설명해달라.

팝업 창은 HTML과 CSS로 기본 구조와 스타일을 만들고, JavaScript 또는 JQuery를 사용하여 버튼 클릭 이벤트를 통해 팝업 창을 보여주거나 숨길 수 있도록 구현합니다.

62. 현재 한국 브라우저 점유율이 어떤지 파악하고 있는가?

  • 크롬
  • 엣지
  • 웨일
  • 사파리
  • 파이어폭스
profile
전유덕
zi존 개발자 되고싶다ㅏㅏ(훈수 대환영!)
이전 포스트

[React]페이지네이션

0개의 댓글