이번 포스팅에는 HTML과 CSS에 관한 프론트엔드 면접 질문과 답변을 정리하겠습니다.
추가적으로 내용에 대한 질문이나 수정사항이 있다면 댓글로 남겨주시면 감사하겠습니다.
HTML
DOCTYPE 이란 무엇인가요?
DOCTYPE은 문서의 유형을 정의하기 위해 사용하는 선언문으로 HTML 문서가 어떤 버전의 HTML을 사용하는지 명시하는 역할을 합니다.
HTML과 XML의 차이
HTML과 XML은 모두 마크업언어지만 목적이 다릅니다.
HTML의 경우 웹페이지 구조를 나타내고 표시하기 위해 사용되고 XML의 경우 데이터를 저장하거나 전송하기 위해 사용됩니다.
태그 또한, HTML은 정해진 태그를 사용해야하지만 XML의 경우 사용자가 원하는 태그를 사용할 수 있습니다.
HTML이란 무엇인가?
HTML(HyperText Markup Language)은 웹 페이지를 구조화하기 위한 마크업 언어입니다.
웹 브라우저는 HTML을 해석하여 사용자가 볼 수 있는 웹 페이지를 렌더링합니다.
HTML5의 주요 특징은 무엇인가?
HTML5는 HTML의 최신 표준으로 시멘틱 태그가 추가되고, 멀티미디어 지원, 폼 기능 개선 등이 있습니다.
시멘틱 태그(Semantic Tag)란?
시멘틱(Semantic) 태그는 태그의 이름만 보고도 해당 태그의 역할과 의미를 쉽게 이해할 수 있도록 만든 HTML 태그입니다.
<header>, <nav>, <footer> 등이 이에 해당됩니다.
시멘틱 태그를 사용하게 되면 가독성이 향상되고 SEO가 개선됩니다.
메타 태그(Meta Tag)란?
페이지에 대한 중요한 정보를 검색 엔진에 제공하는 요소로 HTML 코드의 헤더 섹션에 있습니다.
HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
웹 브라우저는 HTML을 위에서 아래로 순차적으로 파싱하며 렌더링 엔진과 JavaScript 엔진이 함께 동작합니다. 하지만 기본적으로 JavaScript는 싱글 스레드(Single Thread)에서 동작하기 때문에, 실행되는 동안 HTML 렌더링이 일시 중단됩니다.
브라우저 동작 중 중단되는 과정
- 브라우저는 HTML을 위에서 아래로 순차적으로 파싱하며 DOM을 구성
- JavaScript 코드(특히
<script>태그)를 만나면 실행을 위해 HTML 파싱을 중단 - JavaScript가 실행되는 동안 브라우저는 다음 HTML 요소를 파싱하거나 렌더링하지 않음
- JavaScript 실행이 끝나야 HTML 파싱이 다시 진행됨
Attribute와 Property의 차이
Attribute : HTML 태그에 정의된 속성이며, 문자열 값만 저장 가능합니다. (변경해도 DOM 프로퍼티에는 영향 없음)
Property : JavaScript에서 DOM 객체가 가지는 프로퍼티이며, JavaScript에서 조작할 수 있고 값이 실시간으로 변경됩니다. (UI 반영 가능)
즉, Attribute는 HTML의 초기 값, Property는 현재 상태를 나타냅니다.
script 태그에서 Async와 Defer의 차이
HTML에서 <script> 태그를 사용할 때, JavaScript가 HTML 파싱과 어떤 순서로 실행되는지에 영향을 주는 속성입니다.
Async: 스크립트 다운로드와 실행을 동시에 진행하여 다운로드가 완료되면 즉시 실행됩니다. 즉, HTML 파싱이 중단됩니다.Defer: 스크립트 다운로드는 비동기로 진행하고 실행은 HTML 파싱 완료 후 진행됩니다. 즉, HTML을 모두 파싱 후에 순서대로 실행합니다.
CSS
px, em, rem, vw, vh에 대해 설명해주세요
px: 픽셀은 고정된 길이 단위로 화면상의 1픽셀을 기준으로 합니다.em: 부모요소의 size를 기준으로 값이 정해집니다. 2em의 경우 부모 사이즈의 2배가 됩니다.rem: root요소의 size를 기준으로 값이 정해집니다.vw: 뷰포트 너비로 브라우저 창의 너비의 비율로 정해집니다. 1vw는 1%의 너비입니다.vh: 뷰포트 높이로 브라우저 창의 높이의 비율로 정해집니다. 1vh는 1%의 높이입니다.
float의 동작에 대해 설명해주세요
float는 요소를 왼쪽이나 오른쪽으로 띄워 다른 콘텐츠가 그 주위에 배치되도록 하며, 주로 텍스트와 이미지를 함께 배치할 때 유용합니다.
하지만 float는 부모 요소가 자식을 감싸지 않게 만들 수 있기 때문에 clearfix 기법을 사용하여 해결할 수 있습니다.
Flexbox에 대해 설명해주세요
Flexbox는 CSS에서 레이아웃을 쉽게 구성할 수 있도록 제공하는 1차원 레이아웃 시스템입니다.
컨테이너 내부 요소들을 정렬, 크기 조정, 배치하는 데 유용합니다.
CSS에서 Cascading에 대해 설명해주세요
CSS에서 Cascading은 스타일 시트가 어떤 순서로 적용될지를 결정하는 우선순위 규칙을 의미합니다.
Cascading의 3가지 주요 원칙이 있습니다.
1. !important가 가장 우선순위가 높습니다.
2. 소스코드의 순서에서 나중에 선언된 스타일이 우선하게 됩니다.
3. 구체적인 선택자가 우선순위가 높습니다. (인라인 스타일 > ID > 클래스 선택자 > 요소 선택자)
CSS에서 inline, internal, external 스타일의 차이
inline: HTML요소의 style속성으로 직접 스타일을 정의internal: HTML문서에서<head>에<style>태그를 사용하여 스타일을 정의external: 별도의.css파일을 생성하여<link>태그로 연결하는 방식
CSS의 position 속성에 대해 설명해주세요
static: 기본값으로 요소가 문서의 정상적인 흐름에 따라 배치됩니다.relative: 요소가 원래 위치를 기준으로 상대적인 위치에 배치absolute: 요소가 가장 가까운 position 속성이 static이 아닌 조상 요소를 기준으로 배치됩니다.fixed: 요소가 뷰포트를 기준으로 고정된 위치에 배치됩니다.sticky: 요소가 스크롤에 따라 움직이지만, 특정 위치를 지나면 고정 상태로 변합니다.
CSS의 display 속성에 대해 설명해주세요
display 속성은 요소가 어떻게 표시될지를 정의하는 속성입니다.
block: 요소가 블록 수준으로 처리되며, 가로 전체를 차지합니다.inline: 요소가 인라인 수준으로 처리되며, 내용의 크기만큼 차지합니다.inline-block: 인라인 요소처럼 가로로 나열되지만, 블록 요소처럼 너비와 높이를 지정할 수 있습니다.none: 요소가 페이지에서 사라지며 공간도 차지하지 않습니다.flex: 요소가 flexbox 컨테니어로 변환됩니다.grid: 요소가 grid 컨테니어로 변환됩니다.table: 요소가 table처럼 동작합니다.
z-index는 무엇이고, 어떻게 동작하나요?
z-index는 쌓임 순서(stack order)를 정의하는 데 사용됩니다. 요소들이 겹칠 때, 어떤 요소가 앞에 오고, 어떤 요소가 뒤에 올지를 결정합니다. z-index 값이 높을수록 그 요소는 앞에 위치하게 되며, 낮을수록 뒤에 위치합니다.
z-index 동작 원리
z-index는 position 속성이 relative, absolute, fixed, sticky와 같이 위치가 설정된 요소에서만 동작합니다. position: static인 요소에는 적용되지 않습니다.
기본적으로, 같은 stacking context(쌓임 컨텍스트) 내에서 z-index가 작용합니다. 즉, z-index 값은 부모 요소의 position이 relative나 absolute인 경우에도 영향을 받습니다.
visibility: hidden과 display: none의 차이는?
둘 다 요소를 보이지 않게 만듭니다.
visibility: hidden의 경우는 여전히 공간을 차지하고 있어서 렌더링이 됩니다. (렌더 트리에 존재)
display: none의 경우는 공간을 차지하고 있지 않아 렌더링이 되지 않습니다. (렌더 트리에 없음)
CSS의 Box model에 대해 설명해주세요
Box model은 4가지의 요소로 이루어집니다.
내부 영역인 Content와, 내부 여백인 padding, 테두리인 border, 외부 여백인 margin입니다.
CSS의 box-sizing에 대해 설명해주세요
CSS의 box-sizing에는 기본값인 content-box와 border-box가 있습니다.
content-box의 width와 height속성은 컨텐츠 영역의 너비 및 높이값으로 사용되고 border-box의 width와 height속성은 (contents + padding + border)를 너비 및 높이값으로 사용합니다.
반응형 웹 디자인을 위한 CSS 기법에는 어떤 것이 있는가?
media-query를 사용하거나 요소를 vw, vh와 같이 뷰포트 기준으로 만들면 됩니다.
CSS의 가상 클래스(:hover, :focus 등)와 가상 요소(::before, ::after)의 차이
가상 클래스는 요소의 상태나 상호작용을 기반으로 스타일을 적용하며, 주로 hover나 focus와 같은 사용자와의 상호작용에 반응합니다.
또한, 기존 요소의 상태에 추가적인 스타일을 적용합니다.
가상 요소는 요소 내부에 콘텐츠를 삽입하거나 요소의 일부를 스타일링할 때 사용됩니다.
또한, 기존 요소의 일부(앞, 뒤)나 존재하지 않던 가상의 컨텐츠에 스타일을 적용합니다.
CSS에서 will-change 속성의 역할은?
CSS의 will-change 속성은 요소가 곧 변경될 CSS 속성을 미리 브라우저에 알려, 렌더링 최적화를 수행할 수 있도록 돕는 역할을 합니다.
브라우저가 GPU등을 사용하여 사전 최적화를 수행해 빠른 렌더링을 그낭하게 하여 불필요한 레이아웃 변경이나 리페인트를 줄일 수 있습니다.
페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
일정한 비율을 유지하기 위해 CSS의 aspect-ratio속성을 활용하거나 padding-top을 활용할 수 있습니다.
또한, 요소를 vw, vh와 같이 뷰포트 기준으로 만들면 됩니다.
CSS에서 트랜지션(transition)과 애니메이션(animation)의 차이
트랜지션
트랜지션이 일어나기 위해서는 트리거가 필요하며, 스타일 속성이 한 번 변화할 때만 사용합니다. 즉, 한번의 이벤트로 반복실행이 되지 않습니다.
애니메이션
트리거 없이 자동실행이 가능하고 반복실행하거나 더 정교한 타이밍에 실행하도록 조절이 가능합니다.
또한, @keyframes를 활용하여 여러 단계의 애니메이션도 설정이 가능합니다.
CSS 애니메이션과 JS 애니메이션의 차이
CSS 애니메이션은 transition, animation 등을 사용합니다. 주로 간단한 애니메이션에 사용이 되고, GPU가속을 하여 부드러운 렌더링이 가능합니다.
하지만, 사용자 입력에 반응하는 동적인 애니메이션은 구현이 어렵습니다.
JS 애니메이션은 CSS 애니메이션과 다르게 정확하게 제어가 가능합니다.
CSS 애니메이션보다 성능이 낮을 수 있지만 클릭, 스크롤과 같은 사용자 입력에 반응하여 애니메이션을 만들 수 있습니다.
또한, requestAnimationFrame()과 같은 함수를 이용하면 부드러운 렌더링이 가능합니다.
SCSS에 대해 설명해주세요
SCSS(Sassy CSS)는 CSS의 확장판으로, CSS보다 더 효율적이고 유지보수하기 쉬운 스타일링을 제공하는 스타일 시트 언어입니다.
CSS를 중첩하거나, 변수화하여 사용할 수 있고 확장과 상속 등 여러 기능을 사용할 수 있습니다. 또한, 기존 CSS코드도 SCSS코드로 사용할 수 있습니다.
CSS in JS에 대해 설명해주세요
CSS in JS는 JavaScript 코드 안에서 CSS 스타일을 정의하고 관리하는 기법입니다.
이를 통해, 스타일을 컴포넌트처럼 관리할 수 있고, 동적으로 스타일링이 가능합니다.
또한, 기존의 .css파일에 작성한 방식은 전역스타일이기 때문에 스타일 충돌이나 오염이 일어날 수 있지만 CSS in JS는 스타일의 유효 범위가 해당 요소에만 제한되므로 그러한 문제가 없습니다.
margin 병합에 대해 설명해주세요
인접한 요소의 margin이 중복되지 않고 더 큰 하나의 값만 적용되는 현상입니다.
예를 들어, 위 아래의 요소가 각각 margin-bottom이 10px, margin-top이 20px이라면 두 요소 사이의 margin값은 margin 병합에 의해 20px이 됩니다.
다음 포스팅에는 JavaScript와 TypeScript에 관하여 질문과 답변을 정리해보겠습니다.
글이 매번 꼼꼼해서 너무 좋네요ㅎㅎ
참고하겠습니다~