질문 + 대답
px, em, rem 의 차이에 대해 설명해주세요.
- px는 고정된 절대값의 단위이며, em과 rem은 환경에 따라 변하는 단위입니다. em과 rem의 차이점은 변환되는 기준이 다르다는 것입니다. em 은 상위 요소의 폰트 사이즈가 기준이 되고 rem은 최상위 요소의 폰트 사이즈를 기준으로 합니다.
- px을 사용하는 경우 브라우저에 덮어쓰기 때문에 브라우저에서 사용자가 크기를 조절해도 변경되지 않는다.
반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?
- rem을 주로 사용합니다. em의 경우 상위 요소를 기준으로 하기 때문에 요소마다 기준점이 달라질 수 있어서 rem으로 많이 사용합니다.
vw, vh에 대해 설명해주세요.
- 뷰포트를 기준으로 하는 단위입니다. 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하는 단위입니다.vw는 뷰포트 너비의 1/100을 나타내며 vh는 뷰포트 높이의 1/100을 나타내어 다양한 크기의 화면에서 일관된 레이아웃을 유지하는 데 유용합니다. %와의 차이점은 vw, vh는 화면의 전체를 기준으로 하지만 %는 부모 요소를 기준으로 한다는 점입니다.
반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
- extra small 576px, medium 768px과 그 외에 데스크탑 사이즈로 사용하고 있습니다.
CSS 선택자의 우선순위에 대해 설명해주세요.
- css 선택자는 점수가 높은 선언이 우선되고 점수가 같다면 가장 마지막에 해석된 선언이 우선이 됩니다. 선택자 점수가 가장 높은 것은 !importnt가 있고 그 뒤로 인라인 선언 방식, id 선택자, class 선택자 순으로 진행됩니다.
페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
- object-fit 속성의 contain을 활용해서 요소가 컨테이너 크기에 맞춰서 원본의 비율을 유지하며 조절되도록 할 수 있습니다. 따라서 width, height를 100%로 설정하고 object-fit을 contain으로 설정하면 페이지 크기가 변해도 비율을 유지할 수 있습니다.
Flexbox에 대해 설명해주세요.
- flexbox로 컨테이너들의 1차원 수직, 수평 구조를 잡고 각 요소를 정렬할 수 있는 효과적인 방법입니다. 부모요소인 flex container와 자식요소인 flex item으로 구성되어 있으며 flex 속성을 추가한 요소가 부모이고 그 자식요소들이 flex item이 됩니다.
- 부모에서 쓸 수 있는 속성: flex-direction, align-items, justify-content, flex-wrap, align-content
- 자식에서 쓸 수 있는 속성: flex-grow, flex-shrink, flex-basis, flex
float의 동작에 대해 설명해주세요.
- float란 레이아웃을 구성할 때 가로 정렬하기 위해 사용하는 기법 중 하나입니다. float는 해당 요소를 기본 레이아웃 흐름에서 벗어나 띄워서 배치하게 됩니다. 또한 display 속성이 자동으로 block으로 변경되어 width와 height를 지정할 수 있습니다. 하지만 다른 요소와 겹칠 수 있기 때문에 부모 요소에 clear를 해주어 의도한 위치에 배치되도록 할 수 있습니다.
- clear 속성을 float가 주변 요소의 배치에 영향을 미치지 않도록 해제하는 속성
CSS에서 Cascading에 대해 설명해주세요.
- cascading은 상속, 종속의 의미로 스타일 규칙이 적용되는 방식을 뜻합니다. 3가지 규칙에 따라 우선순위를 결정하는데, 첫 번째는 스타일 우선순위, 두 번째는 소스 코드의 순서, 세 번째는 중요도로써 important가 있습니다. important는 다른 모든 규칙보다 우선순위를 가집니다.
⭐ SCSS에 대해 설명해주세요.
- 기존 css에서 선택자의 과용과 연산의 한계 등으로 유지보수가 어려워지게 되어 이러한 단점을 보완하기 위해 SCSS가 등장하였습니다. SCSS는 CSS의 전처리기 언어로 개발 단계에서 SCSS 문법으로 코딩한 후 CSS로 컴파일해서 웹으로 동작시키게 됩니다. SCSS는 Sass의 하나로 기존 Sass 구문에 비해 CSS 코드와 유사한 형태를 띄고 있는 것이 특징입니다.
⭐ postition 속성에 대해 설명해주세요.
- 요소들을 어떻게 배치할 지를 정하는 속성입니다. top, right, bottom, left 프로퍼티로 위치를 결정할 수 있습니다. 기본 값으로 일반적인 문서의 흐름에 맞춰 배치하는 static이 있고, 그 외로 relative, absolute, fixed, sticky가 있습니다. relative는 자신을 기준으로 위치를 조정하고 absoluce는 부모 요소를 기준으로 위치를 조정합니다. 부모 요소 중 position이 static이 아닌 가장 가까운 요소를 기준으로 합니다. fixed는 뷰포트를 기준으로하고 sticky는 스크롤의 위치에 따라 지정됩니다.
margin과 padding에 대해 설명해주세요.
- margin 이란 요소의 외부여백을 의미하며 padding은 요소의 내부 여백을 의미합니다. 즉, box가 있다고 가정하면 margin은 border의 바깥쪽을 차지하며 padding은 content와 border 사이의 여백을 나타냅니다. 그래서 margin은 해당 요소와 다른 요소 간의 간격을 조절하는 역할을 합니다. 반면 padding은 내부 컨텐츠와 테두리 사이의 여백을 조절할 때 사용할 수 있습니다.
HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
- 자바스크립트가 DOM API를 통해서 DOM트리를 변경시킬 수 있기 때문입니다. 만약 렌더링이 멈추지 않는다면 렌더트리가 다 구성되지 않았는데 자바스크립트에서 DOM 트리 노드에 접근할 수도 있기 때문입니다. 따라서 렌더링 과정에서 script 태그를 만나게 되면 진행중인 HTML 파싱을 중지하고 js 엔진으로 제어 권한을 넘기게 됩니다. 그리고 js 파싱과 실행이 종료되면 다시 파싱이 중단된 시점부터 시작하게 됩니다.
Box model에 대해 설명해주세요.
- 모든 HTML 엘리먼트는 Box 형태의 영역을 가지고 있다는 것을 의미합니다 이 Box 영역은 content, padding, border, margin으로 구성되어 있고 브라우저는 박스 모델의 크기와 프로퍼티, 위치를 근거로 렌더링하게 됩니다. content 영역은 실제 내용이 위치하는 영역이며 padding영역은 content와 border 사이의 간격, 내부 여백을 설정할 때 사용합니다. border 영역은 content와 padding을 감싸는 테두리 영역이며 margin은 border 바깥쪽 간격으로 외부 여백을 설정할 때 사용합니다.
Attribute와 Property의 차이에 대해 설명해주세요.
- attribute는 HTML 마크업 태그 안에서 명시되는 태그의 정적인 속성들을 의미합니다. div 태그의 class 등을 attribute라고 할 수 있습니다.. property는 생성된 HTML DOM 트리에서의 동적인 속성을 의미합니다. 따라서 attribute 값은 변하지 않지만 property 값은 동적으로 변할 수 있습니다.
⭐ display 속성에 어떤 것들이 있는지 설명해 주세요.
- display는 요소가 어떻게 보이는지 결정하는데 사용합니다. display 속성에는 none, block, inline, inline-block 이 있습니다. none 은 요소를 렌더링 하지 않도록 설정하는 것이며 영역도 차지하지 않습니다. block 은 가로 영역을 모두 채우며 줄바꿈 된 것처럼 나타납니다. inline의 경우 가로 라인 전체가 아니라 HTML 요소의 컨텐트 만큼 차지하며 width와 height를 지정할 수 없습니다. inline-block은 HTML요소의 컨텐츠 만큼 차지하며 크기를 지정할 수 있습니다.
CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
- css는 tansition, animation을 사용하여 애니메이션을 구현할 수 있고 js는 setInterval과 requestAnimationFrame()을 사용할 수 있습니다. css의 경우 외부 라이브러리가 필요하지 않고 선언형이기 때문에 직관적인 표현이 가능합니다. js의 경우 외부 라이브러리를 사용할 수 있으며 요소의 스타일이 변하는 순간마다 제어할 수 있어 세밀한 구성이 가능해집니다.
CSS in JS의 장단점에 대해 설명해주세요.
- 장점은 css 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하여 유지보수성이 높아진다는 점과 자바스크립트와 css 사이의 상수와 함수를 공유할 수 있다는 점이 있습니다. 단점으로는 번들 크기를 늘린다는 점과 css 성능을 제어하는 데에 자바스크립트 엔진이 필요하므로 초기 로딩 시간이 느려질 수 있다는 점이 있습니다.
⭐ 시맨틱 마크업에 대해 설명해주세요.
- 시맨틱 마크업이란 의미를 가진 태그로 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다. 시맨틱 태그는 각 태그마다 용도를 가지며 이러한 시멘틱 마크업은 검색 엔진이 해당 웹페이지를 효과적으로 분석할 수 있게 해줍니다. 또한 스크린 리더로 웹페이지를 음성으로 안내 할 때 활용할 수 있습니다.
HTML5의 태그에 대해 설명해주세요.
- HTML5는 정보 구조를 작성하는데 유리합니다. header, nav 등의 시맨틱 태그들로 구체적인 구조를 만들 수 있습니다. 또한 미디어 관련 태그들을 추가하여 비디오나 오디오 등의 미디어 컨텐츠를 쉽게 추가할 수 있게 되었습니다.
- 이 외에 캔버스 태그 등이 있음
script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
- async는 문서를 파싱하는 동안 스크립트를 만나면 문서 파싱과 함께 스크립트를 다운받고 다운이 완료되면 즉시 스크립트를 실행합니다. 스크립트가 실행되는 동안은 문서 파싱을 멈추고 스크립트 실행이 끝난 후 남은 문서를 읽게 됩니다. defer는 스크립트를 만났을 때 스크립트를 다운로드하지만 문서 파싱을 멈추지 않고 끝까지 수행한 후 스크립트는 문서 파싱이 끝난 후에 실행됩니다. 또 async는 스크립트의 실행 순서가 보장되지 않아 여러 개의 async 스크립트가 있다면 다운로드가 완료된 순서대로 실행됩니다. 반면 defer 스크립트는 문서 내의 순서에 맞게 실행되므로 실행 순서가 보장됩니다.
가상 클래스에 대해 설명해주세요.
- 선택하고자 하는 HTML 요소의 특별한 상태를 명시할 때 사용합니다. 대표적으로 hover, focus 등으로 요소의 상태에 따른 스타일을 지정할 수 있습니다. 또한 first-of-type 등을 사용하여 특정 요소의 위치를 선택할 수도 있습니다.
- 가상 선택자는 존재하지 않는 엘리먼트를 가상으로 선택해내는 선택자 예시로 before, after 등이 있음
margin 병합에 대해 설명해주세요
- 인접하는 블록요소 또는 부모-자식 요소 사이에서 상하단의 마진이 병합되는 현상을 말합니다. 서로 block 요소이고 서로 간의 마진 사이에 경계를 지을만한 요소가 없을 때 마진 병합이 발생하며 마진의 크기는 병합되는 마진 중에서 큰 값을 가진 마진의 값으로 병합됩니다.
- 방지하기 위해서는 경계를 만들어주는 등으로 제어할 수 있을 것 같음
box-siging content-box, border-box 차이
반응형의 3요소