CSS Quiz - class/id, resetCSS, float, z-index, BFC, Clearing, Image Sprites, Image Replacement, Screenreader-only

이소라·2023년 8월 29일

Interview Questions

목록 보기

67/67

1. class와 id의 차이점에 관해서 설명해주세요.

id selector는 중복될 수 없는 유일한 값이고, class selector는 중복될 수 있는 값입니다.
id selector는 중복될 수 없는 값이므로 요소를 특정할 때 주로 사용합니다.
class selector는 중복될 수 있으므로 여러 개의 요소에서 스타일을 재사용할 수 있습니다.
class selector는 공백으로 구분하여 여러 개 지정할 수 있으므로 한 요소에 여러 스타일을 적용할 수 있습니다.

2. “reset” CSS가 무엇인지, 어떻게 유용한지 설명해주세요.

웹 브라우저마다 각자 다른 기본 스타일이 지정되어 있으므로 이를 초기화함으로써 다양한 웹 프라우저에서도 동일한 스타일이 적용되도록 하는 초기화 기법입니다.

2.1 Nomralize CSS에 대해 설명해주세요.

모든 브라우저의 스타일을 동일하게 유지하는 스타일 기법입니다.
모든 스타일을 초기화하지 않고, 정규화가 필요한 스타일만 동일하게 설정합니다.

3. floats가 어떻게 동작하는지 설명해주세요.

float된 요소는 문서의 정상 흐름에서 벗어나서 요소를 포함하고 있는 컨테이너 박스의 끝에 도달하거나 또 다른 float 요소를 만날 때까지 왼쪽 또는 오른쪽으로 이동합니다.
- 요소가 문서의 정상 흐름에서 벗어난다는 것은 기본적으로 페이지의 다른 요소가 해당 요소의 존재를 더 이상 알지 못하므로 해당 요소에 반응하지 않는다는 것을 말합니다.
- float된 요소는 새로운 Block Formatting Cotext를 생성하고, 그 안의 모든 것들은 페이지의 나머지와 분리된 작은 레이아웃으로 볼 수 있습니다.

4. z-index에 관해 설명해주세요.

z-index 속성은 HTML 컨텐츠를 렌더링할 때, 객체의 레이어링 순서를 조정해주는 속성입니다.
z-index 속성은 요소의 박스가 시각적으로 겹쳐 있을 때 특히 중요합니다.
z-index 속성은 position이 static이 아닌 요소와 그 요소의 자식 요소들 또는 flex 요소들에 대한 z-order를 설정합니다.

4.1 Stacking context에 대해 설명해주세요.

stacking context는 사용자를 기준으로 가상의 z축을 따라 HTML 요소를 3차원으로 개념화한 것입니다.
HTML 요소는 속성에 기반한 우선순위에 따라 이 공간을 차지합니다.
position이 static이 아닌 요소, 그 자식 요소, flex 요소는 stacking context를 형성하기 때문이 z-index에 영향을 받습니다.
stacking context는 다른 stacking context에 포함될 수 있고, 함께 stacing context 계층 구조를 만들 수 있습니다.
stacking context는 형제 요소와 완전히 독집적이고, stacking이 처리될 때 하위 요소만 고려됩니다.

5. BFC(Block Formatting Context)에 관해 설명해주세요

페이지의 모든 요소는 서식 컨텍스트의 일부 또는 특정 방식으로 컨텐츠를 배치하도록 정의된 영역의 일부입니다.
그 중에서 BFC(블록 서식 컨텍스트)는 블록 레이아웃 규칙에 따라 하위 요소를 배치합니다.
HTML 요소의 블록 안의 모든 요소는 블록 및 인라인 레이아웃 규칙에 따라 문서의 일반적인 프름에 의해 배치됩니다.
블록 서식 컨텍스트에 참여하는 요소들은 CSS Box Model에 설명된 규칙을 사용합니다.
서식 컨텍스트는 레이아웃에 영향을 주지만, 일반적으로 레이아웃을 변경하기 보다는 floats의 위치 지정 및 지우기를 위해 새로운 블록 서식 컨텍스트를 만듭니다.
- 왜냐하면 새로운 블록 서식 컨텍스트를 만드는 요소는 내부 floats를 포함하고 외부 floats를 제외하며 margin collapse를 억제하기 때문입니다.

5.1 BFC가 생성되는 요소들에 대해 말씀해주세요.

