[CSS] margin & padding / position

margin / padding

margin

• 바깥쪽 여백을 조정하는 속성

margin: top/bottom left/right; 
margin: 30px 10px; /**margin을 상하 30px, 좌우 10px*/

margin: top right bottom left; 
margin: 30px 20px 10px 5px; /**margin을 상 30px, 우 20px, 하 10px, 좌 5px*/

margin: top left/right bottom;
margin: 30px 20px 10px; /**margin을 상 30px, 좌우 20px, 하 10px*/

padding

• 안쪽 여백을 조정하는 속성

padding: top/bottom left/right; 
padding: 30px 10px; /**padding을 상하 30px, 좌우 10px*/

padding: top right bottom left; 
padding: 30px 20px 10px 5px; /**padding을 상 30px, 우 20px, 하 10px, 좌 5px*/

padding: top left/right bottom;
padding: 30px 20px 10px; /**padding을 상 30px, 좌우 20px, 하 10px*/

참고: https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1

 

---

Position

top, bottom, left, right로 위치를 지정하며, 별도로 지정하지 않을 경우에는 static으로 HTML이 작성된 순서대로 배치된다.

• Relative
  • 원래 위치에서 상하좌우에서 얼마나 떨어지게 할 지 지정 가능
• Absolute
  • 배치 기준이 자신이 아닌 상위 요소에서 찾아 설정
  • 부모 요소를 relative로 설정해야 함
  • HTML에서 독립적인 요소가 됨
• Fixed
  • viewport가 배치 기준
  • 브라우저 전체 화면으로 화면에 요소를 고정할 때, 많이 사용
• Sticky
  • 스크롤링을 할 때 사용
  • 어느정도 설정된 구간에서 요소가 고정되도록 효과를 줌