면접대비 질문
❓px, em, rem의 차이에 대해 설명해주세요
▶ CSS에서 폰트 사이즈를 줄 때 설정할 수 있는 단위입니다.
각 단위의 차이점은 px은 고정적인 단위입니다. 그렇기 때문에 반응형에 적합하지 않습니다.
em과 rem은 가변적인 단위입니다. em단위는 부모요소의 폰트 사이즈를 상속받습니다. 그래서 px보다는 반응형에 맞지만 중간요소가 바뀌거나, depth가 많아질 수록 관리가 어려운 단점이 있습니다.
마지막으로 rem단위는 가변적이면서도 관리가 수월한 폰트 사이즈입니다. 상위 요소에 영향을 받지 않고, 최상위요소를 기준으로 변합니다.
❓반응형 웹을 구현할 때는 이 단위 중 어떤 단위를 주로 사용하시나요
▶ 저는 주로 rem단위를 사용했습니다. 최상위요소를 기준으로 변하기 때문에 관리가 쉽고, html 폰트 사이즈를 10px로 사용했을 때 바로 계산하여 사용하기에도 편리했습니다.
❓vw,vh에 대해 설명해주세요
▶ 뷰포트(Viewport)의 너비와 높이를 기준으로 동작하는 상대적인 CSS 단위입니다. 100vw, 100vh가 전체화면의 기준이 되며 vw는 뷰포트의 1%를 vh는 뷰포트 높이의 1%를 나타냅니다.
❓반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
▶ 해상도 사용 비율을 정리해두는 사이트에서 참고하여 브레이크 포인트를 잡습니다.
데스크탑 사이즈는 1280px, 테블릿사이즈로 768px 그리고 모바일사이즈에 대응하기 위해 가장 작은 사이즈로 360px로 작업을 진행합니다.
❓CSS 선택자의 우선순위에 대해 설명해 주세요
▶ CSS 선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다.
점수가 높은 선언을 우선으로 하는데 점수가 높은 순서는 !important(1000점), id선택자(100점), class 선택자(10점), 태그선택자(1점), 전체선택자(0점) 순 입니다. 그렇기 때문에 이 순서가 반영되어 우선순위가 설정됩니다.
❓페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 css를 어떻게 설정해야 할까요?
▶ css 속성인 aspect-ratio , padding-top 혹은 calc()을 사용하여 유연하게 같은 비율을 유지하는 요소를 만들 수 있습니다.
먼저 aspect-ratio 는 요소의 크기를 가로 세로 비율대로 조정이 가능한 속성입니다.
부모 요소의 width 값을 기준으로 padding-top 속성에 % 값을 주어 비율 조정이 가능합니다.
마지막으로 calc() 함수로 비율을 조정할 수 있다.
❓Flexbox에 대해 설명해 주세요
▶ flexbox는 요소들을 유연하게 배치하기 위한 레이아웃 모델입니다.
컨테이너 내의 요소들을 행과열로 유연하게 배열하여 반응형 레이아웃을 만들 수 있습니다.
❓float의 동작에 대해 설명해 주세요
▶ Float는 CSS 위치지정 속성입니다.
float는 블랙 레벨의 요소를 인라인 요소와 같이 좌우로 배치할 수 있게 하는 CSS 속성입니다.
float는 element는 페이지 흐름의 일부가 되어 다른요소의 위치에 영향을 줍니다. 그래서 컨테이너가 닫히기 전에 float clear 하면 해결할 수 있습니다.
❓CSS에서 Cascading에 대해 설명해 주세요
▶ HTML element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 합니다.
캐스캐이팅과정은 html 속성을 사용하여 직접 정의한 스타일, 더 구체적인 선택자, 동일한 중요도와 선택자를 가진다면 뒤에 나오는 규칙이 우선합니다.
❓position 속성에 대해 설명해주세요
▶ CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.예로 relatice, absoulte, static, fixed, sticky이 있습니다.
❓margin과 padding에 대해 설명해주세요
▶ margin은 바깥쪽 여백, padding은 안쪽 여백을 의미합니다. 그 경계는 border를 기준으로 나눕니다.
❓HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유는 뭔가요?
▶ 렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가 Javascript를 만나면 DOM 생성을 임시 중단합니다.
DOM 생성을 임시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 되는데, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성합니다.
❓BOXMODEL에 대해 설명해주세요
▶ HTML 요소를 감싸는 상자입니다. 요소, 패딩, 보더, 마진으로 구성되어 있습니다. box model은 블록박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다.
❓Attribute와 Property의 차이에 대해 설명해주세요.
▶ attribute는 html document/file 안에서 property 는 html DOM tree안에서 존재합니다.
이것이 뜻하는 것은 attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 것을 내포하고 있습니다.
(예를 들어 체크박스 태그가 있을 때 유저가 체크박스에 체크를 하면 attribute의 상태는 변하지 않지만 property의 상태는 checked로 변하게 됩니다.)
❓display 속성에 어떤 것들이 있는지 설명해 주세요.
▶ display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다.
이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.
대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다.
- 블록(block), 2. 인라인(inline)
❓CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
▶ CSS 애니메이션은 외부라이브러리를 필요로 하지 않습니다, 어떤 요소가 애니메이션을 가져야 한다는 직관적인 표현이 가능합니다. 메인 쓰레드가 아닌 별도의 컴포지터 쓰레드에서 그려지기 때문에 쓰레드에서 작업하는 JS뵤다 효율적입니다.
JS애니메이션은 좀 더 정교하고 복잡한 애니메이션을 사용할 때 유리하고, 크로스 브라우징 측면에서도 JS 애니메이션을 사용하는 것이 유리합니다. 또한 브라우저 호환성도 좋습니다.
❓CSS in JS의 장단점에 대해 설명해주세요.
▶ CSS in JS 의 장점으로는 지역 스코프 스타일을 적용하기 쉽다는 것입니다. 스타일을 사용하는 리액트 컴포넌트 내부에 직접 스타일을 작성할 수 있습니다! 올바르게 사용한다면 앱의 유지보수가 크게 편해집니다.
단점은 CSS-in-JS는 런타임 오버헤드를 더합니다. ,또한 번들 크기를 늘립니다. 또한 React DevTools를 어지럽힙니다.
❓시맨틱 마크업에 대해 설명해주세요.
▶ 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다. 시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 합니다.
시맨틱 태그은 SEO, 웹 접근성 측면을 위해서도 고려되어야 하는 부분입니다.
❓HTML5의 태그에 대해 설명해주세요.
▶ 이전 버전보다 정보 구조를 작성하는데 유리해졌으며, div태그를 대신해서 header,nav,section,article,aside, footer등을 이용해서 좀 더 시멘틱한 구조를 만들 수 있습니다.
엑티브 x나 별도 플러그인 없이 오디오, 비디오를 실행할 수 있으며, 숫자 날짜 시간 범위와 같은 양식 요소가 추가되었습니다. 그래픽 요소로 svg, canvas 기능이 추가 되었습니다.
❓script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
▶ async는 스크립트를 다운로드 됐을 때 곧바로 실행하고 defer은 문서(HTML)을 완전히 다 읽은 후에 실행합니다.
async는 먼저 다운로드된 순서대로 실행하고 defer는 정의 된 순서대로 실행합니다.
❓가상 클래스에 대해 설명해주세요.
▶ CSS선택자에 추가하는 키워드로, 우리가 선택한 요소의 조건에 따라 스타일을 입힐 수 있게 해줍니다.
종류로는, hover, active, focus 등이 있습니다.
❓margin 병합 현상에 대해 설명해주세요.
▶ 상하단 레이아웃이 맞닿는 부분에 margin 값을 부여하면 병합이 되어 동시 적용되지 않는 현상입니다.
해결방법으로는 flow-root 를 통해 block format context 를 생성하여 해결할 수 있습니다.
