HTML, CSS Quiz - 단위, flex, position
1. px, em, rem의 차이에 대해 설명해주세요.
- px는 픽셀 단위를 말합니다.
- 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖습니다.
- 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식합니다.
- em은 요소에 지정된 크기에 대한 상대 단위를 말합니다.
- typographical properties (font-size, ...) : 부모 요소의 font-size에 대한 상대 단위
- other properties (width, ...) : 요소의 font-size에 대한 상대 단위
- rem은 최상위 요소(hrml)의 font-size에 대한 상대 단위를 말합니다.
1.1 반응형 웹을 구현할 때 이 단위들 중 어떤 단위를 사용하나요?
- 반응형 웹을 구현할 때 rem을 사용합니다.
- root의 font-size라는 하나의 기준에 대한 상대 단위이므로 계산하기가 비교적 쉽습니다.
- 중첩에 영향을 받지 않습니다.
2. vw, vh에 대해 설명해주세요.
- vw는 viewport width의 1/100을 말합니다.
- vh는 viewport height의 1/100을 말합니다.
2.1 viewport에 대해 설명해주세요.
- viewport는 현재 보고 있는 화면에 표시되는 부분을 의미합니다.
3. 반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
- 반응형 브레이크 포인트는 보통 media query를 사용하여 잡습니다.
- media query는
@media를 사용하여 미디어별로 스타일을 지정하는 것을 말합니다.
- 일반적으로 반응형 웹 디자인은 vw를 기준으로 합니다.
- viewport의 width에 따라 반응하는 범위(breakpoint)를 지정할 수 있습니다.
4. CSS 선택자의 우선순위에 대해 설명해주세요.
- CSS 선택자는 ID 선택자, class 선택자, tag 선택자와 가상 선택자 그리고 전체 선택자 순으로 우선순위를 가집니다.
5. 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야 할까요?
- aspect-ratio 속성을 사용하여 요소의 비율을 설정할 수 있습니다.
- 부모 요소의 width를 기준으로 padding-top 또는 padding-bottom 속서에 %값을 설정하여 요소의 비율을 조정할 수 있습니다.
- calc() 함수를 사용하여 요소의 비율을 설정할 수 있습니다.
6. Flexbox에 대해 설명해주세요.
- flexbox는 행이나 열을 기준으로 요소를 정렬하는 1차원 레이아웃 메서드입니다.
- flexbox를 적용해서 요소가 추가적인 공간을 차지할 수 있도록 늘리거나, 더 작은 공간에 맞도록 줄일 수 있습니다.
6.1 flexbox의 장점에 대해 설명해주세요.
- 1줄의 코드 추가로 수평 정렬이 가능합니다.
- 요소의 상하좌우 정렬, 순서 변경이 간단합니다.
- 요소간 간격 조절이 간단합니다.
- 서로 다른 height를 갖는 요소의 수평정렬 시, 상하중앙 정렬이 간단하게 가능합니다.
7. float의 동작에 대해 설명해주세요.
- 요소가 float될 때, 문서의 정상 흐름에서는 제외되지만 여전히 문서의 일부로 남아있습니다.
- float된 요소는 컨테이너 박스의 끝이나 또 다른 float된 요소를 만날 때까지 왼쪽 또는 오른쪽으로 이동합니다.
8. CSS에서 Cascading에 대해 설명해주세요.
- cascade는 user agents(브라우저)가 다른 소스로부터 가져온 속성 값을 어떻게 결합하는지 정의한 알고리즘입니다.
- selector가 요소와 일치할 때, 요소에 우선순위가 가장 높은 소스로부터의 속성값이 적용됩니다.
8.1 Cascading Order에 대해 설명해주세요.
- Cascading Order는 CSS 적용 우선순위를 말합니다.
- Cascading Order에는 3가지 규칙이 있습니다.
- 중요도
- CSS가 어디에 선언 되었는지에 따라 우선순위가 달라집니다.
- CSS transition > !important(user-agent > user > author) > @keyframe animation > (author > user > user-agent)
- 명시도
- 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아집니다.
- 선언순서
- 선언된 순서에 따라 우선순위가 적용됩니다. 나중에 선언된 스타일이 우선 적용됩니다.
9. SCSS에 대해 설명해주세요.
- SCSS는 Sass에서 사용하는 문법입니다.
- SCSS는 CSS의 수퍼셋입니다.
- 모든 유효한 CSS는 유효한 SCSS이기도 합니다.
9.1 Sass에 대해 설명해주세요.
- Sass는 CSS 전처리기입니다.
- Sass는 가독성이 높고 코드의 재사용에 유리한 CSS를 작성할 수 있도록 돕습니다.
9.1.1 Sass의 장점에 대해 얘기해주세요.
- CSS보다 간단한 표기법으로 CSS를 구조화하여 표현할 수 있습니다.
- CSS에는 존재하지 않는 Mixin과 같은 기능을 사용하여 유지보수 편의성을 향상시킬 수 있습니다.
10. position 속성에 대해 설명해주세요.
- position 속성은 문서에서 요소를 배치하는 방법을 지정합니다.
- top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.
10.1 position 속성이 가질 수 있는 값들에 대해 설명해주세요.
- position 속성값으로 static, relative, absolute, fixed, sticky가 있습니다.
- static
- position 속성의 기본값입니다.
- static한 요소가 문서의 정상 흐름에 따라 배치됩니다.
- relative
- relative한 요소는 문서의 정상 흐름에 따라 배치됩니다.
- 요소 자신을 기준으로 top, right, bottom, left 값을 따라 상대적으로 오프셋을 가집니다.
- 오프셋은 다른 요소에 영향을 주지 않습니다.
- relative 값은 z-index 속성이 auto가 아닐 때 새로운 stacking context를 생성합니다.
- absolute
- absolute한 요소는 문서의 정상 흐름에서 제거되며 페이지 레이아웃에서 요소에 대한 공백이 생성지지 않습니다.
- position 속성이 static이 아닌 가장 가까운 조상 요소가 있는 경우, 해당 조상 요소를 기준으로 배치됩니다.
- 이러한 조상 요소가 없을 경우, 초기 containing block을 기준으로 배치됩니다.
- absolute 값은 z-index 속성이 auto가 아닐 때 새로운 stacking context를 생성합니다.
- fixed
- fixed한 요소는 문서의 정상 흐름에서 제거되며 페이지 레이아웃에서 요소에 대한 공백이 생성되지 않습니다.
- viewport에서 설정한 초기 containig block을 기준으로 배치됩니다.
- 조상 요소 중 하나에 transform, perspective, 또는 filter 속성이 non이 아닌 다른 값으로 설정되어 있거나 will-change 속성이 transform으로 설정되어 있는 경우 해당 조상 요소이 containing block으로 작동합니다.
- fixed값은 항상 새로운 stacking context를 생성합니다.
- sticky
- sticky한 요소는 문서 정상 흐름에 따라 배치됩니다.
- 테이블 관련된 요소를 포함한 가장 가까운 스크롤 조상 요소와 containing block을 기준으로 top, right, bottom, left값에 따라 상대적으로 오프셋을 가집니다.
- 오프셋은 다른 요소의 위치에 영향을 주지 않습니다.
- sticky값은 항상 새로운 stacking context를 생성합니다.
- sticky한 요소는 overflow 속성이 hidden, scroll, auto, 또는 overlay인 가장 가까운 조상 요소에 붙는 고정 요소입니다.
10.2 fixed와 sticky의 차이점에 대해 설명해주세요.
- fixed된 요소는 viewport에 고정되는 반면에, sticky 요소는 scroll box에 고정됩니다.
- 사용자가 스크롤을 내릴 때, fixed된 요소는 지정 위치에 고정되어 있는 반면에, sticky된 요소는 지정된 offset에 도달된 후에 지정 위치에 고정됩니다.
10.2 containig block에 대해 설명해주세요.
- containing block은 요소의 가장 가까운 블럭 레벨 조상 요소의 content area를 말합니다.
- 요소의 position 속성이 absolute일 경우, position 속성이 static이 아닌 가장 가까운 조상 요소의 paddding area 가장자리에 containing block이 형성됩니다.
- 요소의 position 속성이 fixed일 경우, viewport에 의해 containing block이 형성됩니다.
10.3 stacking context에 대해 설명해주세요.
- stacking context는 사용자를 기준으로 가상의 z 축을 따라 HTML 요소들을 3차원적으로 개념화한 것을 말합니다.
- HTML 요소는 요소의 속성에 따라 우선순위순으로 stacking context를 차지합니다.
11. margin과 padding에 대해 설명해주세요.
- margin은 요소 주위에 추가 여백을 만들어주는 반면에 padding은 요소 내에 추가 여백을 만들어줍니다.
12. HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
- JavaScript가 DOM API를 통해 DOM 트리를 변경시킬 수 있기 때문입니다.
12.1 JavaScript가 렌더링을 멈추는 것을 방지하기 위한 방법에 무엇이 있을까요?
- script 태크에 async나 defer 속성을 붙여줍니다.
- script 태그를 body 태그 가장 마지막에 작성합니다.
12.2 async와 defer의 차이점에 대해 설명해주세요.
- async 속성은 JS를 비동기로 다운 받으면서 다운 받은 JS를 실행시키는 반면에, defer 속성은 JS 파일을 모두 다운받은 후에 실행을 시킵니다.
참고
