인터뷰 중에 응시자의 Html / CSS 지식을 어떻게 평가할 수 있습니까? [닫은]

Html / CSS 직무에 참여하는 사람들의 능력을 평가하기 위해 좋은 인터뷰 질문을 찾으려고 노력하고 있지만 그 주제는 매우 광범위하며 다른 사람의 HTML / CSS 지식.

인터뷰 중에 응시자의 Html / CSS 능력을 평가하기 위해 어떤 종류의 질문을 할 수 있습니까?

이상적으로 몇 가지 질문을 한 다음 실제 시나리오를 놓고 싸우고 싶습니다.

HTML과 CSS는 몇 가지 이유로 인터뷰하기가 어렵습니다.

1. 예를 들어 프로그래밍 언어에 비해 너무 기본적입니다.

2. 그들은 직업의 상황에 크게 의존합니다. 예 :

   • 매우 빠르고 최적화 된 웹 사이트를 Google 규모로 만들면 작업에 대해 인터뷰 한 사람들이 CSS 스프라이트를 무시할 수 없습니다.

   • XHTML W3C 유효한 웹 사이트를 작성하는 경우, 응시자는 XHTML 1.0과 XHTML 1.1의 차이점 또는에 대한 필수 속성 <img/>등을 알고 있어야합니다 .

   • 해킹으로 가득 찬 끔찍한 웹 사이트를 만드는 경우 인터뷰하는 사람들에게 그러한 해킹 방법 또는 해킹 방법, 브라우저마다 다른 CSS를 제공하는 방법 등에 대해 문의해야합니다.

   • 기타

3. 순수한 HTML 및 CSS 작업이라면 사람은 디자이너와 작업하고 개발자는 작업해야합니다. HTML과 CSS를 알아야 하지만 훨씬 더 가치있는 것은 사람들과 상호 작용 하고 디자이너의 요구, 개발자의 요구 사항 및 HTML과 CSS의 제약 조건을 모두 이해 하는 능력 입니다.

   예를 들어, JavaScript 개발자가 나중에 대화 형 작업을 쉽게 추가 할 수있는 방식으로 HTML을 구성하는 방법을 알아야합니다.

몇 가지 기본적인 질문으로 시작할 수 있습니다.

가장 좋아하는 브라우저는 무엇입니까?

상대방이 "Internet Explorer"라고 대답하면 즉시 인터뷰를 중단하십시오. 그런 사람은 필요하지 않습니다.

아니, 농담이야 답은 관련이 없습니다. 대신 다음을 요청할 수 있습니다.

자주 사용하는 브라우저에서 사용하는 디버그 도구에 대해 알려주세요.

Chrome을 기본으로 사용하며 매일 개발자 도구를 사용합니다. 이러한 도구를 통해 다음을 수행 할 수 있습니다.

• 페이지의 요청을보고

• 페이지 및 관련 리소스를로드하는 데 걸리는 시간, 특히 DNS 조회, 대기 및 수신 시간,

• 전송 된 요소의 헤더와 캐시 표시기를 연구하십시오.

• DOM을보고 CSS 선택기가 어떻게 적용되는지 연구하십시오.

또한 높은 확장 성을 요구하는 웹 사이트를 최적화하기위한 체크리스트로 사용하는 YSlow를 사용합니다. YSlow는 서버가 올바르게 구성되어 있는지 (올바른 헤더 전송 등) 결정하는 데에도 유용한 도구입니다.

Firefox에서는 Chrome의 개발자 도구와 매우 유사한 도구 인 Firebug를 사용합니다. 개발자 도구는 새로운 버전의 Internet Explorer에서도 사용 가능하며 IE7에서 IE10 호환성보기로 전환 할 수 있습니다. 이 마지막 기능은 레거시 테스트를 위해 여러 가상 머신을 설치하거나 Litmus 와 같은 유료 서비스를 훨씬 더 자주 사용해야하기 때문에 매우 유용합니다 .

