CS스터디 - margin, padding
✨CS스터디 - margin, padding
이미지 출처: https://www.geeksforgeeks.org/css-padding-vs-margin/
✅ padding
내부 공간의 여백을 지정할 때 사용합니다. 음수값은 허용되지 않으며, 패딩값은 자동으로 설정할 수 없습니다. 패딩은 배경색과 같은 요소 스타일의 영향을 받습니다.
✅ margin
외부 공간의 여백을 지정할 때 사용합니다. 음수이거나 소수점 숫자일 수 있으며, 여백을 자동으로 설정할 수 있습니다. 마진은 배경색과 같은 요소 스타일의 영향을 받지 않습니다.
margin: 모든 마진 속성을 이용한 스타일을 한 줄에 설정margin-top: 윗쪽 마진값을 설정margin-bottom: 아해쪽 마진값을 설정margin-left: 왼쪽 마진값을 설정margin-right: 오른쪽 마진값을 설정margin-block: 수직 방향 여백 설정margin-block-start: 수직 방향 여백 설정margin-block-end: 수직 방향 여백 설정margin-inline: 좌우 방향의 여백 설정
질문 목록
1. 마진과 패딩의 차이점은 무엇인가요? 어떤 경우에 어떻게 사용하나요?
마진은 외부 공간의 여백을 지정할 때 사용하며, 패딩은 내부 공간의 여백을 지정할 때 사용합니다. 마진은 여백을 자동으로 설정할 수 있지만 패딩은 자동으로 여백을 설정할 수 없습니다. 마진은 배경색과 같은 스타일의 영향을 받지 않지만, 패딩은 스타일의 영향을 받습니다.
2. 마진이나 패딩을 사용하지 않고 레이아웃을 디자인할 때 발생할 수 있는 문제는 무엇인가요?
의도치 않은 레이아웃 문제가 발생할 수 있으며, 요소들이 가까이 붙어 있어 시각적으로 불편할 수 있습니다.
3. 요소의 마진과 패딩을 조절하기 위해 사용되는 CSS 속성은 무엇인가요? 이 속성들은 어떻게 사용되나요?
margin, margin-inline, margin-block 과 padding, padding-inline, padding-block이 있습니다.
4. 마진 충돌(Margin Collapse)이란 무엇인가요? 어떤 상황에서 발생하며 이를 해결하기 위한 방법은 무엇인가요?
마진 병합 현상은 서로 인접하고 있는 블록의 경우, 각자의 마진 속성이 출동해 더 큰 마진값만 적용되고 작은 마진값은 무시되는 현상입니다.
5. 박스 모델(Box Model)에 대해 설명해주세요. 마진과 패딩은 박스 모델의 어떤 부분을 조절하나요?
박스 모델은 웹 페이지에서 각 요소가 사각형 박스로 표현되는 개념입니다. 컨텐츠, 보더, 패딩, 마진으로 구성되어있습니다. 마진과 패딩은 박스모델의 외부, 내부 여백을 조절합니다.
6. 마진과 패딩 값을 설정할 때 사용되는 단위에는 어떤 것들이 있으며, 각각 어떤 상황에 적합한가요?
px, em, rem, %가 있습니다. px는 절대적인 값을 지정할 때 사용하고, em은 부모 요소의 폰트 크기에 따라 상대적으로 조절할 때 사용합니다. rem은 최상위 요소의 폰트 크기에 따라 상대적으로 조절할 때 사용하며, %는 부모 요소의 크기에 대해 백분율로 크기를 설정할 때 사용합니다.
참고 사이트