margin과 padding이란
Margin: Object와 화면과의 여백(외부여백)
Padding: Object 내의 내부여백
- margin은 border 바깥쪽을 차지한다. 주변 요소와 거리를 두기 위한 영역이다.
- padding은 content와 border 사이의 여백을 나타내는 영역이다. content 영역이 배경색이나 배경 이미지를 가질 때, 이 padding 영역까지도 영향을 미친다. 즉, padding 영역도 content의 연장으로 볼 수 있다.
그 외 차이점?
- 음수값: margin에만 적용 가능
- auto: margin에만 적용 가능
position 사용법
position 속성
css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다.
position: static
position 속성을 별도로 지정해주지 않음연 기본값인 static이 적용된다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.
이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 positon 속성이 static 일 때는 무시된다.
position: ralative
position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하면 이해가 쉽다. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로부터 얼마나 떨어지게 할지를 지정할 수 있다.
position: absolute
position 속성 중 relative와 반대되는 개념이라고 오해를 많이 하는데 absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많다.
position 속성을 absoulte로 지정하면 사실 전혀 절대적(absolute)으로 요소를 배치해주지 않는다. 오히려 배치 기준이 상황에 따라 굉장히 달라질 수 있다. 속성이 absolute 일때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 body 요소가 배치 기준이 된다.
position: fixed
화면을 위아래로 스크롤 하더라도 브라우저 화면의 특정 부분에 고정된(fixed) 위치에 배치할 수 있다. 이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모요소가 아닌 뷰포트(viewport), 즉, 브라우저 전체화면이기 때문이다. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정한다.
position: sticky
position 속성의 sticky 값은 CSS에서 비교적 최근에 추가된 속성값이다. 특이하게도 브라우저 화면을 스크롤링할 때 효과가 나타난다. sticky를 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성이다.