<dl/>태그에 대해 설명해주세요 . 이 태그의 용도는 무엇입니까? 실제로 어떻게 사용됩니까? 이 확장 된 사용법에 대해 어떻게 생각하십니까?

여기서, 사용자 <dl/>는 하나의 키 <dt/>를 하나 또는 여러 개의 값과 연관시켜 사전에 대한 설명을 할 수 있기를 원합니다 <dd/>. 이 태그의 주요 사용은 의미와 순전히 관련되어 있지만 실제로는 테이블을 대체하는 데 광범위하게 사용되었습니다 (PHPBB3의 좋은 예). 테이블이 페이지 렌더링 속도를 늦출 때 좋은 방법이지만주의해서 사용해야합니다. 데이터를보다 잘 설명하기 위해 많은 경우에 테이블이 적합 할뿐만 아니라 일반과 같은 다른 방법도있을 수 있습니다. 를 사용하지 않고 내용을 설명 할 수 있습니다 <dl/>.

고정 레이아웃과 유동 레이아웃의 차이점은 무엇입니까? 각각의 장단점은 무엇입니까?

고정 레이아웃에는 사전 정의 된 요소 너비가 있습니다. 유동적 레이아웃의 요소는 페이지 너비에 따라 다릅니다.

고정 레이아웃을 사용하면 특히 전체 너비 그래픽이 많은 경우 페이지를보다 쉽게 ​​디자인 할 수 있습니다. 그래픽이 없어도 정확한 경우에만 관심이 있기 때문에 훨씬 쉽습니다. 예를 들어 Programmers.SE는 고정 레이아웃 웹 사이트이며 질문과 답변을 표시하는 열은 항상 같은 크기입니다. 유동적 인 레이아웃이이 열에 사용되면 문제가 발생합니다. 작은 화면에서는 줄이 너무 짧고 큰 화면에서는 줄이 너무 커서 텍스트를 읽을 수 없습니다. 읽을 수 없습니다.

고정 레이아웃의 문제는 가장 많이 사용되는 몇 가지 해상도에서는 잘 작동하지만 다른 모든 경우에는 거의 실패한다는 것입니다. 매우 크고 넓은 모니터를 채택하고 소형 모바일 장치에서 인터넷 사용이 증가하기 때문에 특히 중요합니다.

유동적 인 레이아웃이 도움이되지만 그러한 웹 사이트에서는 디자인하기가 더 어렵습니다. 잘못 관리되는 프로젝트의 일부 시나리오에서는 HTML 및 CSS 해킹, 큰 페이지, 낮은 유지 관리 가능성 및 개발 중에 비용이 증가하고 마감일을 놓칠 수 있습니다.

유동적 인 레이아웃이있는 페이지에서 텍스트 열이 너무 커져서 읽을 수없는 상황을 피하려면 어떻게해야합니까?

max-width속성 을 사용하여 텍스트 영역의 너비를 제한 할 수 있습니다 .

이 코드 조각에 대해 어떻게 생각 <p color="Red" align="Center">Text here</p>하십니까?

코드에는 HTML 내에 프리젠 테이션 로직을 혼합하는 데 결함이 있습니다. 여러 가지 이유로 프리젠 테이션 로직을 CSS에 넣어야합니다.

• 문제를 분리하고 코드를 정리하는 데 도움이됩니다.
• 페이지마다 스타일을 재사용 할 수있게하여 유지 보수성 문제를 제외하고 전체 웹 사이트에서 동일한 스타일을 사용하도록합니다.
• CSS 파일이 캐시되므로 대역폭을 줄이는 데 도움이됩니다.

이와 같은 몇 가지 기본적인 질문을 한 후에 더 까다로운 질문을 할 수 있습니다.

CSS에서 색상이나 글꼴이 하나의 선택기로 대상이 될 수없는 여러 요소에 적용될 때 색상이나 글꼴이 중복되지 않도록하려면 어떻게해야합니까? 단점이 있습니까?

