개발 기본 상식

출처 : https://github.com/junh0328/prepare_frontend_interview/

PX, EM에 대해 설명하시오 🔥🔥

px은 고정된 절대값의 단위며, em과 rem환경에 따라 변하는 단위 em과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다.

em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다.

div { font-size: 10px; } div { font-size : 1em; /1em 대략 10px/ }

rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다. 대개는 HTML tag에서 지정된 font-size가 기준이 됩니다. 만약 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받습니다.

html { font-size : 10px; /설정 안했을 때는 브라우저 기본 값으로 */ } div { margin: 1.5em; /대략 15px*/ }

rem은 기준이 되는 폰트 크기 하나로 고정되어 있는 반면, em은 같은 엘리먼트는 어디서라도 그 기준이 바뀔 수 있기 때문에 복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다.

<간단한 설명=""> CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다. - 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적 - 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐. - pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위 # CSS 적용 우선순위 🔥🔥 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 !important 는 우선순위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알리는 뜻을 나타내기도 합니다. # CSS-in-JS에 대해서 설명해 주세요. 🔥 CSS-in-JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말한다. 2014년 페이스북 개발자인 Christopher Chedeau aka Vjeux가 처음 소개하였다. 이 중 가장 대표적인 CSS-in-JS 라이브러리인 Styled Components를 살펴보겠다. Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크이다. 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공한다. 장점은 다음과 같다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성 CSS-in-JS는 JavaScript 환경을 최대한 활용 자바스크립트와 CSS 사이의 상수와 함수를 공유 현재 사용 중인 스타일만 DOM에 포함 짧은 길이의 유니크 한 클래스를 자동으로 생성하는 코드 경량화 단점으로는 러닝 커브(Learning Curve), 새로운 의존성 발생, 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도 등을 들 수 있다. Styled Components는 스타일링을 위한 코드 사용량이 줄어들고 CSS 문법에 친화적이다. # CSS 전처리기(CSS preprocessors)를 사용해보셨나요? 🔥 CSS 전처리기란? 간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다. 내가 CSS를 보다 쉽게 작성할 수 있게 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해할 수 있게 CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게 CSS 전처리기 프레임워크의 종류 Sass Less Stylus CSS 전처리기 사용시 장단점 장점: CSS 코드를 여러 파일로 나눠 유지보수성이 향상 CSS파일도 나눌 수 있지만, CSS를 다운로드하기 위한 HTTP 요청이 다수 발생 중첩 선택자를 작성하기 쉬움 일관된 테마를 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일을 공유할 수 있음. 반복되는 CSS를 위한 Mixins 생성. Less는 자바스크립트로 작성되어, Node와 잘 작동합니다. 단점: 전처리기를 위한 도구가 필요, 다시 컴파일하는 시간이 느릴 수 있음 Less에서는 변수 이름의 접두어가 @이며, @media, @import, @font-face 규칙과 같은 고유 CSS 키워드와 혼동될 여지가 있음 Sass에서는 노드 버전을 바꿀 때 자주 다시 컴파일해야 함 # padding과 margin의 차이가 무엇인가요? 🔥 - 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다. - 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다.