[프론트엔드 취업 필독] 프론트엔드 개발 면접 질문과 답변을 엄선

HTML

Doctype의 역할은 무엇인가요? 엄격 모드와 혼합 모드를 어떻게 구분하나요?

(1), <!DOCTYPE> 선언은 문서에서 <html> 태그 앞에 위치합니다. 이 문서를 구문 분석하는 데 사용할 문서 유형 사양을 브라우저의 구문 분석기에 알려줍니다.

(2), 엄격 모드 조판 및 JS 작업 모드는 브라우저에서 지원하는 최고 표준에서 실행됩니다.

(3) 혼합 모드에서는 페이지가 이전 버전과 호환되는 방식으로 표시됩니다. 사이트가 작동하지 않는 것을 방지하기 위해 이전 브라우저의 동작을 에뮬레이션합니다.

(4). DOCTYPE이 존재하지 않거나 형식이 올바르지 않아 문서가 혼합 모드로 표시됩니다.

인라인 요소란 무엇인가요? 블록 수준 요소란 무엇입니까? 공허한 요소는 무엇입니까?

(1) CSS 사양에서는 각 요소에 요소 유형을 결정하는 표시 속성이 있다고 규정합니다. 각 요소에는 기본 표시 값이 있습니다.

예를 들어 div의 기본 표시 속성 값은 "block"입니다. "블록 레벨" 요소
스팬의 기본 표시 속성 값은 "인라인" 요소인 "인라인"입니다.

(2) 인라인 요소에는 다음이 포함됩니다: a bspan img input select Strong(강조 톤)
블록 수준 요소에는 다음이 포함됩니다: div ul ol li dl dt dd h1 h2 h3 h4…p

(3) 잘 알려진 빈 요소:
<br> <img> <meta>
<base> ; <keygen> <source> <wbr>

link의 차이점은 무엇인가요?

(1) 링크는 XHTML 태그에 속하며 @import는 CSS에서 제공됩니다.

(2) 페이지가 로드되면 링크가 동시에 로드되고 @import가 참조하는 CSS가 대기합니다.

(3) 가져오기는 IE5 이상에서만 인식될 수 있으며 링크는 XHTML 태그이므로 호환성 문제가 없습니다.

(4) 링크 스타일 스타일의 가중치는 다음과 같습니다. @import의 가중치보다 높습니다.

브라우저 커널이 다릅니다 무엇인가요?

* IE 브라우저의 커널인 Trident, Mozilla의 Gecko, Chrome의 Blink(WebKit의 한 계열), Opera 커널은 원래 Presto와 이제 깜박임

일반적인 호환성 문제가 있습니까?

* png24비트 그림은 iE6 브라우저에서 배경으로 표시되며, 해결책은 PNG8로 만드는 것입니다.

* 브라우저의 기본 여백과 안쪽 여백은 다릅니다. 해결책은 통합을 위해 전역 *{margin:0;padding:0;}을 추가하는 것입니다.

* IE6 이중 여백 버그: 블록 속성 라벨이 떠 있고 가로 여백이 발생한 후 IE6에 표시되는 여백이 설정된 값보다 큽니다.

부동 IE에 의해 생성된 이중 거리 #box{ float:left; width:10px; margin:0 0 0 10px;}

이 경우 IE는 20px의 거리를 생성합니다. 컨트롤에 ---display:inline;을 추가하여 인라인 속성으로 변환합니다. (_이 기호는 ie6에서만 인식할 수 있습니다.)

점진적 인식 방식은 전체에서 부분을 점차 배제하는 방식입니다.

우선, "9" 표시를 영리하게 사용하면 IE 브라우저를 모든 상황에서 분리할 수 있습니다.
다음으로 다시 "+"를 사용하여 IE8을 IE7 및 IE6에서 분리하여 IE8이 독립적으로 인식되도록 합니다.

css
.bb{
background-color:#f1ee18;/*모든 인식*/
.Background-color:#00deff9; /*IE6, 7, 8 인식*/
+Background-color:#a200ff;/ *IE6, 7 인식*/
_Background-color:#1e0bd1;/*IE6 인식*/
}

* IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 가져올 수 있습니다.
getAttribute( ) 사용자 정의 속성을 얻으려면
Firefox에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결 방법: getAttribute()를 통해 사용자 정의 속성을 가져옵니다.

* IE에서는 짝수 객체에 x, y 속성이 있습니다. pageX , pageY 속성 없음
Firefox에서는 이벤트 개체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.

* 해결 방법: (조건부 설명) 단점은 IE 브라우저에서 추가 HTTP 요청이 추가될 수 있다는 것입니다.

