프론트엔드 기술면접 4

⭐️CSS

 

📌z-index와 스택 컨텍스트(stacking context)가 어떻게 형성되는지 설명해주세요

• z-index는 요소들의 쌓이는 우선순위를 결정하는 CSS 속성이며, position 속성 값이 static이 아닌 요소에만 영향을 미치고 z-index 값이 높을수록 요소는 위에 위치하게 됩니다
• 스택 컨텍스트는 요소들이 쌓이는 방식을 나타내며, 레이어를 포함하는 요소입니다 자식 요소의 z-index 값은 해당 요소를 기준으로 설정되며, 해당 컨텍스트 밖의 요소는 그 사이의 레이어에 올 수 없습니다.
• 예를들어 요소 B가 요소 A 위에 있을 때, 요소 A의 하위 요소 C는 요소 B보다 위에 올 수 없습니다. 그러나, 요소 B가 스택 컨텍스트를 형성하면, 요소 B 내부에서 다시 새로운 스택 컨텍스트가 형성될 수 있으며, 이 스택 컨텍스트 내에서는 자식 요소의 z-index 값이 해당 요소를 기준으로 설정됩니다
• 따라서, z-index와 스택 컨텍스트는 요소들이 쌓이는 방식을 조절하는데 사용되며, 이를 통해 HTML/CSS 요소들의 층위를 조절할 수 있습니다.

 

📌CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.

• 선택자의 가장 오른쪽에 있는 요소는 가장 먼저 확인되고, 그 다음 왼쪽의 요소가 조건에 맞는지 확인합니다. 이를 반복하여 가장 왼쪽의 요소까지 확인합니다
• 선택자가 특정 요소를 선택할 때 필요한 계산을 최소화하고 빠르게 처리할 수 있습니다

 

 

📌CSS in JS( ex. styled component )의 장단점에 대해서 설명해 주세요

• CSS-in-JS는 단어 그대로 JavaScript코드에서 CSS를 작성하는 방식을 말합니다
• CSS파일의 유지보수가 필요 없어집니다. 컴포넌트 레벨로 추상화하기 때문에 단일 파일에서 관리가 가능합니다
• javascript의 코드를 활용할 수 있습니다
• CSS의 범위를 제한하여 스타일 충돌을 방지할 수 있습니다. 컴포넌트 단위로 스타일을 작성하고 적용하기 때문에, 전역 스타일을 더 이상 신경쓰지 않아도 되므로, 코드 유지보수가 더욱 쉬워집니다.
• 인라인으로 삽입하여 로딩 속도가 빠르고 페이지가 더 빨리 렌더링됩니다.
• 별도의 라이브러리를 설치해야 하므로 번들 크기가 커집니다
• 인라인으로 삽입하기 때문에, 스타일 코드의 양이 많을 경우, 번들 크기가 커져 로딩 속도가 느려집니다

 

📌relative, fixed, absolute, static 요소의 차이점은 무엇인가요?

• relative, fixed, absolute, static은 CSS position 속성의 값으로, 요소를 배치하는 방법을 결정합니다.
• static은 기본적으로 적용되는 위치 지정값이며 일반적인 흐름에따라 요소가 배치됩니다
• relative 일반적인 흐름에따라 요소를 배치하고 자기자신을 기준위치값을 지정합니다 상대적으로 배치하기 때문에 다른요소와의 관계에 따라 움집입니다
• absolute 요소의 일반적인 흐름이 아닌 가장 가까운 특정 부모요소에 따라 상대적으로 배치합니다 부모에 특정한 포지션이 없다면 상위 컨테이너 블록을 기준으로 합니다
• fixed 요소를 일반적인 흐름이 아닌 뷰포트를 기준으로 좌표속성을 지정합니다 다른요소와 겹치지 않게 고정위치에 유지됩니다
• sticky 요소를 일반적인 문서의 흐름에서 제거하고 스크롤이 가능한 부모 요소를 기준으로 위치가 결정됩니다

 

 

📌CSS 스프라이트(CSS Sprites)를 설명하고 장단점에 대해서 설명해주세요

• 여러개의 이미지를 하나의 이미지 파일로 합치고 해당 이미지 파일에서  각 이미지를 background-position 속성을 이용하여 특정위치에 표시하는 기술입니다
• 여러개의 이미지를 한개의 파일로 합치면 이미 파일을 로드할때 HTTP 요청 횟수가 줄어들어 페이지 로딩 속도가 향상됩니다
• 한번 다운로으한 이미지 파일은 브라우저 캐시에 저장되어 다음에 같은 페이지를 방문 할때 다시 다운로드 하지 않아도 되므로 빠른 페이지 로딩 속도를 유지할 수 있습니다
• 만약 이미지 파일의 크기가 커지면 오히려 페이지 로딩속도가 느려질수 있으며 이미지 표시를 할 때 다른위치에서 잘못된 이미지를 보여주는 문제가 발생할  수 있습니다
• 이미지 파일을 수정해야 하는 경우 스프라이트 이미지 파일 전체를 수정해야 하므로 유지보수의 어려움이 있을수 있습니다

 

 

📌float을 해제하는 방법을 설명해 주세요

• 요소의 부모태그에 overflow:hidden을 적용해줍니다. 
• 요소의 부모태그에 overflow:auto를 적용해줍니다.
• 요소의 부모태그에 강제로 높이 값을 지정해 줍니다
  
• 요소의 부모태그애 float을 설정해줍니다
• 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해줍니다*권장*