💅✨Decorate from CSS : margin 겹침/중첩(1)

Notice

Recent Posts

Recent Comments

Link

« 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

Tags more

Archives

Today

Total

관리 메뉴

C-log

💅✨Decorate from CSS : margin 겹침/중첩(1) 본문

💅CSS/⚡ver.0

💅✨Decorate from CSS : margin 겹침/중첩(1)

4:Bee 2024. 2. 20. 14:12

728x90

이번 시간에는 margin 겹침/중첩 현상에 관해서 포스팅 하겠다. 아래 코드를 살펴 보자.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1 id="small">Hello, world</h1>

<h1 id="large">Hello, world</h1>

</body>

</html>

h1 {

border: 1px solid red;

margin: 100px;

}

위의 코드의 결과를 개발자 모드로 각 margin들의 위치를 살펴보면 아래와 같다.

이와 같은 현상을 확인 할 수 있는데 각 요소들의 margin들이 겹쳐 있음을 알 수 있다. 이것이 바로 margin 겹침/중첩 현상이다. 여기서 우리는 각 margin들을 조절 할 수 있는데 서로 기본 margin의 값들이 접촉이 되어 있는 크기 100px 이상부터 크기를 늘려야 아래 또는 위의 요소들로 부터 거리가 벌어진다. 만약 100px 이하로 둘 중 하나의 margin이 줄어 든다면 아무런 변화 없이 저 상태가 유지 될 것이다. 즉, 현재 요소들의 margin은 서로 의존이 되고 있기에 둘중에 하나만 크기가 줄어든다 해서 두개의 margin 사이 간격이 줄어드는 것이 아니라는 것이다. 그렇다면 margin 겹침/중첩 현상이 그저 문제가 되는 것일까? 그렇지 않다. 서로 중첩이 되기에 각 문자들의 간격이 일정하게 유지가 되는 것이다. 즉, 첫 번째 요소의 위의 간격이 100px이며 두 요소 사이의 간경이 100px, 마지막 요소의 하단이 100px로 유지가 되어야 우리가 생각하는 글자의 간격이 문제 없이 정렬이된다. 만약 그렇지 않느다면 두 요소 사이 간격은 200px이 되므로 비효율적으로 코드를 작성해야한다는 번거로움이 발생할 것이다.

728x90

저작자표시

'💅CSS > ⚡ver.0' 카테고리의 다른 글

💅✨Decorate from CSS : margin 겹침/중첩(3) (1)	2024.02.20
💅✨Decorate from CSS : margin 겹침/중첩(2) (0)	2024.02.20
💅✨Decorate from CSS : box-sizing (0)	2024.02.20
💅✨Decorate from CSS : box model (0)	2024.02.20
💅✨Decorate from CSS : inline block (0)	2024.02.19

'💅CSS/⚡ver.0' Related Articles

Comments

C-log

💅✨Decorate from CSS : margin 겹침/중첩(1) 본문

💅✨Decorate from CSS : margin 겹침/중첩(1)

'💅CSS > ⚡ver.0' 카테고리의 다른 글

티스토리툴바