Sass 또는 LESS와 같은 CSS 프리 프로세서를 사용하여이를 수행합니다. 나중에 스타일에서 사용할 수있는 변수 내에서 색상, 글꼴 및 스타일의 다른 부분을 정의 할 수 있습니다.

CSS 프리 프로세서의 단점은 다음과 같습니다.

• 브라우저에서 최신 CSS 코드를 사용하기 위해 개발 및 배포 워크 플로를 변경해야하는 경우가 있습니다.

• 그들은 소수의 개발자들만 알고 있으며, 새로운 사람이 나중에 프로젝트에 참여하거나 유지하는 것을 어렵게합니다.

• Sass 또는 LESS를위한 좋은 IDE와 빠른 IDE가 모두 없으며 가장 인기있는 IDE의 통합은 다소 실망 스럽습니다.

href이 이미지가 HTTP 및 HTTPS를 통해 액세스 할 수있는 웹 사이트에 표시되는 경우 CDN에있는 이미지 값의 예를 제공하십시오 .

HTTPS는 호출 된 모든 리소스가 HTTPS에 있어야하기 때문에 (그렇지 않으면 많은 경우 보안 경고가 사용자에게 표시됨) 링크를로 지정할 수 없습니다 http://cdn.example.com/image.png. 이미지에 올바르게 연결하려면 //cdn.example.com/image.png사용해야합니다. 브라우저는 앞에 추가됩니다 http:또는 https:상황에 따라.

웹 사이트의 페이지 크기와 요청 수를 최적화 할 수없고 내용을 변경하거나 AJAX를 추가 할 수없는 경우 웹 사이트가 더 빠르다는 인상을 사용자에게 어떻게 제공합니까? HTML 관점에서 무엇을 포함합니까?

HTTP 1.1이 사용되면 페이지가 청크 될 수 있습니다 . 즉, 첫 번째 부분이 더 빨리 표시되어 웹 사이트가 실제보다 빠릅니다. HTTP 1.0에서는 청크 전송 인코딩이 불가능하므로이 경우 수행 할 작업이 없습니다.

청크 분할 된 컨텐츠를 제공 할 수 있으려면 HTML 관점에서 요소를 다시 정렬해야하며 가장 중요한 요소를 파일 맨 위에 배치해야합니다 (페이지 맨 위에 표시되어야 함을 의미하지는 않습니다). 예를 들어, 전자 상거래 웹 사이트에서, 사용자가 제품의 세부 사항을보고자 할 때, 첫 번째 청크에는 <head/>및 세부 사항 이 포함될 수 있습니다 . 다음 청크에는 웹 사이트의 로고, 기본 메뉴, 저작권 등과 같은 기본 요소가 포함될 수 있습니다. 마지막으로, 마지막 청크에는 "이 제품을 구입 한 사람"섹션, 제품의 의견 및 등급, "Facebook에서 공유"등

마지막으로, 후보에게 실제 시나리오에서 작업하도록 요청할 수 있습니다. 사용자가 CSS 스프라이트 또는 기타 고급 최적화 기술, 브라우저 불일치 등을 처리해야하는 복잡한 시나리오에 가장 쉬운 방법 일 수 있습니다.

왼쪽 영역, 목록이 있고 오른쪽 영역, 텍스트가있는 두 영역으로 XHTML 페이지를 만들 수 있습니다. 두 영역은 세로선으로 구분되어 있으며 페이지의 맨 위에서 맨 아래까지 이어집니다. 크기와 크기가 다양한 목록과 텍스트는 어느 것이 가장 큰지 예측할 수 없습니다. <table/>s를 사용할 수 없습니다 .

실제로, 그것은 매우 간단하지만 사람이 키에 대해 생각할 반사가 있는지 보여줍니다. 경험이없는 후보자는 float:left영역과 영역 을 작성 border-left:solid 1px #ccc;하지만 왼쪽 영역에 테두리를 추가하고 두 개의 테두리가 동일한 위치에 있도록 확장하지 마십시오.