* Chrome 중국어 인터페이스는 기본적으로 12px보다 작은 텍스트를 12px로 표시합니다.
이 문제는 CSS 속성 -webkit-text-size-adjust: none을 추가하여 해결할 수 있습니다.

호버 스타일은 이후에 표시되지 않습니다. 하이퍼링크가 방문됩니다. 클릭한 하이퍼링크 스타일에는 더 이상 hover 및 active가 없습니다. 해결 방법은 CSS 속성의 순서를 변경하는 것입니다.
L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}

html5의 새로운 기능은 무엇이고 어떤 요소가 제거되었나요? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?

* HTML5는 더 이상 SGML의 하위 집합이 아니며 주로 이미지 추가, 위치, 저장, 멀티태스킹 및 기타 기능에 관한 것입니다.

* 페인팅 캔버스
미디어 재생을 위한 비디오 및 오디오 요소
로컬 오프라인 저장소 localStorage는 데이터를 오랫동안 저장하며 브라우저를 닫은 후에도 데이터가 손실되지 않습니다.
SessionStorage 데이터는 브라우저를 닫은 후 자동으로 삭제됩니다. 더 나은 의미론 기사, 바닥글, 머리글, 탐색, 섹션과 같은 콘텐츠 요소
양식 컨트롤, 달력, 날짜, 시간, 이메일, URL, 검색
새로운 기술 webworker, websockt, Geolocation

* 제거된 요소

순수한 성능 요소: basefont, big, center,font, s, Strike, tt, u

사용성에 부정적인 영향을 미치는 요소: 프레임, 프레임셋, noframes

HTML5 새 태그 지원:

* 다음에 의해 생성된 태그를 통한 IE8/IE7/IE6 지원; document.createElement 메소드,
이 기능을 사용하면 이러한 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다.

브라우저가 새 태그를 지원한 후에는 태그의 기본 스타일도 추가해야 합니다.

* 물론 가장 좋은 방법은 성숙한 프레임워크를 직접 사용하는 것입니다. 가장 많이 사용되는 것은 html5shim 프레임워크입니다

구별 방법: DOCTYPE 선언의 새로운 구조적 요소와 기능적 요소

의미적 이해?

올바른 일에는 올바른 해시태그를 사용하세요!

HTML 의미론은 브라우저와 검색 엔진이 쉽게 분석할 수 있도록 페이지의 콘텐츠를 구조화하는 것입니다.

스타일 CCS 없이 문서 형식으로도 표시되며 읽기 쉽습니다.
검색 엔진 크롤러는 태그를 사용하여 개별 키워드의 맥락과 가중치를 결정하는데, 이는 SEO에 도움이 됩니다.
소스 코드를 읽는 사람들이 쉽게 읽고, 유지 관리하고, 이해할 수 있도록 웹사이트를 여러 덩어리로 쉽게 나눌 수 있도록 하세요.

HTML5 오프라인 저장소?

localStorage는 데이터를 장기간 저장하며, 브라우저를 닫은 후에도 데이터는 손실되지 않습니다.

sessionStorage 데이터는 브라우저를 닫은 후에 자동으로 삭제됩니다.

(작성) 의미를 설명하는 HTML 코드입니다.

(HTML5에 추가된 많은 새로운 태그(예: <article>, <nav>, <header> 및 <footer> 등))

의미론적 디자인 원칙을 기반으로 합니다.)

< header ">
< h1>Title< /h1>
< h2>웹 프론트엔드 기술에 집중< /h2>
< /div>

iframe의 단점은 무엇인가요?

*iframe은 메인 페이지의 Onload 이벤트를 차단합니다.

*iframe과 메인 페이지는 연결 풀을 공유하며 브라우저는 동일한 도메인의 연결을 제한하므로 페이지의 병렬 로딩에 영향을 미칩니다.
iframe을 사용하기 전에 이 두 가지 단점을 고려해야 합니다. iframe을 사용해야 하는 경우 javascript
를 통해 iframe에 src 속성 값을 동적으로 추가하는 것이 가장 좋습니다. 이렇게 하면 위의 두 가지 문제를 피할 수 있습니다.

쿠키, sessionStorage, localStorage의 차이점을 설명해 주세요.

쿠키는 브라우저와 서버 사이를 오가며 전달됩니다. sessionStorage와 localStorage에는 더 큰 저장 공간이 없습니다.
sessionStorage와 localStorage에는 더 풍부하고 사용하기 쉬운 인터페이스가 있습니다.
sessionStorage와 localStorage에는 독립적인 저장 공간이 있습니다.