그럼에도 불구하고

👨‍💻

[면접 준비] HTML / CSS 본문

이모저모/면접 준비

[면접 준비] HTML / CSS

zenghyun 2023. 9. 27. 12:16

Start!

geekflare .com

 

🧑🏻‍💻 DOCTYPE은 무엇을 하나요?

DOCTYPE는 document type의 약어입니다. DOCTYPE는 항상 DTD(Document Type Definition)와 관련됩니다. 

 

DTD는 특정 문서가 어떻게 구성되어야 하는지 정의합니다. (예시: button은 span을 포함할 수 있지만, div는 그럴 수 없다.)

반면, DOCTYPE는 문서가 대략 존중할만한 DTD를 선언합니다. 

 

웹 페이지는 DOCTYPE 선언이 필요합니다. 유저 에이전트에게 문서가 존중하는 HTML 사양의 버전을 알리는 데 사용됩니다. 유저 에이전트가 올바른 DOCTYPE을 인식하면, 문서를 읽는 데에 DOCTYPE과 일치하는 no-quirks mode를 트리거합니다. 유저 에이전트가 올바른 DOCTYPE을 인식하지 못하면, quirks mode를 트리거합니다.

 

HTML5 표준에 대한 DOCTYPE 선언은 <!DOCTYPE html>입니다. 

 

⭐️ 🧑🏻‍💻 시맨틱 마크업에 대해 설명해 주세요.

시맨틱 마크업은 주어진 용도에 맞는 태그를 사용하는 것을 의미합니다. 대표적으로 <div> 대신 <header>, <aside>, <nav> 등을 사용하여 문서를 작성하는 것을 말합니다.

 

이를 통해 얻을 수 있는 장점으로는 SEO(검색 엔진 최적화)에 유리하며, 웹 접근성을 향상하고, 코드의 가독성을 개선한다는 점이 있습니다.

 

⭐️ 🧑🏻‍💻 SEO(검색 엔진 최적화)에 대해 설명해 주세요.

검색 엔진 최적화(Search Engine Optimization)는 웹사이트와 웹페이지를 검색엔진이 쉽게 발견(디스커버리)하고, 읽어가서(크롤링), 색인하고(인덱싱), 상위 노출(랭킹)시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해서 웹사이트의 구조나 콘텐츠를 개선하는 일련의 작업을 말합니다.

 

📌 ⭐️ 평소에 SEO를 어떻게 최적화하시나요?

1. 문법에 맞는 HTML 작성하기 :

<title> 태그에는 사이트 제목을 기재하고, <div> 태그를 사용해 줄을 바꾸고, <strong>과 <em> 태그를 활용해 강조하고 싶은 키워드에 붙이기

2. 메타 태그 활용하기 

3. 이미지에 alt 속성 기재

4. anchor 태그 적절히 활용하기 ( a 태그 )

5. HTTPS 사용 권장 ( http 보다 https가 구글 검색 엔진에서 1% 정도의 랭킹 가산점 부여 )

 

🧑🏻‍💻 HTML 렌더링 도중   JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?

JavaScript는 DOM API를 통해서 DOM Tree를 변경할 수 있기 때문에, JS가 실행되면 렌더링 엔진이 JS엔진에게 제어 권한을 넘겨줍니다.

 

🧑🏻‍💻 Attribute와 Property의 차이에 대해 설명해 주세요. 

Attribute은 HTML의 속성이며 Property는 DOM의 속성입니다.

가장 큰 차이점은 attribute는 정적인 속성이라는 것이고, property는 동적인 속성이라는 것입니다.

예시로 체크박스에 체크를 했을 때, attribute는 변경되지 않지만, property는 변경되는 것을 볼 수 있습니다.

 

또 하나는 사용자 정의 속성에 대한 접근 차이가 있습니다.

임의로 지정한 사용자 정의 속성은 프로퍼티로 자동으로 표현되지 않습니다.

따라서 getAttribute()와 setAttribute()로 접근해야 합니다. 

 

이 외에도, 프로퍼티의 이름은 식별자 규칙을 따라야 하기 때문에 이름을 짓는데 규칙이 있으며, 프로퍼티 접근 성능이 어트리뷰트 접근 성능보다 좋다는 차이점이 있습니다. 

 

🧑🏻‍💻 cookie, sessionStorage, localStorage의 차이점에 대해 설명해 주세요.

위 세 가지 기술은 모두 클라이언트 측에서 값을 저장하는 key-value 저장소 메커니즘입니다. 모두 문자열로만 값을 저장할 수 있습니다. 

 

  cookie localStorage sessionStorage
