신입 프론트엔드 개발자 기술면접 답변 정리 (HTML/CSS)
by yjym33프론트엔드 개발자에게 질문할만한 기술면접 질문 및 답변들을 정리하여 지속적으로 업데이트 하려고 해당 글을 작성하였습니다.
해당 글은 지속적으로 업데이트 예정입니다.
HTML/CSS
Flexbox와 Grid Layout의 차이점은 무엇인가요?
Flexbox는 1차원 레이아웃을 다루는데 사용되며, 주로 요소 간의 정렬과 분포를 다룹니다. Grid Layout은 2차원 그리드를 사용하여 요소의 행과 열을 정렬하고 배치합니다. Flexbox는 주로 요소 간의 정렬에 사용되고, Grid Layout은 전체 페이지나 큰 영역의 레이아웃을 다룰 때 사용됩니다.
CSS 그리드(Grid)를 사용하여 복잡한 레이아웃을 만드는 방법에 대해 설명해주세요.
CSS 그리드를 사용하여 레이아웃을 만들려면 부모 요소에 display: grid; 속성을 적용하고, 그리드 컬럼과 로우를 정의합니다. grid-template-columns 및 grid-template-rows 속성을 사용하여 컬럼과 로우의 크기와 구조를 정의하고, 그리드 아이템들을 해당 그리드에 배치합니다. 그리드 템플릿을 사용하여 요소들을 정확한 위치에 배치할 수 있습니다.
미디어 쿼리(Media Queries)를 사용하여 반응형 웹 디자인을 구현한 경험이 있나요?
네, 미디어 쿼리를 사용하여 화면 크기, 해상도 등의 조건에 따라 다른 CSS 스타일을 적용하는 반응형 웹 디자인을 구현한 경험이 있습니다. 이를 통해 모바일 기기와 데스크톱 화면에서 최적화된 사용자 경험을 제공할 수 있습니다.
모바일 우선 디자인(Mobile-First Design)의 이점에 대해 설명해보세요.
모바일 우선 디자인은 먼저 모바일 기기에 맞추어 웹 디자인을 개발하는 방식입니다. 이의 이점은 다음과 같습니다:
모바일 사용자 경험 개선: 모바일 환경에서 시작하므로 모바일 사용자에게 최적화된 경험을 제공할 수 있습니다.
빠른 페이지 로딩: 작은 화면 크기와 제한된 대역폭으로 인해 페이지 로딩 시간이 단축됩니다.
SEO 향상: 구글과 같은 검색 엔진은 모바일 친화적인 웹 사이트를 선호하므로 검색 엔진 순위가 향상됩니다.
접근성 강화: 모바일 우선 디자인은 웹 사이트의 접근성을 향상시킵니다.
SASS 또는 LESS와 같은 CSS 전처리기를 사용한 경험이 있나요? 이들의 주요 기능에 대해서 언급해주세요.
네, SASS와 LESS를 사용한 경험이 있습니다. 이들의 주요 기능은 다음과 같습니다:
변수: 변수를 사용하여 색상, 글꼴, 크기 등의 값을 중복 없이 정의하고 재사용할 수 있습니다.
중첩(Nesting): CSS 규칙을 중첩하여 가독성을 높이고 구조를 명확하게 표현할 수 있습니다.
Mixin: 재사용 가능한 CSS 코드 블록을 정의하고 확장할 수 있습니다.
함수: 사용자 정의 함수를 만들어 CSS 속성을 계산하고 생성할 수 있습니다.
연산: 산술 연산을 수행하여 동적인 스타일을 생성할 수 있습니다.
Import: 다른 SASS 또는 LESS 파일을 가져와서 합칠 수 있습니다.
px, em, rem의 차이에 대해 설명해주세요.
px: 픽셀(pixel) 단위로 크기를 지정하며 고정된 크기를 가집니다. 브라우저의 확대/축소에 영향을 받지 않습니다.
em: 상대적인 크기 단위로, 부모 요소의 폰트 크기에 영향을 받습니다. 중첩된 요소의 폰트 크기를 고려해야 합니다.
rem: 상대적인 크기 단위로, 루트 요소(보통 <html>)의 폰트 크기에 영향을 받습니다. 중첩된 요소의 폰트 크기를 고려하지 않고 루트 요소의 크기를 기준으로 합니다.
반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?
반응형 웹을 구현할 때 주로 %와 em, rem을 사용합니다. %는 부모 요소에 대한 상대적 크기를 지정하므로 화면 크기에 따라 유연하게 조절할 수 있습니다. em과 rem은 폰트 크기 조절에 활용되며, rem은 루트 요소의 크기를 기준으로 하므로 편리합니다.
vw, vh에 대해 설명해주세요.
vw(viewport width): 화면 너비의 1/100을 나타내는 상대적인 크기 단위입니다. 뷰포트의 너비에 따라 크기가 조절됩니다.
vh(viewport height): 화면 높이의 1/100을 나타내는 상대적인 크기 단위입니다. 뷰포트의 높이에 따라 크기가 조절됩니다.
반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
반응형 브레이크 포인트는 디자인의 중요한 변화가 발생하는 지점을 가리킵니다. 브레이크 포인트는 주로 기기의 화면 너비에 따라 설정하며, 주요 디바이스(스마트폰, 태블릿, 데스크톱)에 맞춰서 설정합니다. 미디어 쿼리를 사용하여 화면 너비에 따라 스타일을 변경할 수 있습니다.
CSS 선택자의 우선순위에 대해 설명해주세요.
CSS 선택자의 우선순위는 다음과 같은 규칙을 따릅니다:
인라인 스타일: HTML 요소에 style 속성으로 직접 정의한 스타일이 가장 높은 우선순위를 가집니다.
ID 선택자: #으로 시작하는 ID 선택자가 다른 선택자보다 우선권을 가집니다.
클래스 선택자 및 속성 선택자: .class나 [attribute] 선택자가 일반 요소 선택자보다 우선합니다.
요소 선택자: HTML 요소 이름으로 선택한 경우입니다.
전체 선택자: *로 모든 요소를 선택한 경우로, 가장 낮은 우선순위를 가집니다.
페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
페이지 크기에 관계 없이 항상 같은 비율을 유지하려면 CSS에서 padding-top 또는 padding-bottom을 사용하여 비율을 정의하고, 해당 요소에 position: relative;를 설정한 후 내부 요소에 position: absolute;를 사용하여 비율을 유지하는 요소를 배치할 수 있습니다.
Flexbox에 대해 설명해주세요.
Flexbox는 유연한 박스 모델을 제공하는 CSS 레이아웃 시스템입니다. Flexbox를 사용하면 요소를 효율적으로 배치하고 정렬할 수 있습니다. 주요 속성으로 display: flex;, flex-direction, flex-wrap, justify-content, align-items, flex-grow, flex-shrink, flex-basis 등이 있습니다.
float의 동작에 대해 설명해주세요.
float는 CSS 속성으로, 요소를 왼쪽 또는 오른쪽으로 부유시켜 다른 요소가 주변으로 텍스트 및 내용을 감출 수 있도록 합니다. 주로 이미지와 텍스트를 함께 띄우는 데 사용됩니다. 하지만 float를 사용하면 레이아웃 문제와 중첩 요소의 높이를 처리하는 어려움이 발생할 수 있습니다.
CSS에서 Cascading에 대해 설명해주세요.
Cascading은 CSS 스타일 규칙이 적용되는 우선순위를 결정하는 프로세스를 가리킵니다. Cascading은 다음과 같은 우선순위를 가집니다:
중요도(Importance): !important로 표시된 규칙이 가장 높은 중요도를 가집니다.
특수성(Specificity): 특정성 값이 높은 규칙이 우선권을 가집니다. ID 선택자가 클래스나 요소 선택자보다 높은 특정성을 가집니다.
소스 순서(Source Order): 동일한 중요도와 특정성을 가진 규칙 중 마지막에 선언된 규칙이 우선합니다.
SCSS에 대해 설명해주세요.
SCSS(Sassy CSS)는 CSS의 확장된 문법을 사용하여 스타일을 작성할 수 있는 CSS 전처리기입니다. SCSS 파일은 .scss 확장자를 가지며, CSS와 유사하지만 변수, 중첩 규칙, mixin, 상속, 연산 등의 고급 기능을 제공합니다. SCSS 파일을 CSS로 컴파일하여 브라우저에서 사용합니다.
position 속성에 대해 설명해주세요.
CSS의 position 속성은 요소의 위치를 지정하는 데 사용됩니다. 주요 값으로는 다음이 있습니다:
static: 요소가 일반적인 문서 흐름에 따라 배치됩니다.
relative: 요소를 자기 자신의 정상 위치에서 상대적으로 이동시킬 수 있습니다.
absolute: 요소를 가장 가까운 위치 지정 부모 요소를 기준으로 위치시킵니다.
fixed: 요소를 뷰포트 기준으로 고정시킵니다.
sticky: 요소가 스크롤 영역을 기준으로 상대적 또는 고정 위치에 머무릅니다.
margin과 padding에 대해 설명해주세요.
margin은 요소의 외부 여백을 지정하며, 주변 요소와의 간격을 조절합니다. padding은 요소의 내부 여백을 지정하며, 내부 콘텐츠와 경계(테두리) 사이의 간격을 조절합니다. 이 두 속성은 요소의 크기와 레이아웃에 영향을 미칩니다.
HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
HTML 문서를 파싱하고 렌더링하는 도중에 JavaScript가 실행되면, 브라우저는 JavaScript의 실행을 위해 렌더링 프로세스를 중지합니다. 이로 인해 페이지의 렌더링이 지연될 수 있으며, 이것이 "렌더링 블로킹" 또는 "렌더링 차단"이라고 불립니다. 이를 방지하기 위해 비동기 스크립트 로드, defer 또는 async 속성 사용 등의 방법을 사용할 수 있습니다.
Box model에 대해 설명해주세요.
Box model은 웹 페이지에서 요소의 크기와 레이아웃을 정의하는 모델입니다. Box model은 다음으로 구성됩니다:
Content: 요소의 실제 내용 부분입니다.
Padding: Content와 Border 사이의 여백 영역입니다.
Border: 요소 주변의 테두리입니다.
Margin: 요소와 주변 요소 사이의 외부 여백 영역입니다.
Attribute와 Property의 차이에 대해 설명해주세요.
Attribute는 HTML 요소의 속성을 가리키며, HTML 문서에서 태그에 정의된 속성 값을 나타냅니다. Property는 JavaScript 객체의 속성을 가리키며, DOM(Document Object Model)에서 요소의 속성 값에 대한 레퍼런스를 나타냅니다. Attribute 값과 Property 값이 동일하지 않을 수 있으며, JavaScript에서 Property를 변경하면 렌더링 업데이트가 발생할 수 있습니다.
display 속성에 어떤 것들이 있는지 설명해 주세요.
display 속성은 요소의 표시 방법을 지정하는 데 사용됩니다. 주요 값으로는 다음이 있습니다:
block: 요소를 블록 레벨 요소로 표시하며, 새로운 줄에서 시작합니다.
inline: 요소를 인라인 요소로 표시하며, 같은 줄에 다른 인라인 요소와 함께 표시됩니다.
inline-block: 인라인 박스와 같이 표시되지만, 내용에 따라 블록 레벨 크기를 가집니다.
none: 요소를 화면에 표시하지 않습니다.
flex: Flexbox 레이아웃 컨테이너로 요소를 표시합니다.
grid: Grid 레이아웃 컨테이너로 요소를 표시합니다.
CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
CSS 애니메이션은 CSS 트랜지션과 키프레임 애니메이션을 사용하여 스타일 속성을 기반으로 애니메이션을 만듭니다. JavaScript 애니메이션은 JavaScript 코드를 사용하여 요소의 스타일 속성을 직접 제어하여 애니메이션을 만듭니다. 주요 차이점은 다음과 같습니다:
CSS 애니메이션은 CSS를 사용하므로 애니메이션 코드가 더 간단하고 유지보수가 쉽습니다.
JS 애니메이션은 동적인 애니메이션 및 조건부 애니메이션을 더 쉽게 다룰 수 있습니다.
CSS 애니메이션은 GPU 가속을 활용하여 성능이 더 우수할 수 있습니다.
CSS in JS의 장단점에 대해 설명해주세요.
CSS in JS는 JavaScript 코드 내에서 스타일을 정의하고 관리하는 접근 방식입니다.
장점:
컴포넌트 기반 스타일링: 각 컴포넌트의 스타일을 격리하여 충돌을 방지합니다.
동적 스타일링: JavaScript로 조건부 스타일을 쉽게 적용할 수 있습니다.
스타일 최적화: 사용되지 않는 스타일을 제거하고, 필요한 스타일만 렌더링하여 성능을 최적화할 수 있습니다.
단점:
학습 곡선: 기존의 CSS 작성 방식과 다르므로 새로운 학습 곡선이 필요합니다.
초기 로딩 지연: 스타일 코드가 JavaScript 번들에 포함되어 초기 로딩 시간이 증가할 수 있습니다.
SEO 이슈: 일부 검색 엔진은 JavaScript로 렌더링된 콘텐츠를 인식하기 어려울 수 있습니다.
시맨틱 마크업에 대해 설명해주세요.
시맨틱 마크업은 HTML 요소를 사용하여 문서 구조와 의미를 명확하게 표현하는 것을 가리킵니다. 시맨틱 요소는 웹 페이지의 내용과 의미를 이해하는 데 도움을 줍니다. 예를 들어, <header>, <nav>, <main>, <footer> 등의 요소는 페이지의 구조를 나타내며 검색 엔진과 스크린 리더가 이해하기 쉽습니다. 시맨틱 마크업은 웹 접근성과 SEO 향상에 기여합니다.
HTML5의 태그에 대해 설명해주세요.
HTML5는 다양한 새로운 시맨틱 요소를 도입했습니다. 몇 가지 중요한 HTML5 태그는 다음과 같습니다:
<header>: 문서나 섹션의 머릿말을 나타냅니다.
<nav>: 네비게이션 메뉴를 정의합니다.
<main>: 문서의 주요 콘텐츠를 정의합니다.
<article>: 독립적으로 구분되거나 재사용 가능한 콘텐츠를 나타냅니다.
<section>: 문서의 섹션을 나타내며 주로 <article>과 함께 사용됩니다.
<aside>: 별도의 콘텐츠, 사이드바 또는 광고를 나타냅니다.
<footer>: 문서나 섹션의 바닥글을 나타냅니다.
script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
<script> 태그에서 async와 defer 속성은 스크립트의 비동기 로드 방식을 제어하는 데 사용됩니다:
async: 스크립트를 비동기적으로 로드하며, 스크립트 로딩과 HTML 파싱이 병렬로 진행됩니다. 스크립트가 다운로드되면 즉시 실행됩니다. 페이지에 여러 개의 async 스크립트가 있을 때 실행 순서는 로딩이 끝난 순서에 따라 달라집니다.
defer: 스크립트를 비동기적으로 로드하며, 스크립트 로딩은 HTML 파싱과 병렬로 진행되지만 스크립트 실행은 문서 파싱이 끝난 후에 순서대로 진행됩니다. 따라서 스크립트 실행 순서가 보장됩니다.
가상 클래스에 대해 설명해주세요.
가상 클래스는 CSS에서 특정 상태나 조건에 적용되는 스타일을 정의하는 데 사용됩니다. 가상 클래스는 선택자 뒤에 콜론(:)을 사용하여 정의하며, 주로 다음과 같은 상태에 사용됩니다:
:hover: 마우스가 요소 위로 올라갔을 때 적용됩니다.
:active: 요소가 활성 상태일 때 적용됩니다(예: 클릭 시).
:focus: 요소가 포커스를 받았을 때 적용됩니다(예: 입력 필드에 커서가 위치했을 때).
:nth-child(n): 요소가 형제 중에서 n번째 자식 요소일 때 적용됩니다.
:not(selector): 주어진 선택자(selector)와 일치하지 않는 요소에 적용됩니다.
margin 병합에 대해 설명해주세요.
Margin 병합은 인접한 블록 수준 요소의 상단 및 하단 여백(Margin)이 서로 결합되는 현상을 가리킵니다. Margin 병합은 다음 규칙에 따라 발생합니다:
형제 요소 사이의 Margin 병합: 인접한 형제 요소 사이의 상단 및 하단 여백 중 큰 여백만 남고 작은 여백은 무시됩니다.
부모와 자식 요소 사이의 Margin 병합은 발생하지 않습니다.
요소의 테두리 또는 패딩이 Margin 병합을 방지합니다.
Margin 병합은 CSS 레이아웃을 예측하기 어렵게 만들 수 있으므로 주의해야 합니다.
'Development > 기술면접 정리' 카테고리의 다른 글
| 신입 프론트엔드 개발자 기술면접 답변 (React, TS, 프론트엔드 전반) (1) | 2023.10.07 |
|---|---|
| 신입 프론트엔드 개발자 기술면접 답변 정리 (Javascript) (1) | 2023.10.07 |
| 기술면접 답변 정리 (알고리즘, 자료구조) (0) | 2023.10.06 |
| 기술면접 답변 정리 (데이터베이스) (0) | 2023.10.05 |
| 기술면접 답변 정리 (네트워크) (0) | 2023.10.05 |
블로그의 정보
생각보다 실천을
yjym33