[Web/CSS] CSS - 여백을 조절하는 속성

티스토리 뷰

Web/CSS

[Web/CSS] CSS - 여백을 조절하는 속성

poopooreum 2024. 4. 23. 21:04

✏️ 요소 주변의 여백을 조절하는 margin 속성

마진은 요소 주변의 여백을 의미함, 마진을 이용하여 요소와 요소 사이의 간격을 조절할 수 있음 박스 모델의 4가지 방향에 모두 적용할 수 있고 각 방향 1가지마다 적용할 수도 있음, 이것도 마찬가지로 시계방향

기본형 : margin <크기> | <백분율> | auto

종류	설명
<크기>	너빗값이나 높잇값을 px나 em같은 단위와 함께 숫자로 표현
<백분율>	박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트로 적용
<auto>	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 적용

✏️ margin 속성으로 웹 문서를 가운데 정렬하기

텍스트 요소를 중앙으로 배치할 때는 text-align : center를 사용하는 것처럼 웹 문서 전체를 화면 중앙에 배치하기 위해서는 margin 속성을 사용하여 정렬. margin 속성을 사용하기 위해서는 배치할 요소의 너빗값이 정해져 있어야 하고 margin-left와 margin-right 속성값을 auto로 지정하면 나머지 영역을 좌우마진으로 자동으로 계산함

✏️ margin 중첩 이해하기

박스 모델에서 마진을 지정할 때 주의해야 할 점이, 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나는 경우임. 이때는 마진값이 더 큰쪽으로 겹쳐지게 되고 이 현상을 마진 중첩 또는 마진 상쇄라고 칭함

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델 - 마진 중첩</title>
	<style>
    * {
      box-sizing:border-box;
    }
		div {
			width:200px;  /* 너비 */
			height:100px;  /* 높이 */
  		margin:30px;  /* 마진 */
		}
    #box1 {
      background:rgb(0, 77, 243);
    }
    #box2 {
      background:rgb(255, 72, 0);
    }
    #box3 {
      background:rgb(18, 219, 0);
    }
	</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
</body>
</html>

위 사진과 코드인데 마진이 30px이므로 box1과 box2 사이의 마진도 60px가 아닌 30px로 정해짐

✏️ 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

패딩이란 콘텐츠 영역과 테두리 사이의 여백을 말함, 즉 테두리 안쪽의 여백이라고 생각하기

4개 방향을 한꺼번에 설정할 수 있고 padding 다음에 하이픈을 넣고 각 방향을 따로따로 지정할 수도 있음

모든 코드와 예시들은 Do it! html+css+javascript 책에 실려있는 내용임을 밝힙니다

저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[Web/CSS] CSS- 웹 요소의 위치 지정하기 (0)	2024.04.23
[Web/CSS] CSS - 웹 문서의 레이아웃 만들기 (0)	2024.04.23
[Web/CSS] CSS - 테두리 스타일 지정하기 (0)	2024.04.23
[HTML/CSS] CSS - 박스 모델 (0)	2024.04.23
[Web/CSS] CSS - 실습해보기 (0)	2024.04.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

푸으름

티스토리 뷰