생성자 클라이언트나 서버, 
서버는 Set-Cookie 헤더를 사용할 수 있습니다.		 클라이언트 클라이언트
만료 수동으로 설정 영구적 탭을 닫을 때
브라우저 세션 전체에서 지속 만료 설정 여부에 따라 다름  o x
모든 HTTP 요청과 함께 서버로 보냄 쿠키는 Cookie 헤더를 통해 자동 전송 x x
용량 4kb 5MB 5MB
접근성 모든 윈도우 모든 윈도우 같은 탭

 

🧑🏻‍💻 <script>, <script async>, <script defer> 사이의 차이점을 설명해 주세요.

<script> : HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작됩니다.

<script async> : 이 스크립트는 HTML 파싱과 병렬적으로 가져오며, 가능할 때 즉시 실행됩니다. 여러 개 있을 경우 서로가 서로의 실행을 기다려 주지 않아 실행 순서가 제각각이 됩니다.

<script defer> : 이 스크립트는  HTML 파싱과 병렬적으로 가져오지만, 페이지 파싱이 끝나면 실행됩니다, 여러개 있을 경우 각 스크립트는 페이지에 등장한 순서대로 실행됩니다. 

 

defer 속성은 해당 스크립트를 백그라운드에서 다운로드합니다. 그리고 페이지 구성이 끝날 때까지 그 실행이 지연됩니다. defer 스크립트의 실행이 끝난 후 DOMContentLoaded 이벤트가 발생합니다.

 

async 속성은 페이지와 완전히 독립적으로 동작합니다. 따라서 DOMContentLoaded가 스크립트의 실행을 기다려주지 않습니다. 

 

📌 주의: src 속성이 없는 스크립트 태그는 async와 defer 속성이 무시됩니다.

 

🧑🏻‍💻 일반적으로 CSS <link> 태그를 <head></head>  태그 사이에 위치시키고, JS <script> 태그를 </body> 직전에 위치시키는 것이 왜 좋은 방법인가요?

👉 <head> 안에 <link>를 넣는 이유 

페이지가 처음 로드되면 HTML과 CSS가 동시에 파싱 됩니다. HTML은 DOM(Document Object Model)을 만들고 CSS는 CSSOM(CSS Object Model)을 만듭니다. 두 가지 모두 웹사이트에서 시각적인 부분을 만드는데 필요합니다. 

 

<link>를 <head> 안에 넣는 것은 점진적 렌더링을 위하여 사이트의 성능 점수에서 측정되는 사이트 최적화의 범위이기 때문입니다.

그 외에도 상단에 배치하면 페이지가 점진적으로 렌더링 되기 때문에 UX가 향상됩니다. 

 

👉 <head> 안에 <link>를 넣는 이유 

<script>는 다운로드되고 실행되는 동안 HTML 파싱을 차단합니다. 스크립트를 맨 아래에 두면 HTML을 먼저 파싱 하여 사용자에게 표시할 수 있습니다.

 

🧑🏻‍💻 Progressive Rendering (프로그레시브 렌더링)이 무엇인가요?

프로그레시브 렌더링이란 콘텐츠를 가능한 한 빠르게 표시하기 위해 웹 페이지의 성능을 향상하는 데 사용되는 기술입니다. (특히, 인식되는 로딩 시간을 향상합니다.) 

 

📌 관련 기술

  • 이미지 지연 로딩: 페이지의 이미지를 한꺼번에 로딩하지 않고 JS를 사용하여 사용자가 이미지를 표시하는 페이지 부분으로 스크롤할 때 이미지 로드
  • 보이는 콘텐츠의 우선순위 설정: 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링 될 페이지에 필요한 최소한의 CSS/콘텐츠/스크립트만 포함하면 deferred 스크립트를 사용하거나 DOMContentLoaded/load 이벤트를 사용하여 다른 리소스와 내용을 로드

 

🧑🏻‍💻 px, em, rem의 차이에 대해 설명해 주세요.

px는 고정된 절댓값입니다. 그에 반해 em과 rem은 환경에 따라 변하는 단위입니다.

em 같은 요소에서 사용한 font-size 속성값을 기준으로 변경됩니다. 만약 같은 요소에 font-size 속성이 없다면 부모 요소의 font-size를 상속받습니다.

rem은 최상위 요소인 <html>의 font-size를 기준으로 변경됩니다.

em과  rem 모두 만약 font-size가 정의되지 않았다면 16px이 단위가 됩니다.

 

📌 반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?

대부분 rem를 사용합니다. rem을 사용하면 크기의 예측이 훨씬 쉽습니다. 따라서 컴포넌트의 재사용이 쉽고, 유지보수가 쉽습니다.

 

🧑🏻‍💻 vw, vh에 대해 설명해 주세요.

vw는 viewport의 너비 값을 100vw라고 정의합니다.

