Search

Margin

Margin

μ™ΈλΆ€ 여백을 μ§€μ •ν•˜λŠ” 속성
μš”μ†Œμ™€ μš”μ†Œ μ‚¬μ΄μ˜ 간격을 μ‘°μ •ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.

μΆ•μ•½ν˜• 4가지 κ°’ 지정 방법

β€’
margin 속성은 μΆ•μ•½ν˜•μœΌλ‘œ μ‚¬μš©ν•  수 있으며, λ‹€μŒ λ„€ 가지 λ°©μ‹μœΌλ‘œ 값을 지정할 수 μžˆμŠ΅λ‹ˆλ‹€:
1.
4개의 κ°’: 상, 우, ν•˜, 쒌 μˆœμ„œλ‘œ 각각의 κ°’ 적용.
β€’
μ˜ˆμ‹œ: margin: 10px 20px 30px 40px; β†’ 상 10px, 우 20px, ν•˜ 30px, 쒌 40px.
2.
3개의 κ°’: 첫 번째 값은 상, 두 번째 값은 쒌우, μ„Έ 번째 값은 ν•˜μ— 적용.
β€’
μ˜ˆμ‹œ: margin: 10px 20px 30px; β†’ 상 10px, 쒌우 20px, ν•˜ 30px.
3.
2개의 κ°’: 첫 번째 값은 μƒν•˜, 두 번째 값은 μ’Œμš°μ— 적용.
β€’
μ˜ˆμ‹œ: margin: 10px 20px; β†’ μƒν•˜ 10px, 쒌우 20px.
4.
1개의 κ°’: λͺ¨λ“  λ°©ν–₯(상, ν•˜, 쒌, 우)에 λ™μΌν•œ 값을 적용.
β€’
μ˜ˆμ‹œ: margin: 10px; β†’ μƒν•˜μ’Œμš° λͺ¨λ‘ 10px.

쒌우 auto 지정 μ‹œ κ°€μš΄λ° μ •λ ¬

β€’
블둝 μš”μ†Œμ—μ„œ margin-left와 margin-rightλ₯Ό auto둜 μ„€μ •ν•˜λ©΄ κ°€λ‘œ 폭이 μžˆλŠ” μš”μ†Œλ₯Ό κ°€μš΄λ° μ •λ ¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

inherit으둜 λΆ€λͺ¨ 크기 상속

β€’
inherit 값을 μ‚¬μš©ν•˜λ©΄ ν•΄λ‹Ή μš”μ†Œμ˜ λ§ˆμ§„ 값을 λΆ€λͺ¨ μš”μ†Œμ˜ λ§ˆμ§„ κ°’μœΌλ‘œ μƒμ†λ°›μŠ΅λ‹ˆλ‹€.

κ°œλ³„ 속성

β€’
margin의 λ„€ 가지 λ°©ν–₯에 λŒ€ν•΄ κ°œλ³„μ μœΌλ‘œ 값을 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€:
β—¦
margin-top: μœ„μͺ½ μ—¬λ°±.
β—¦
margin-right: 였λ₯Έμͺ½ μ—¬λ°±.
β—¦
margin-bottom: μ•„λž˜μͺ½ μ—¬λ°±.
β—¦
margin-left: μ™Όμͺ½ μ—¬λ°±.

Margin Collapse

μΈμ ‘ν•œ 두 블둝 μš”μ†Œμ˜ μƒν•˜ λ§ˆμ§„μ΄ κ²Ήμ³μ§€λŠ” ν˜„μƒμž…λ‹ˆλ‹€. μ΄λ•Œ 두 λ§ˆμ§„ 쀑 큰 κ°’λ§Œ μ μš©λ©λ‹ˆλ‹€.

ν•΄κ²° 방법

1.
overflow 속성을 μ„€μ • (overflow: hidden;)ν•˜μ—¬ λ§ˆμ§„μ΄ κ²ΉμΉ˜λŠ” 것을 방지.
2.
*padding λ˜λŠ” border*λ₯Ό μΆ”κ°€ν•˜μ—¬ μƒν•˜ λ§ˆμ§„μ„ 뢄리.
3.
λΆ€λͺ¨ μš”μ†Œμ— display: flex λ˜λŠ” **display: grid*λ₯Ό μ„€μ •ν•˜μ—¬ λ§ˆμ§„ κ²ΉμΉ¨ 방지.

μ˜ˆμ‹œ μ½”λ“œ

Margin μ˜ˆμ‹œμ½”λ“œ
Margin κΈ°λ³Έ
Margin κΈ°λ³Έ
Margin Auto κ°€μš΄λ° μ •λ ¬
Margin Auto κ°€μš΄λ° μ •λ ¬
Margin inherit
Margin inherit
Margin κ°œλ³„ 속성
Margin κ°œλ³„ 속성
Margin Collapse
Margin Collapse
λ°•μŠ€ λͺ¨λΈ

λ°•μŠ€λͺ¨λΈ

λ°•μŠ€ λͺ¨λΈ

Margin