문서의 최상위 요소 <html>
float가 none이 아닌 요소 (floats)
position이 absolute거나 fixed인 요소
dispiay가 inline-block인 요소
display가 table-*인 요소
overflowrk visible이나 clip이 아닌 요소
display가 flow-root인 요소
contain이 layout이나 content이거나 paint인 요소
display가 flex 또는 inline-flex인 자식 요소
display가 grid 또는 inline-grid인 자식 요소
column-count나 column-width가 auth가 아닌 요소
column-span이 all인 요소

6. 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떨 때 어떻게 사용하는 것이 적절한지 설명하세요.

클리어링은 float 속성이 주변 요소의 배치에 영향을 미치지 않도록 하는 것을 말합니다.
부모 자식 관계에서 자식 요소에 float가 추가되어 있을 때,
1. float 요소가 넘치는 경우, 부모 요소에 overflow 속성을 hidden으로 설정하여 문제를 해결할 수 있습니다.
2. 부모 요소에 height 값 없고 float된 자식 요소만 있다면, 부모 요소에 height 값을 설정하여 문제를 해결할 수 있습니다.
3. float된 자식 요소 아래에 다른 요소를 배치하고 싶다면, 배치하고 싶은 요소에 clear 속성을 both로 설정하여 문제를 해결할 수 있습니다.
4. float된 자식 요소 아래에 배치하고자 하는 요소는 없지만 float 속성을 없애고 싶다면, 가상 요소(::after, ::before)에 clear 속성을 both로 설정하여 문제를 해결할 수 있습니다.

7. CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상하는지 설명하세요.

이미지를 별도의 이미지 파일로 포함하는 것보다 단일 이미지로 전송하는 것이 메모리와 대역폭에 훨씬 유리하며, background position을 사용하여 동일한 이미지 파일에서 개별 이미지를 구분할 수 있으므로 HTTP 요청 횟수를 줄일 수 있습니다.
여러 개의 이미지 대신 하나의 이미지만 가져오면 되므로 이미지 로딩 속도를 줄일 수 있습니다.
이미지 스프라이트를 사용하여 이미지를 background 속성으로 적용하게 되면 스크린리더가 읽을 필요가 없는 배경 이미지로 인식하게 되어 탐색 속도를 향상될 수 있습니다.

7.1 CSS Sprites의 단점에 대해 설명해주세요.

이미지가 추가된다면 스프라이트 이미지를 다시 만들어야하는 번거로움이 있습니다.
- 이미 만들어진 이미지 파일은 각각의 포지션 값이 정해져 있기 때문에 이미지 파일을 바꾸면 이전에 적용되어 있던 설정값들을 모두 바꿔주어야 하는 번거로움이 생깁니다.
스프라이프 이미지 파일에 문제가 생긴다면, 스프라이트 이미지가 적용된 부분에서는 이미지를 볼 수 없는 상황이 발생합니다.

8. Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명해주세요.

Image Replacement는 스크린 리더 사용자들을 위한 이미지를 대신하여 대체 텍스트를 제공하는 기법입니다.
저는 Image Replacement를 사용해보지 않아서 선호하는 기술이 없습니다.
만약 Image Replacement를 사용한다면 tailwindCSS에서 제공하는 sr-only 클래스를 사용할 것 같습니다.

sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

9. 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?

reset css를 사용하여 기본 스타일을 초기화한 후에 스타일링을 합니다.

10. 시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.

hidden 속성을 줘서 브라우저가 요소의 컨텐츠를 렌더링하지 않게 할 수 있습니다.
position을 absolute, left를 -99999px로 설정하여 화면 외부에 배치함으로써 시각적으로 숨길 수 있습니다.
text-indent에 -100000px을 줌으로써 블록 요소 내 텍스트를 시각적으로 숨길 수 있습니다.

참고

이소라

이전 포스트

CSS Quiz - class/id, resetCSS, float, z-index, BFC, Clearing, Image Sprites, Image Replacement, Screenreader-only

Interview Questions

1. class와 id의 차이점에 관해서 설명해주세요.

2. “reset” CSS가 무엇인지, 어떻게 유용한지 설명해주세요.

2.1 Nomralize CSS에 대해 설명해주세요.

3. floats가 어떻게 동작하는지 설명해주세요.

4. z-index에 관해 설명해주세요.

4.1 Stacking context에 대해 설명해주세요.

5. BFC(Block Formatting Context)에 관해 설명해주세요

5.1 BFC가 생성되는 요소들에 대해 말씀해주세요.

6. 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떨 때 어떻게 사용하는 것이 적절한지 설명하세요.

7. CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상하는지 설명하세요.

7.1 CSS Sprites의 단점에 대해 설명해주세요.

8. Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명해주세요.

9. 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?

10. 시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.

참고

Quiz - OAuth 정의, 단점, 로그인, 토큰

0개의 댓글