즉 viewport 너비의 0.01배가 1vw입니다.

 

vh는 viewport의 높이 값을 100vh로 정의합니다.

즉 viewport 높이의 0.01배가 1vh입니다.

 

⭐️ 🧑🏻‍💻 CSS 선택자의 우선순위에 대해 설명해 주세요.

가장 먼저! important가 적용됩니다. !important는 속성 기준으로 가장 우선 적용됩니다. 점수로 산정할 수 없으며, 여러 개가 있다면 마지막에 작성된 코드가 우선됩니다.

그다음 인라인 스타일이 적용됩니다. 인라인 스타일은 요소 기준 가장 우선 적용됩니다. 점수로 산정한다면 1000점이 부여됩니다.

다음으로 ID 선택자입니다. 점수로 산정한다면 100점이 부여됩니다.

Class 선택자, 속성기반 선택자, :hover와 같은 가상 클래스, ::after와 같은 가상요소 선택자가 모두 같은 우선순위를 갖습니다. 점수로 산정한다면 10점이 부여됩니다.

다음으로 태그 선택자 입니다. 점수로 산정한다면 1점이 부여됩니다.

마지막으로 전체 선택자(*)입니다. 점수로 산정한다면 0점입니다.

 

👉 요약

  • !important: 점수 산정 불가, 제일 우선순위 
  • 인라인 스타일: 1000점 
  • ID 선택자: 100점
  • Class 선택자, 속성기반선택자, :hover, ::after 등 : 10점
  • 태그 선택자 : 1점 
  • 전체 선택자 (*) : 0점

 

📌 가상 클래스에 대해 설명해 주세요.

가상 클래스는 특정 이벤트마다 적용할 스타일을 설정한 것을 의미합니다. 

대표적으로 :hover나 focus 등이 있습니다.

 

🧑🏻‍💻 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야 될까요?

페이지 크기에 따라 같은 비율을 유지하는 요소를 만들려면 % 단위를 사용하면 됩니다.

고정해야 하는 위치에 따라, margin, padding, width, height에 % 단위를 사용할 수 있습니다.

 

🧑🏻‍💻 Flexbox에 대해 설명해 주세요

Flexbox는 레이아웃을 좀 더 쉽게 배치할 수 있도록 고안된 스펙입니다.

Flex를 사용할 때, 부모 요소를 Flex container라고 부르고, 자식 요소를 Flex Item이라고 부릅니다. 

Flex는 Flex Container에 display: flex;를 적용하여 사용할 수 있습니다.  Flex의 속성들은 container에 적용되는 속성과 Item에 적용되는 속성으로 나뉩니다. 

 

대표적인 속성으로 flex-direction, justify-content, align-items 등이 있습니다.

 

🧑🏻‍💻 float의 동작에 대해 설명해 주세요.

float을 설정하면 요소를 기존 문서의 흐름에서 빠져나와 포함된 박스나 다른 float 요소의 edge에 닿을 때까지 좌나 우로 이동하게 됩니다.

 

🧑🏻‍💻 margin과 padding에 대해 설명해 주세요.

margin은 요소의 바깥 여백 영역을 설정하고, padding은 요소의 안쪽 여백을 설정합니다. 

 

📌 margin 병합에 대해 설명해 주세요.

margin 병합 현상은 인접한 블록요소의 상하단 마진이 병합되는 현상을 의미하며, 그 크기는 두 마진 중 큰 값을 가진 마진의 값으로 병합됩니다.

이는 인접한 블록이 아닌 부모와 자식 요소 간에도 발생합니다.

부모에 margin을 0으로 설정하고 자식 요소의 margin을 10px로 설정하면, 자식요소의 상하단 margin이 부모의 margin으로 병합되어 마치 margin이 사라진 것 같은 현상이 발생합니다.

 

이런 현상을 막기 위한 대표적인 해결책으로 부모 요소에 overflow: hidden; 을 주는 방법이 있습니다.

 

📌 Box model에 대해 설명해 주세요.

Box model은 HTML 요소를 바깥쪽부터 margin, border, padding, content로 나누는 것을 말합니다.

여기에서 height와 width는 content의 크기만을 의미합니다.

예시

 

🧑🏻‍💻 콘텐츠를 시각적으로 숨기는 (그리고 screen reader에서만 사용할 수 있게 만드는) 방법에 대해 설명해 주세요. 

  • width: 0; height: 0; : 요소가 화면에 어떤 공간도 차지하지 않도록 합니다. 결과적으로 보이지 않게 됩니다.
  • position: absolute; left: -99999px : 화면 외부에 배치합니다.
  • text-indent: -9999px : block인 요소 내의 텍스트에서만 작동합니다.

 

