CSS 반드시 알아야 하는 기초 개념 면접 필수 질문

웹 퍼블리셔 또는 프론트 개발자 신입 면접에서 다루는 기본 개념 꼭 물어봅니다.

margin과 padding의 차이점

margin : border를 기준으로 바깥 여백을 주는 것.

//margin : 상하 좌우
margin : 0 auto; // -> 가로 가운데 정렬.

padding : border를 기준으로 안 쪽 여백을 주는 것.

// padding: 상하 좌우;

 

position

position : static

기본 페이지 레이아웃을 따릅니다. 기본값입니다.

(default)요소를 일반적인 문서 흐름에 따라 배치합니다.

position : relative

자기 자신을 기준으로 Offset이 적용됩니다.

top, right, bottom, left를 기준으로 Offset이 적용됩니다.

position : absolute

요소가 일반적인 문서 흐름대로 가지 않습니다. 페이지 레이아웃에 공간을 배정하지 않습니다. 

즉, 일반적인 CSS 레이아웃을 해주는 옵션들이 적용되지 않습니다.

가장 가까운 부모 요소를 기준으로 위치에 배치되고, top, right, bottom, left를 기준으로 움직입니다.

position : sticky

스크롤을 해도 브라우저에 지정된 Offset에 고정되어 있습니다. 저는 이런 목적으로 주로 사용합니다.

상대와 고정 위치 지정을 합한 것입니다.

적어도 하나의 임계값(top, right, bottom, left)가 있어야 됩니다.

position : fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 

 

 

참고 : developer.mozilla.org/ko/docs/Web/CSS/position