CSS에 대해 몇 가지 질문을합니다.

1. CSS 박스 모델. 여백, 패딩 등 IE 모델 대 W3C 모델 하나는 어떻게 둘 사이를 전환 할 수 있습니까? 그들의 장점과 단점은 무엇입니까?
2. CSS 포지셔닝. 요소가 "흐름"및 "흐름"에 있다는 것은 무엇을 의미합니까?
3. inline-block및 다른 디스플레이 값. 차이 사이 display: none;와 visibility: hidden; (이 CSS에 새로운 사람들을위한 좋은 쉬운 질문입니다)
4. inline-blockfloat레이아웃 대 .
5. 선택기.
6. CSS가 재설정됩니다. 왜 그들이 필요하고 무엇을 성취합니까?
7. 미디어 쿼리 및 반응 형 디자인.
8. 스타일을 구성하는 방법 및 선택기 수를 작게 유지하는 방법 LESS, Sass 및 기타 CSS 전 처리기. 객체 지향 CSS.

HTML에 대한 몇 가지 질문 :

1. 독 타입 및 브라우저 모드.
2. 일부 태그가 다른 태그보다 더 선호되는 이유는 무엇입니까 ( 예 : emvs i)?
3. HTML 및 CSS를 관리 가능하고 유지 관리하기 쉽게 유지하기 위해 따라야하는 기본 원칙은 무엇입니까?

일반적으로 CSS는 많은 사람들이 이해하고 효과적으로 사용하기 어려운 영역이기 때문에 CSS에 더 중점을 둡니다. 나는 이력서에 "CSS"를 넣었지만 많은 질문에 대답 할 수없는 많은 후보자를 만난다. 대부분의 사람들은 그냥 "아니오 - 아니, 내가 바로 말을 알고 CSS 좋은의 충분한 그것으로 거래를하지만 얘기하지 충분히 좋은."

때로는 간단한 작업을 수행하고 인터뷰 대상자를 완료하는 것이 좋습니다. 여러 화면 크기를 지원하고 그에 따라 조정되는 레이아웃 및 블록 스타일을 사용하여 간단한 페이지를 디자인하십시오. 한두 시간 정도 걸리며 응시자는 자신이하는 일과 이유를 설명해야합니다.

인터뷰와 함께 행운을 빕니다!

실시간 인터뷰를 수행하는 경우 가장 좋은 방법은 개발자에게 html / css 코드를 작성하도록 요청하는 것입니다.

예 (실제 개발에서 매우 흔함). 개발자에게 다음을 사용하여 html / css 코드 페이지를 작성하도록 요청하십시오.

1. 유체 폭.
2. 높이가 100px 인 헤더;
3. 헤더의 오른쪽 모서리에있는 로그인 버튼
4. 너비 100px, 높이 200px의 왼쪽 및 오른쪽 패널;
5. 기사 텍스트의 중앙 패널.
6. 바닥 글은 항상 바닥에 있습니다. 기사에 1 행이 있어도

UPD : cource 중에서 개발자에게 div 만 사용하여 코드를 작성하도록 요청하십시오 (테이블 제외).

다음과 같아야합니다.

그러나 실시간 인터뷰를하기 전에 온라인에서 응시자를 테스트 해 보는 것이 좋습니다. 모든 응시자에게 시간을 보내는 것보다 온라인에서 응시자를 테스트하고 숙련 된 개발자 만 인터뷰에 초대하는 것이 더 쉽기 때문입니다.

나는 웹 디자이너 인터뷰에 몇 번 앉아 있었고 우리가 한 것은 매우 간단한 블로그 레이아웃 을 종이 에 인쇄 한 다음, 후보에게 10 분 이상 페이지에 HTML 및 / 또는 CSS를 적어 달라고 요청했습니다. 코드를 어떻게 작성하는지에 대한 기본 아이디어를 누군가가 실제로 CSS를 알고 있는지 여부를 알려줍니다. 우리는 floats vs table과 같은 기본적인 것들을 찾고 있었고 어떤 수단으로도 완벽 할 필요는 없다고 설명했습니다.