🧑🏻‍💻  screen이 아닌 @media 속성의 예를 들어줄 수 있나요?

네, @media 속성은 screen을 포함하여 4가지 타입이 있습니다.

  • all: 모든 미디어 기기 장치
  • print : 프린터
  • speech : 화면을 크게 읽는 스크린리더
  • screen : 컴퓨터 스크린, 태블릿, 스마트폰 등

 

🧑🏻‍💻  * {  box-sizing: border-box; }는 무엇을 하나요? 장점은 무엇인가요?

기본적으로, 요소들에 box-sizing: content-box가 적용되면, 내용의 크기만 고려됩니다.

box-sizing: border-box는 요소의 width와 height가 어떻게 계산되는지를 변경하여, border와 padding도 계산에 포함됩니다. 

  • 요소의 height는 내용의 [height + 수직 padding + 수직 border 폭]으로 계산됩니다.
  • 요소의 width는 내용의 [width + 수평 padding + 수평 border 폭]으로 계산됩니다.
  • padding과 border를 박스 모델의 일부분으로 생각하면, 디자이너가 실제로 생각하는 것과 잘 들어맞습니다.

 

⭐️ 🧑🏻‍💻 SCSS에 대해 설명해 주세요.

SCSS는 CSS과 완전히 호환되며 Sass의 모든 기능을 지원하는 CSS의 상위 집합입니다.

SCSS는 웹에서 직접 동작할 수 없으며, 이를 전처리기로 변환한 후 최종적으로 CSS를 적용해야 합니다.

 

⭐️ 🧑🏻‍💻 CSS의 display 속성은 무엇이 있으며 사용법에 대한 예시를 들어주세요.

display 속성은 요소 외부 레이아웃에 관여하는 속성과 내부에 관여하는 속성, 접근성을 위한 속성들이 있습니다.

 

외부 레이아웃에 관여하는 속성으로는 block, inline 

내부 레이아웃에 관여하는 속성으로는 flow, table, flex, grid

접근성을 위한 속성으로는 none, contents 등이 있습니다. 

이 외에도 inherit, initial 속성이 있습니다. 

 

📌 block과 inline-block 그리고 inline에 대해 구분해 주세요.

  block inline-block inline
크기 부모 컨테이너의 너비를 채웁니다. 내용에 의존합니다. 내용에 의존합니다.
위치 새 줄에서 시작하고, 그 옆에 HTML 요소를 허용하지 않습니다. (한 줄을 다 차지하며, float을 추가할 때는 제외) 다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용합니다. 다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용합니다.
width, height 지정 가능 여부 가능 가능 불가능
vertical-align 정렬 가능 여부 불가능 가능 가능
margin과 padding 모든 방향에서 가능 모든 방향에서 가능 수평 방향만 가능
Float - - 수직 margin과 padding을 설정할 수 있는 block 요소와 같아집니다.

 

⭐️ 🧑🏻‍💻 position 속성에 대해 설명해 주세요

CSS의 position 속성은 문서상에 요소를 배치하는 방법을 지정합니다.

 

  • relative: 요소의 위치가 레이아웃을 변경하지 않고, 자체에 상대적으로 조정됩니다. (따라서 배치되지 않은 요소의 간격을 남겨 둡니다.)
  • fixed: 문서 흐름에서 요소를 제거하고, viewport의 초기 컨테이닝 블록을 기준으로 배치합니다. 
  • absolute: 문서 흐름에서 요소를 제거하고, 가장 가까운 위치가 지정된 부모요소에 대해 상대적으로 배치합니다. 
  • static: 기본 위치이며, 요소가 평소와 같이 페이지에 위치하게 됩니다. top, right, bottom left, z-index 속성은 적용되지 않습니다.
  • sticky: 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 스크롤이 되는 조상을 기준으로 배치합니다. 따라서 스크롤을 하게 되면 sticky를 사용하는 요소는 해당  공간을 차지하고 있으면서, 스크롤에서 제외하게 됩니다.

 

🏷️ 출처

 

프론트엔드 면접 문제 은행 ★ Front-end Developer Interview Questions

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

h5bp.org

 

HTML 질문 | Front End Interview Handbook

프론트엔드 면접 질문 - HTML 질문에 대한 해설입니다. Pull Request를 통한 제안, 수정 요청 환영합니다.

www.frontendinterviewhandbook.com

 

 

 

저작자표시 비영리

'이모저모 > 면접 준비' 카테고리의 다른 글

[면접 준비] React  (0) 2023.09.27
[면접 준비] 프론트엔드 전반적인 질문 및 CS  (0) 2023.09.27
[면접 준비] JavaScript / TypeScript  (0) 2023.07.14
'이모저모/면접 준비' Related Articles more
Comments