μ™ΈλΆ€ 여백을 μ§€μ •ν•˜λŠ” 속성
μš”μ†Œμ™€ μš”μ†Œ μ‚¬μ΄μ˜ 간격을 μ‘°μ •ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.

μΆ•μ•½ν˜• 4가지 κ°’ 지정 방법

β€’
margin 속성은 μΆ•μ•½ν˜•μœΌλ‘œ μ‚¬μš©ν•  수 있으며, λ‹€μŒ λ„€ 가지 λ°©μ‹μœΌλ‘œ 값을 지정할 수 μžˆμŠ΅λ‹ˆλ‹€:
1.
4개의 κ°’: 상, 우, ν•˜, 쒌 μˆœμ„œλ‘œ 각각의 κ°’ 적용.
β€’
μ˜ˆμ‹œ: margin: 10px 20px 30px 40px; β†’ 상 10px, 우 20px, ν•˜ 30px, 쒌 40px.
2.
3개의 κ°’: 첫 번째 값은 상, 두 번째 값은 쒌우, μ„Έ 번째 값은 ν•˜μ— 적용.
β€’
μ˜ˆμ‹œ: margin: 10px 20px 30px; β†’ 상 10px, 쒌우 20px, ν•˜ 30px.
3.
2개의 κ°’: 첫 번째 값은 μƒν•˜, 두 번째 값은 μ’Œμš°μ— 적용.
β€’
μ˜ˆμ‹œ: margin: 10px 20px; β†’ μƒν•˜ 10px, 쒌우 20px.
4.
1개의 κ°’: λͺ¨λ“  λ°©ν–₯(상, ν•˜, 쒌, 우)에 λ™μΌν•œ 값을 적용.
β€’
μ˜ˆμ‹œ: margin: 10px; β†’ μƒν•˜μ’Œμš° λͺ¨λ‘ 10px.

쒌우 auto 지정 μ‹œ κ°€μš΄λ° μ •λ ¬

β€’
블둝 μš”μ†Œμ—μ„œ margin-left와 margin-rightλ₯Ό auto둜 μ„€μ •ν•˜λ©΄ κ°€λ‘œ 폭이 μžˆλŠ” μš”μ†Œλ₯Ό κ°€μš΄λ° μ •λ ¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

inherit으둜 λΆ€λͺ¨ 크기 상속

β€’
inherit 값을 μ‚¬μš©ν•˜λ©΄ ν•΄λ‹Ή μš”μ†Œμ˜ λ§ˆμ§„ 값을 λΆ€λͺ¨ μš”μ†Œμ˜ λ§ˆμ§„ κ°’μœΌλ‘œ μƒμ†λ°›μŠ΅λ‹ˆλ‹€.

κ°œλ³„ 속성

β€’
margin의 λ„€ 가지 λ°©ν–₯에 λŒ€ν•΄ κ°œλ³„μ μœΌλ‘œ 값을 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€:
β—¦
margin-top: μœ„μͺ½ μ—¬λ°±.
β—¦
margin-right: 였λ₯Έμͺ½ μ—¬λ°±.
β—¦
margin-bottom: μ•„λž˜μͺ½ μ—¬λ°±.
β—¦
margin-left: μ™Όμͺ½ μ—¬λ°±.

Margin Collapse

μΈμ ‘ν•œ 두 블둝 μš”μ†Œμ˜ μƒν•˜ λ§ˆμ§„μ΄ κ²Ήμ³μ§€λŠ” ν˜„μƒμž…λ‹ˆλ‹€. μ΄λ•Œ 두 λ§ˆμ§„ 쀑 큰 κ°’λ§Œ μ μš©λ©λ‹ˆλ‹€.

ν•΄κ²° 방법

1.
overflow 속성을 μ„€μ • (overflow: hidden;)ν•˜μ—¬ λ§ˆμ§„μ΄ κ²ΉμΉ˜λŠ” 것을 방지.
2.
*padding λ˜λŠ” border*λ₯Ό μΆ”κ°€ν•˜μ—¬ μƒν•˜ λ§ˆμ§„μ„ 뢄리.
3.
λΆ€λͺ¨ μš”μ†Œμ— display: flex λ˜λŠ” **display: grid*λ₯Ό μ„€μ •ν•˜μ—¬ λ§ˆμ§„ κ²ΉμΉ¨ 방지.

μ˜ˆμ‹œ μ½”λ“œ

Margin

Padding

컨텐츠와 ν…Œλ‘λ¦¬ μ‚¬μ΄μ˜ 간격을 μ œμ–΄ν•˜λŠ” 역할을 ν•©λ‹ˆλ‹€.

μΆ•μ•½ν˜• 4가지 κ°’ 지정 방법

β€’
padding은 μΆ•μ•½ν˜•μœΌλ‘œ μ‚¬μš©ν•  수 있으며, λ‹€μŒ λ„€ 가지 λ°©μ‹μœΌλ‘œ 값을 지정할 수 μžˆμŠ΅λ‹ˆλ‹€:
Padding