많은 사람들이 CSS에 대한 수년간의 경험을 주장했지만, 그것을 작성해야했을 때, 그들은 " layout: floating; direction: up;"같은 다른 추측 이나 다른 불안한 말을 쓰고 있었다. 1 개 이상의 "CSS Ninja"는 구문 div(margin=5)" la" " 도 얻지 못했습니다 . 인터뷰에 얼마나 많은 사람들이 똑바로 누워 있는지 알기 위해 저에게 눈을 뜨게되었습니다. 그리고 직접 코딩하는 것보다 CSS에 대한 거짓말이 더 쉬워 보입니다. CSS에 대해 알 수는 없지만 인터넷 검색을 통해 적절한 용어를 매우 빠르게 던질 수 있습니다. 예를 들어 OOP와 같은 고급 개념으로는 효과적으로 그렇게 할 수 없습니다.

5 분 안에 HTML 태그 또는 CSS 속성 을 나열해야하는 온라인 테스트가 있습니다 .

이것은 완전한 테스트는 아니지만 후보자가 HTML / CSS에 익숙한 지 여부를 알려줄 수 있습니다.

질문에 대해 샘플 코드로 테스트하고 구문 / 구조 오류를 감지하도록 요청할 수 있습니다.

실제 시나리오는 후보자가 회사에서 무엇을 할 것인지에 달려 있습니다. 프론트 엔드 개발자를 원한다면 임의의 주제에 대한 웹 사이트 디자인을 요청할 수 있습니다.

프로그래밍 언어 및 마크 업 언어에 적용 가능한 테스트 유형 중 하나는 코드 검토입니다. 구문 오류, 논리 오류, 코너 사례, 의심스러운 스타일이 혼합 된 작은 샘플 (20 또는 30 줄)을 작성하십시오. 그런 다음 후보에게 의심스러운 것으로 보이는 것을 식별하도록 요청하십시오.

인터뷰 질문과 마찬가지로 응시자가 과제에 접근하는 방식은 결과뿐만 아니라 중요합니다.

테스트를 게시하지는 않지만 CSS에 적용하는 방법에 대한 힌트는 다음과 같습니다.

• 구문 오류 : 일부 세미콜론이 누락되었습니다. 보너스로 일부 선택 사항 (논쟁 스타일)을 놓치고 응시자가 댓글을 달 수 있는지 확인할 수 있습니다.
• 논리 오류 : 접두사가없는 속성 뒤에 접두사가있는 속성을 넣으십시오. 또한 CSS3에 대한 친숙 함을 테스트하고 표준 개발 방식에 대한 토론을 유발할 수 있습니다.
• 모퉁이의 경우 : 예를 들어 3 개의 값을 가진 여백-얼마나 많은 사람들이 그것이 가능하다는 것을 알지 못하는지 놀랄 것입니다. 응시자가 의견을 밝히지 않으면 무지가 아닌 지식에서 그것을 무시했는지 확인하기 위해 어떻게 해석되는지 물어볼 수 있습니다.
• 또 다른 코너 사례 : 좋아하는 2 개 또는 3 개의 IE7 버그를 연습하십시오. 이렇게하면 전투 흉터가있는 사람 (적어도 하나 이상을 찾아야 함)을 경험이없는 웹킷 전용과 구별 할 수 있습니다.
• 스타일 : 과도한 특이성, 실종 em및 px등. 인터뷰 구문을 연구 한 사람은 아마도이 중 많은 부분을 잡지 못할 것입니다.

개인적인 경험에서 다른 개발자들과 함께 일하면서 HTML & CSS에 관한 질문은 실제로 무엇을하고 있는지 아는 사람들로부터 자신이 말하는 것을 아는 사람들을 분류하지 않을 것이라고 생각합니다.

회사의 요구에 대한 현실적인 경험을 바탕으로 모의 테스트 / 시제품을 추천합니다.