πŸ’… CSS :: Position, Display, Float에 λŒ€ν•΄ μ•Œμ•„λ³΄κΈ°

HayoungΒ·2021λ…„ 5μ›” 25일
7

CSS

λͺ©λ‘ 보기
1/1
post-thumbnail

CSSμ—μ„œ μ›ν•˜λŠ” μš”μ†Œλ₯Ό μ›ν•˜λŠ” μž₯μ†Œμ— λ°°μΉ˜ν•˜κ³ , μ›ν•˜λŠ” λ ˆμ΄μ•„μ›ƒμœΌλ‘œ ν‘œν˜„ν•˜κΈ° μœ„ν•΄μ„œλŠ”
CSS의 Position, Display 속성 등에 λŒ€ν•œ 이해가 ν•„μš”ν•˜λ‹€.

각 μš”μ†Œμ˜ 배치, λ ˆμ΄μ•„μ›ƒμ„ ν‘œν˜„ν•˜κ³ 
CSS의 λΌˆλŒ€λ₯Ό ν˜•μ„±ν•΄μ£ΌλŠ” 각쒅 CSS에 λŒ€ν•΄μ„œ κ³΅λΆ€ν•΄λ³΄μžπŸ€“

1️⃣ position

.box {
  position: κ°’;
  /* μ•„λž˜μ˜ 값은 position의 값이 static일 λ•ŒλŠ” μ μš©λ˜μ§€ μ•ŠμŒ */
  /* position의 값을 κΈ°μ€€μœΌλ‘œ ꡬ체적인 μƒν•˜μ’Œμš°μ˜ μœ„μΉ˜λ₯Ό 숫자둜 지정 κ°€λŠ₯ν•˜λ‹€! */
  top: 1px;
  bottom: 2px;
  left: 3px;
  right: 4px;
}

position은, 이름 κ·ΈλŒ€λ‘œ μœ„μΉ˜λ₯Ό κ²°μ •ν•˜λŠ” μ†μ„±μœΌλ‘œ,
μš”μ†Œμ˜ μœ„μΉ˜λ₯Ό μ–΄λ–€ κΈ°μ€€μœΌλ‘œ, 어디에 λ°°μΉ˜μ‹œν‚¬ 것인지 ν‘œν˜„ν•  수 μžˆλ‹€.

μœ„ λ¬Έμž₯μ—μ„œ 'μ–΄λ–€ κΈ°μ€€'으둜 λ°°μΉ˜μ‹œν‚¬ 것인지라고 ν‘œν˜„ν–ˆλŠ”λ°
μ—¬κΈ°μ„œ λ§ν•˜λŠ” 'κΈ°μ€€'은 position이 μ œκ³΅ν•˜κ³  μžˆλŠ” value 값을 λ¨Όμ € λ³΄λŠ” 것이 λΉ λ₯΄λ‹€.

static μ΄ˆκΈ°κ°’. κΈ°μ€€ μœ„μΉ˜λ₯Ό μ„€μ •ν•˜μ§€ μ•ŠμŒ.
relative ν˜„μž¬ μœ„μΉ˜λ₯Ό κΈ°μ€€μœΌλ‘œ μƒλŒ€ μœ„μΉ˜λ₯Ό 지정.
absolute λΆ€λͺ¨ μœ„μΉ˜λ₯Ό κΈ°μ€€μœΌλ‘œ μ ˆλŒ€ μœ„μΉ˜λ₯Ό 지정.
fixed μœˆλ„μš°(λΈŒλΌμš°μ € μ°½)λ₯Ό κΈ°μ€€μœΌλ‘œ μ ˆλŒ€ μœ„μΉ˜λ₯Ό μ§€μ •ν•˜μ—¬ μš”μ†Œλ₯Ό κ·Έ μœ„μΉ˜μ— κ³ μ •(fix)μ‹œν‚΄
sticky μ§€μ •λœ μœ„μΉ˜μ— λ·°ν¬νŠΈκ°€ λ„λ‹¬ν–ˆμ„ λ•Œ, μš”μ†Œκ°€ κ·Έ μœ„μΉ˜μ— κ³ μ •(fix)됨

μƒ˜ν”Œ μ½”λ“œλ₯Ό 보며 ν•˜λ‚˜ν•˜λ‚˜ μžμ„Ένžˆ μ•Œμ•„ 보자☺️

πŸ¦„ position: static

static은 position의 κΈ°λ³Έκ°’μœΌλ‘œ, position을 μ§€μ •ν•˜μ§€ μ•Šμ•„λ„ 기본적으둜 μ μš©λœλ‹€.

μœ„μ˜ μƒ˜ν”Œ μ½”λ“œμ—μ„œ style.css νŒŒμΌμ„ μ‚΄νŽ΄λ³΄μž.

position이 static인 μƒνƒœμ—λŠ”
top, left, left, right, z-indexλ₯Ό 지정해도 μœ„μΉ˜κ°€ λ³€κ²½
λ˜μ§€ μ•ŠλŠ”λ‹€.

λ”°λΌμ„œ, μš”μ†Œλ₯Ό μ›ν•˜λŠ” μœ„μΉ˜μ— λ°°μΉ˜μ‹œν‚€κ³  싢은 κ²½μš°μ—λŠ”
μ ν•©ν•œ 상황에 따라 μ•„λž˜μ—μ„œ μ–ΈκΈ‰ν•˜κ³  μžˆλŠ” λ‹€λ₯Έ position 값을 μ§€μ •ν•΄μ€˜μ•Όν•œλ‹€.

πŸ¦„ position: relative

relativeλŠ” ν˜„μž¬ μœ„μΉ˜λ₯Ό κΈ°μ€€μœΌλ‘œ μƒλŒ€ μœ„μΉ˜λ₯Ό μ§€μ •ν•˜κ²Œ ν•΄μ€€λ‹€.
'μƒλŒ€ μœ„μΉ˜'λΌλŠ” 말이 μ΄ν•΄ν•˜κΈ° μ–΄λ ΅μ§€λ§Œ,
relativeλŠ” μš”μ†Œ 자기 μžμ‹ μ˜ μ›λž˜ μœ„μΉ˜κ°€ 기쀀점이 λœλ‹€κ³  μƒκ°ν•˜λ©΄ 감을 작기 쉽닀.

relativeλŠ” μš”μ†Œ 자기 μžμ‹ μ˜ μ›λž˜ μœ„μΉ˜κ°€ 기쀀점이 λœλ‹€κ³  ν–ˆλŠ”λ°,
πŸ¦„ position: static의 μƒ˜ν”Œ μ½”λ“œμ—μ„œ 각 boxλ“€μ˜ μ›λž˜ μœ„μΉ˜λŠ” μ–΄λ””μΌκΉŒ?

정닡은 position 값이 static둜 μ„€μ •λœ 채 μœ„μΉ˜,
position 값이 아무 것도 μ„€μ •λ˜μ§€ μ•Šμ•˜μ„ λ•Œμ˜ μœ„μΉ˜μ΄λ‹€.


(πŸ‘† 즉 μ΄λ ‡κ²Œ ν“¨μ–΄ν•˜κ²Œ μœ„μΉ˜λœ μƒνƒœκ°€ boxλ“€μ˜ μ›λž˜ μœ„μΉ˜μ΄λ‹€!)

자, 그럼 이제 μƒ˜ν”Œ μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄μž.

μœ„μ˜ μ½”λ“œλŠ” πŸ¦„ position: static의 μƒ˜ν”Œ μ½”λ“œλ₯Ό κ°€μ Έμ™€μ„œ relativeλ₯Ό μ μš©μ‹œν‚¨ 것이닀.

λͺ¨λ“  box에 position: relativeλ₯Ό μ§€μ •ν•˜κΈ° μœ„ν•΄
boxλΌλŠ” 곡톡 클래슀λ₯Ό μž‘μ„±ν•˜μ—¬ relativeλ₯Ό μ μš©μ‹œμΌ°κ³ ,
각 box에 κ°œλ³„μ μœΌλ‘œ top, bottom, left, right λ“±μœΌλ‘œ 각각의 μœ„μΉ˜λ₯Ό 지정해쀀 결과이닀.

예λ₯Ό λ“€μ–΄ box2에 μ£Όλͺ©ν•΄λ³΄μž.
νšŒμƒ‰ μ˜μ—­μ€ box2의 μ›λž˜ μœ„μΉ˜λ₯Ό μ˜λ―Έν•˜λ©°,
녹색 μ˜μ—­μ€ relativeκ°€ 적용된 μ‹€μ œ box2의 μœ„μΉ˜λ₯Ό λ‚˜νƒ€λ‚Έλ‹€.

.box {
  position: relative;
  ...
}

.box.two {
  top: 30px; /* box2의 μ›λž˜ μœ„μΉ˜μ˜ μƒλ‹¨μœΌλ‘œλΆ€ν„° 30px만큼 이동 */
  left: 50px;  /* box2의 μ›λž˜ μœ„μΉ˜μ˜ μ’ŒμΈ‘μœΌλ‘œλΆ€ν„° 30px만큼 이동 */
}

μœ„ 그림의 λΉ¨κ°„ ν™”μ‚΄ν‘œλ₯Ό 주의깊게 μ‚΄νŽ΄λ³΄μž!
box2λŠ” νšŒμƒ‰ μ˜μ—­μΈ μ›λž˜ μœ„μΉ˜λ₯Ό κΈ°μ€€μ μœΌλ‘œ ν•˜μ—¬
상단(top)μ—μ„œ 30px만큼 이동, 쒌츑(left)μ—μ„œ 50px만큼 μ΄λ™λœ 것이닀.

relativeκ°€ 적용된 λ‹€λ₯Έ box듀도 같은 μ›λ¦¬λ‘œ μ΄λ™λœ 것이닀!

relative의 νŠΉμ§• 정리

  • top, left, left, right의 지정이 κ°€λŠ₯해진닀.
  • z-index의 지정이 κ°€λŠ₯해진닀.
  • relative의 기쀀점은 μš”μ†Œ 자기 μžμ‹ μ΄ μ›λž˜ λ°°μΉ˜λ˜μ—ˆλ˜ μœ„μΉ˜μ΄λ‹€.
  • absolute의 κΈ°μ€€ μœ„μΉ˜κ°€ λœλ‹€ (μΆ”ν›„ μ–ΈκΈ‰ μ˜ˆμ •!)

πŸ¦„ position: absolute

absoluteλŠ” relativeλ‚˜ fixedκ°€ μ§€μ •λœ λΆ€λͺ¨ μœ„μΉ˜λ₯Ό κΈ°μ€€μœΌλ‘œ μžμ‹ μ˜ μœ„μΉ˜λ₯Ό 지정할 수 있게 ν•΄μ€€λ‹€.

λ°”λ‘œ μƒ˜ν”Œ μ½”λ“œλ₯Ό μ‚΄νŽ΄ 보자.

μ»€λ‹€λž€ ν•‘ν¬μƒ‰μ˜ div.parentκ°€ boxλ“€μ˜ λΆ€λͺ¨μ΄λ‹€.
λΆ€λͺ¨μΈ parent에 position: relativeλ₯Ό μ§€μ •ν•œ ν›„,
parent의 μžμ‹μš”μ†ŒμΈ boxμ—κ²Œ position: absoluteλ₯Ό μ„€μ •ν•΄μ£Όμ—ˆλ‹€.
그리고 각각의 box에 μƒν•˜μ’Œμš° 값을 적절히 μ„€μ •ν•΄μ€€ 결과이닀.

μ΄λ²ˆμ—λŠ” μ˜ˆμ‹œλ‘œ box3λ₯Ό μžμ„Ένžˆ μ‚΄νŽ΄λ³΄μž.

absoluteλŠ” λΆ€λͺ¨ μœ„μΉ˜λ₯Ό κΈ°μ€€μ μœΌλ‘œ μ„€μ •ν•˜μ—¬ μš”μ†Œλ₯Ό μ΄λ™μ‹œν‚¬ 수 있게 ν•  수 μžˆλ‹€.
box3은 parent의 쒌츑 μ‹œμž‘μ (left)μœΌλ‘œλΆ€ν„° 200px,
ν•˜λ‹¨ μ‹œμž‘μ (bottom)μœΌλ‘œλΆ€ν„° 100px만큼 μ΄λ™λœ 곳에 μœ„μΉ˜ν•˜κ²Œ 된 것이닀.

absolute의 νŠΉμ§• 정리

  • λΆ€λͺ¨ μš”μ†Œ(=κΈ°μ€€ μœ„μΉ˜)에 relative λ˜λŠ” fixedλ₯Ό μ§€μ •ν•΄μ•Όν•œλ‹€.
  • μžμ‹ μš”μ†Œ(=μ΄λ™μ‹œν‚€κ³  싢은 μš”μ†Œ)에 absoluteλ₯Ό μ§€μ •ν•œλ‹€.
  • μžμ‹ μš”μ†Œλ₯Ό top, left, left, right λ“±μœΌλ‘œ ꡬ체적인 μœ„μΉ˜λ₯Ό μ‘°μ ˆν•  수 μžˆλ‹€.

πŸ¦„ position: fixed

fixedλŠ” λΈŒλΌμš°μ € ν™”λ©΄(μœˆλ„μš°)을 κΈ°μ€€μœΌλ‘œ μš”μ†Œλ₯Ό 정해진 μœ„μΉ˜μ— κ³ μ •(fix)μ‹œν‚¬ 수 μžˆλ‹€.

μœ„μ˜ μƒ˜ν”Œ μ½”λ“œμ˜ style.cssμ—μ„œ ν¬μΈνŠΈλŠ” μ•„λž˜μ˜ ꡬ문이닀.

.btn-top {
  position: fixed;
  ...
  right: 20px;
  bottom: 60px;
  ...
}

νŽ˜μ΄μ§€ νƒ‘μœΌλ‘œ ν–₯ν•˜κ²Œ ν•΄μ£ΌλŠ” .btn-top에 position: fixedλ₯Ό μ„€μ •ν•΄μ£Όμ—ˆλ‹€.
μœ„μ—μ„œ μ–ΈκΈ‰ν–ˆλ“―μ΄, fixedλŠ” λΈŒλΌμš°μ € 화면이 기쀀점이 λœλ‹€.

.btn-top을 λΈŒλΌμš°μ € ν™”λ©΄ 우츑(right)μœΌλ‘œλΆ€ν„° 20px,
λΈŒλΌμš°μ € ν™”λ©΄ ν•˜λ‹¨(bottom)μœΌλ‘œλΆ€ν„° 60pxμœΌλ‘œλΆ€ν„° 떨어진 곳에 btn-topλ²„νŠΌμ΄ μœ„μΉ˜ν•˜κ²Œ λ˜μ—ˆλ‹€.

fixedλŠ” 이름 κ·ΈλŒ€λ‘œ μš”μ†Œλ₯Ό μ§€μ •ν•œ μœ„μΉ˜μ— κ³ μ •(fix)μ‹œμΌœμ£ΌκΈ° λ•Œλ¬Έμ—
μŠ€ν¬λ‘€μ„ 해도 .btn-top λ²„νŠΌμ΄ μ§€μ •λœ μœ„μΉ˜μ— κ·ΈλŒ€λ‘œ μžλ¦¬ν•˜κ³  μžˆλ‹€λŠ” 것을 μ•Œ 수 μžˆλ‹€!

μ΄λ ‡κ²Œ fixedλŠ” μš”μ†Œλ₯Ό νŽ˜μ΄μ§€μ˜ μ›ν•˜λŠ” μœ„μΉ˜μ— 항상 κ³ μ •μ‹œν‚¬ 수 있기 λ•Œλ¬Έμ— μ•„μ£Ό μœ μš©ν•˜κ²Œ μ‚¬μš©λ˜λŠ” 값이닀.

μƒ˜ν”Œ μ½”λ“œμ—μ„œ μ‚¬μš©ν•œ νŽ˜μ΄μ§€ 탑 λ²„νŠΌ 뿐만 μ•„λ‹ˆλΌ,
headerλ₯Ό νŽ˜μ΄μ§€ 상단에 κ³ μ •μ‹œν‚¬ λ•Œλ„ λΉˆλ²ˆν•˜κ²Œ μ‚¬μš©λœλ‹€.

fixed의 νŠΉμ§• 정리

  • λΈŒλΌμš°μ € ν™”λ©΄(μœˆλ„μš°) 전체가 기쀀점이 λœλ‹€.
  • μŠ€ν¬λ‘€μ„ 해도 μš”μ†Œκ°€ μ§€μ •λœ μœ„μΉ˜μ— 계속 κ³ μ •λ˜μ–΄ μžˆλ‹€.
  • top, left, left, right의 지정이 κ°€λŠ₯ν•˜λ‹€.
  • z-index의 지정이 κ°€λŠ₯ν•˜λ‹€.

πŸ¦„ position: sticky

position의 λ§ˆμ§€λ§‰ κ°’, sticky이닀.
stickyλŠ” μš”μ†Œκ°€ μ§€μ •λœ 기쀀점(top, left, left, right λ“±μœΌλ‘œ μ„€μ •ν•΄λ‘” μœ„μΉ˜)에 λ„λ‹¬ν–ˆμ„ λ•Œ, κ·Έ 기쀀점에 μš”μ†Œλ₯Ό κ³ μ •(fix)μ‹œμΌœμ€€λ‹€.

이것도 μ‹€μ œ μ½”λ“œλ₯Ό λ³΄λŠ” 것이 λΉ λ₯΄λ‹€.

div.menu에 position: stickyλ₯Ό μ„€μ •ν–ˆκ³ ,
κΈ°μ€€μ μœΌλ‘œ top: 0을 섀정해쀬닀.
μ—¬κΈ°μ„œ top: 0은 λΈŒλΌμš°μ €(μœˆλ„μš°)의 μ΅œμƒλ‹¨ 지점을 λ§ν•œλ‹€.

νŽ˜μ΄μ§€λ₯Ό μŠ€ν¬λ‘€ν•˜μ—¬ div.menuκ°€ top: 0=λΈŒλΌμš°μ €μ˜ μ΅œμƒλ‹¨ 지점에 λ„λ‹¬ν–ˆμ„ λ•Œ
κ·Έ μœ„μΉ˜ κ·ΈλŒ€λ‘œ div.menuκ°€ κ³ μ •(fix)λ˜λŠ” 것을 확인할 수 μžˆλ‹€!

sticky의 νŠΉμ§• 정리

  • λΈŒλΌμš°μ € ν™”λ©΄(μœˆλ„μš°) 전체가 기쀀점이 λœλ‹€.
  • 기쀀점에 λ„λ‹¬ν–ˆμ„ λ•Œ μš”μ†Œκ°€ κ·Έ μœ„μΉ˜(기쀀점)에 κ³ μ •(fix)λœλ‹€.
  • top, left, left, right의 지정이 κ°€λŠ₯ν•˜λ‹€.
  • z-index의 지정이 κ°€λŠ₯ν•˜λ‹€.

2️⃣ display 속성

.element {
  display: κ°’;
}
  • display CSS 속성은 μš”μ†Œλ₯Ό 블둝과 인라인 μš”μ†Œ 쀑 μ–΄λŠ μͺ½μœΌλ‘œ μ²˜λ¦¬ν• μ§€μ™€ ν•¨κ»˜, ν”Œλ‘œμš°, κ·Έλ¦¬λ“œ, ν”Œλ ‰μŠ€μ²˜λŸΌ μžμ‹ μš”μ†Œλ₯Ό λ°°μΉ˜ν•  λ•Œ μ‚¬μš©ν•  λ ˆμ΄μ•„μ›ƒμ„ μ„€μ •ν•©λ‹ˆλ‹€.
  • 좜처: display - MDN

display 속성값은 크게 display-outside κ·Έλ£Ήκ³Ό display-inline 그룹으둜 λ‚˜λ‰œλ‹€.

display-outside κ·Έλ£Ή

display-outside 그룹에 ν•΄λ‹Ήλ˜λŠ” 값듀은 μš”μ†Œμ˜ 외뢀적인 μ„±μ§ˆμ„ μ„€μ •ν•  수 μžˆλ‹€.
μ„€μ •λœ μ„±μ§ˆμ— 따라 μš”μ†Œμ˜ 배치 방법, λ ˆμ΄μ•„μ›ƒμ΄ λ‹¬λΌμ§€λ―€λ‘œ
μ μž¬μ μ†Œμ— μ ν•©ν•œ 값을 μ„€μ •ν•΄μ£Όμ–΄μ•Ό ν•œλ‹€.

display-outside의 κ°’μ—λŠ” block, inline, (inline-block) 등이 μžˆλ‹€.

display-inside κ·Έλ£Ή

display-inline 그룹에 ν•΄λ‹Ήλ˜λŠ” 값듀은 μš”μ†Œ λ‚΄λΆ€μ˜ μžμ‹ μš”μ†Œλ₯Ό λ°°μΉ˜ν•˜λŠ” 방법을 μ„€μ •ν•  수 μžˆλ‹€.

display-inside의 κ°’μ—λŠ” flex, grid, table 등이 μžˆλ‹€.

πŸ™Œ

이번 κΈ€μ—μ„œλŠ” display-outside 속성인
block, inline, inline-block에 λŒ€ν•΄ μ•Œμ•„λ³΄μž ν•œλ‹€.

각각에 λŒ€ν•΄ ꡬ체적으둜 μ•Œμ•„λ³΄μž.

πŸ“Œ display: block

display: block은 μš”μ†Œκ°€ λ·° 포트의 κ°€λ‘œ μ˜μ—­μ„ 100% μ μœ ν•˜κ²Œ λ˜λŠ” νŠΉμ§•μ„ 가지고 μžˆλ‹€.
λ•Œλ¬Έμ— block νŠΉμ„±μ„ 가진 μš”μ†Œμ™€ μΈμ ‘λœ λ‹€λ₯Έ μš”μ†ŒλŠ” μ–‘ μ˜†μœΌλ‘œ 배치될 수 μ—†μœΌλ©°,
λΈ”λŸ­μ΄ μŒ“μ΄λ“― μ„Έλ‘œλ‘œ λ°°μ—΄λ˜λŠ” 것이 νŠΉμ§•μ΄λ‹€.

λ˜ν•œ width, height, margin, padding의 섀정이 κ°€λŠ₯ν•˜κΈ° λ•Œλ¬Έμ—
μš”μ†Œμ˜ μ‚¬μ΄μ¦ˆλ‚˜ 외관을 μ œμ–΄ν•˜κΈ° μš©μ΄ν•˜κΈ° λ•Œλ¬Έμ— λΉˆλ²ˆν•˜κ²Œ μ‚¬μš©λœλ‹€.

block νŠΉμ„±μ„ 가진 μš”μ†Œ(Block-level elements)λŠ”
λŒ€ν‘œμ μœΌλ‘œ <div>, <p>, <h1>, <ul> 등이 μžˆλ‹€.

μ°Έκ³  링크: κ·Έ μ™Έμ˜ block νŠΉμ„±μ„ 가진 μš”μ†Œλ“€

block의 νŠΉμ§• 정리

  • λΈ”λŸ­μ²˜λŸΌ μ„Έλ‘œλ‘œ μŒ“μ΄λŠ” 듯이 λ‚˜μ—΄λ˜λŠ” 것이 νŠΉμ§•
  • width, height, margin, padding의 섀정이 κ°€λŠ₯ν•˜μ—¬ μžμœ λ„κ°€ λ†’λ‹€.

πŸ“Œ display: inline

inline은 blockκ³ΌλŠ” 달리,
각 μš”μ†Œκ°€ μΈμ ‘λœ μš”μ†Œμ˜ μ–‘ μ˜†μœΌλ‘œ λ‚˜μ—΄λ˜λŠ” 것이 κ°€λŠ₯ν•˜λ‹€.

ν•˜μ§€λ§Œ inline μš”μ†Œμ—κ²Œ width, height 값을 μ μš©ν•  수 μ—†λ‹€!
λ”°λΌμ„œ inline 속성을 μ§€λ‹Œ μš”μ†Œμ˜ μ‚¬μ΄μ¦ˆλŠ”, μš”μ†Œ λ‚΄λΆ€ 컨텐츠 자체의 μ‚¬μ΄μ¦ˆ(폰트 μ‚¬μ΄μ¦ˆ, ν…μŠ€νŠΈ λŸ‰, μ΄λ―Έμ§€μ˜ κ°€λ‘œ μ„Έλ‘œ 크기 λ“±)에 따라 κ²°μ •λœλ‹€.

λ˜ν•œ blockκ³ΌλŠ” 달리
margin은 μ’Œμš°κ°’μΈ margin-left, margin-right만 μ μš©λœλ‹€.

padding은 μƒν•˜μ’Œμš° λͺ¨λ‘ 섀정이 κ°€λŠ₯ν•˜κΈ΄ ν•˜μ§€λ§Œ,
μƒν•˜ padding인 padding-top, padding-bottom은
λ‹€λ₯Έ μš”μ†Œμ—κ²Œ 영ν–₯을 λΌμΉ˜μ§€ λͺ»ν•œλ‹€
.

μœ„μ˜ μƒ˜ν”Œ μ½”λ“œμ˜ b.padding-textλ₯Ό 보면
padding-top을 μ μš©ν•΄μ€¬μŒμ—λ„ 각각의 b.padding-textκ°€
λ‹€λ₯Έ b.padding-text의 padding-top만큼의 뢀뢄을 μΈμ‹ν•˜μ§€ λͺ»ν•˜λŠ” 것을 μ•Œ 수 μžˆλ‹€.

inline νŠΉμ„±μ„ 가진 μš”μ†Œ(Inline elements)λŠ”
λŒ€ν‘œμ μœΌλ‘œ <a>, <span>, <img>, <svg> 등이 μžˆλ‹€.

μ°Έκ³  링크: κ·Έ μ™Έμ˜ inline νŠΉμ„±μ„ 가진 μš”μ†Œλ“€

inline의 νŠΉμ§• 정리

  • μš”μ†Œλ₯Ό κ°€λ‘œλ‘œ λ‚˜μ—΄ν•  수 μžˆλ‹€.
  • width, height의 섀정이 λΆˆκ°€λŠ₯ν•˜λ‹€.
  • margin은 쒌우 κ°’λ§Œ 섀정이 κ°€λŠ₯ν•˜λ‹€.
  • padding은 μƒν•˜μ’Œμš° 섀정이 κ°€λŠ₯ν•˜μ§€λ§Œ, μƒν•˜μ˜ padding은 λ‹€λ₯Έ μš”μ†Œμ—κ²Œ 영ν–₯을 쀄 수 μ—†λ‹€.
  • text-align와 vertical-align을 μ§€μ •ν•˜λŠ” 것이 κ°€λŠ₯ν•˜λ‹€.

πŸ“Œ display: inline-block

inline-block은 inlineκ³Ό block이 짬뽕 λœλ“―ν•œ(?) 속성이닀.
κ°„λ‹¨νžˆ λ§ν•˜λ©΄, μš”μ†Œμ˜ λ°°μΉ˜λŠ” inline적인 μ„±μ§ˆμ„ 가지고 있고
μš”μ†Œμ˜ ν˜•νƒœλŠ” block적인 μ„±μ§ˆ
을 가지고 μžˆλ‹€.

inline-block은 inline처럼 μš”μ†Œκ°€ μ˜†μœΌλ‘œ λ‚˜μ—΄λ˜λŠ” νŠΉμ§•μ„ 가지고 있으며,
block처럼 width, height의 섀정이 κ°€λŠ₯ν•˜λ‹€λŠ” μ•„μ£Ό 큰 λ©”λ¦¬νŠΈλ₯Ό 가지고 μžˆλ‹€.

λ˜ν•œ μ—¬λ°±μ˜ 섀정에 κ΄€ν•΄μ„œλŠ” block처럼
marginκ³Ό padding 값을 자유둭게 μ„€μ •ν•˜λŠ” 것이 κ°€λŠ₯ν•˜λ‹€!

inline-block 속성을 κΈ°λ³Έκ°’μœΌλ‘œ 가지고 μžˆλŠ” HTML μš”μ†ŒλŠ” μ—†κΈ° λ•Œλ¬Έμ—,
inline-block 속성을 ν™œμš©ν•˜κΈ° μœ„ν•΄μ„œλŠ”
ν•΄λ‹Ή μš”μ†Œμ— κ°œλ³„μ μœΌλ‘œ display: inline-block을 μ„ μ–Έν•΄ μ£Όμ–΄μ•Όλ§Œ ν•œλ‹€.

inline-block은 자유둭게 κ°€λ‘œ 폭, 높이, 여백을 μ‘°μ ˆν•  수 있기 λ•Œλ¬Έμ—
λ‹€μ–‘ν•œ λ°©λ©΄μ—μ„œ ν™œμš©ν•˜κΈ° μ’‹λ‹€.

inline-block의 νŠΉμ§• 정리

  • inline처럼 μš”μ†Œλ₯Ό κ°€λ‘œλ‘œ λ‚˜μ—΄ν•  수 μžˆλ‹€.
  • block처럼 width, height의 섀정이 κ°€λŠ₯ν•˜λ‹€.
  • block처럼 μƒν•˜μ’Œμš°μ— margin, padding의 섀정이 κ°€λŠ₯ν•˜λ‹€.
  • inline처럼 text-align, vertical-align을 μ‚¬μš©ν•˜λŠ” 것이 κ°€λŠ₯ν•˜λ‹€.

⚠️ display 속성 μ‚¬μš© μ‹œ μ£Όμ˜ν•  점

block은 inline을 ν¬κ΄„ν•˜λŠ” 더 큰 κ°œλ…μ΄κΈ° λ•Œλ¬Έμ—
inline μ†μ„±μ˜ μš”μ†Œ μ•ˆμ— block μ†μ„±μ˜ μš”μ†Œλ₯Ό λ°°μΉ˜μ‹œν‚€λŠ” 것은 μ›Ή ν‘œμ€€μ— μ–΄κΈ‹λ‚œλ‹€κ³  ν•œλ‹€.

<!-- πŸ‘Ž -->
<span>
  <h1>μ•ˆλ…•ν•˜μ„Έμš”!</h1>
</span>

<!-- πŸ‘ -->
<h1>
  <span>μ•ˆλ…•ν•˜μ„Έμš”!</span>
</h1>

3️⃣ Float

(그림을 ν΄λ¦­ν•˜λ©΄ 좜처둜 μ΄λ™ν•©λ‹ˆλ‹€.)

floatλŠ” μ˜μ–΄λ‘œ 'λœ¨λ‹€, λΆ€μœ ν•˜λ‹€'λΌλŠ” 의미λ₯Ό κ°€μ‘ŒμœΌλ©°,
μ›λž˜ μœ„μ˜ 그림처럼 이미지λ₯Ό λ„μ›Œμ„œ μ£Όλ³€μ˜ ν…μŠ€νŠΈμ™€ μžμ—°μŠ€λŸ½κ²Œ μ–΄μšΈλ¦¬λ„λ‘ λ°°μΉ˜ν•˜κΈ° μœ„ν•΄ νƒœμ–΄λ‚œ 속성이닀.

.element {
  float: κ°’;
}

float 속성은 νŠΉμ • μš”μ†Œλ₯Ό μ™Όμͺ½(left) λ˜λŠ” 였λ₯Έμͺ½(right)으둜 μ΄λ™μ‹œμΌœ λΆ€μœ μ‹œν‚€λŠ” 기법이닀.

μš”μ†Œλ₯Ό 쒌우둜 λ°°μΉ˜ν•  수 있기 λ•Œλ¬Έμ—, μ˜ˆλ‘œλΆ€ν„° μ›Ή νŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒμ„ μ„€μ •ν•  λ•Œ 자주 μ‚¬μš©λ˜μ–΄ μ™”λ‹€.

ν˜„μž¬λŠ” flexλ‚˜ grid의 λ“±μž₯으둜 인해 μ‚¬μš©λ˜λŠ” λΉˆλ„κ°€ 크게 쀄어듀고 μžˆμ§€λ§Œ,
κ΅­λ‚΄ μ‚¬μ΄νŠΈμ—λŠ” 아직 float둜 μž‘μ„±λœ νŽ˜μ΄μ§€κ°€ λ‹€μˆ˜ μ‘΄μž¬ν•˜κΈ° λ•Œλ¬Έμ—
float에 λŒ€ν•΄ 기본적인 κ°œλ…μ„ μ΄ν•΄ν•΄λ‘λŠ” 것이 ν•„μš”ν•˜λ‹€.

πŸ™Œ

floatμ—μ„œ μ„€μ •κ°€λŠ₯ν•œ 값은 λ‹€μŒκ³Ό κ°™λ‹€.

left μ™Όμͺ½μœΌλ‘œ λΆ€μœ ν•˜λŠ” 블둝 λ°•μŠ€λ₯Ό 생성.
right 였λ₯Έμͺ½μœΌλ‘œ λΆ€μœ ν•˜λŠ” 블둝 λ°•μŠ€λ₯Ό 생성
none μš”μ†Œλ₯Ό λΆ€μœ μ‹œν‚€μ§€ μ•ŠμŒ

μ‹€μ œ μƒ˜ν”Œ μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄μž.

<aside> νƒœκ·Έμ— 각각 float: left와 float: rightλ₯Ό μ μš©μ‹œν‚΄μœΌλ‘œμ¨
<aside> νƒœκ·Έκ°€ 각각 μ™Όμͺ½κ³Ό 였λ₯Έμͺ½μœΌλ‘œ λ– μžˆλ‹€.

float μ†Œκ°œ λΆ€λΆ„μ—μ„œλ„ μ–ΈκΈ‰ν–ˆλ“―μ΄, floatλŠ” μš”μ†Œλ₯Ό λΆ€μœ μ‹œν‚€λŠ” 속성이닀.
즉, floatκ°€ 적용된 <aside> νƒœκ·ΈλŠ” <article>νƒœκ·Έ μœ„μ— λ– μžˆλŠ” μƒνƒœλ‹€.

κ·Έ 증거둜, floatκ°€ μ μš©λ˜μ§€ μ•Šμ€ <article> νƒœκ·Έμ— λ…Έλž€ 배경색을 μ„€μ •ν•΄λ³Έ κ²°κ³Ό,
<aside> νƒœκ·Έμ˜ 배경색이 투λͺ…(transparent)인데도 λΆˆκ΅¬ν•˜κ³  배경색이 λ…Έλž€μƒ‰μœΌλ‘œ μ„€μ •λœ κ²ƒμ²˜λŸΌ 보인닀.

μ‹€μ œλ‘œλŠ” 투λͺ…색인 <aside>νƒœκ·Έκ°€ λ…Έλž€μƒ‰ 배경을 가진 <article> νƒœκ·Έμ˜ μœ„μ— λ– μžˆκΈ° λ•Œλ¬Έμ— λ…Έλž€μƒ‰μ΄ νˆ¬κ³Όλ˜μ–΄ λ³΄μ΄λŠ” 것이닀.

.clearfix둜 float λ ˆμ΄μ•„μ›ƒ λΆ•κ΄΄λ₯Ό ν•΄κ²°ν•˜κΈ°πŸ™Œ

λ ˆμ΄μ•„μ›ƒμ„ 쒌우둜 μ†μ‰½κ²Œ λ°°μΉ˜ν•  수 μžˆλŠ” float은
floatκ°€ 적용된 μš”μ†Œλ₯Ό 'λΆ€μœ μ‹œν‚¨λ‹€'λŠ” νŠΉμ§• λ•Œλ¬Έμ—
floatκ°€ 적용된 μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œμ˜ heightκ°€ μ‚¬λΌμ Έλ²„λ €μ„œ λ ˆμ΄μ•„μ›ƒμ΄ λΆ•κ΄΄λ˜λ²„λ¦¬λŠ” κ²½μš°κ°€ λ°œμƒν•œλ‹€.

μ•„λž˜ μ½”λ“œλŠ” λ ˆμ΄μ•„μ›ƒμ΄ λΆ•κ΄΄λœ μ˜ˆμ‹œμ΄λ‹€.

left child와 right childλŠ” floatκ°€ μ μš©λ˜μ–΄ λΆ• 뜬 μƒνƒœλ‘œ 쒌우둜 μ •λ ¬λ˜μ—ˆλ‹€.
이둜 인해 λΆ€λͺ¨ μš”μ†ŒμΈ .parentλŠ” heightλ₯Ό μ™„μ „νžˆ μžƒμ–΄λ²„λ Έλ‹€.

그리고 λΆ• λ– μžˆλŠ” .child의 μžλ¦¬μ—λŠ” μ΅œν•˜λ‹¨μ— μœ„μΉ˜ν•˜λŠ” μ΄ˆλ‘μƒ‰ .bottomκ°€ μ•„λž˜λΆ€ν„° μœ„λ‘œ 빈자리λ₯Ό 비집고 μ˜¬λΌμ™€ μœ„μΉ˜ν•˜κ²Œ λ˜μ–΄ μ΄λ ‡κ²Œ μš”μƒν•œ λ ˆμ΄μ•„μ›ƒμ΄ νƒ„μƒλ˜κ²Œ λ˜μ—ˆλ‹€πŸ₯²

μœ„μ™€ 같은 float λ ˆμ΄μ•„μ›ƒ λΆ•κ΄΄λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•œ 방법은 λ‹€μˆ˜ μ‘΄μž¬ν•˜μ§€λ§Œ
.clearfixλΌλŠ” 해결책을 μ†Œκ°œν•œλ‹€.

.clearfixλŠ” λΆ€λͺ¨ μš”μ†Œμ—κ²Œ heightλ₯Ό μœ μ§€μ‹œν‚€κΈ° μœ„ν•΄ μž‘μ„±ν•˜λŠ” ν΄λž˜μŠ€μ΄λ‹€.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.clearfixλΌλŠ” 클래슀λ₯Ό μƒμ„±ν•˜κ³  가상 μš”μ†ŒμΈ after에 μœ„μ™€ 같은 μ½”λ“œλ₯Ό μž‘μ„±ν•œλ‹€.

그리고 float 속성을 μ μš©ν•œ μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œμ˜ ν΄λž˜μŠ€μ— .clearfixλ₯Ό μΆ”κ°€ν•΄μ€€λ‹€.

λ§λ”ν•˜κ²Œ λ ˆμ΄μ•„μ›ƒ λΆ•κ΄΄κ°€ ν•΄κ²°λœ λͺ¨μŠ΅πŸŒž
.clearfix의 λ…Όλ¦¬λŠ” λ‹€μŒκ³Ό κ°™λ‹€.

  • 1️⃣: .clearfix에 가상 μš”μ†ŒμΈ afterλ₯Ό μ„€μ •ν•˜κ³ , 곡백의 값을 가진 content 속성을 μΆ”κ°€ν•œλ‹€. μ΄λŠ” .clearfixλ₯Ό μ§€μ •ν•œ μš”μ†Œμ˜ 말미에 곡백의 λ°•μŠ€λ₯Ό λ§Œλ“ λ‹€λŠ” 것을 λœ»ν•œλ‹€.
  • 2️⃣: display: block을 μΆ”κ°€ν•˜μ—¬ 가상 μš”μ†Œλ‘œ λ§Œλ“  λ°•μŠ€λ₯Ό λΈ”λŸ­ μš”μ†Œλ‘œ λ§Œλ“ λ‹€.
  • 3️⃣: 그리고 clear 속성을 μ‚¬μš©ν•˜μ—¬ floatλ₯Ό ν•΄μ œν•œλ‹€. (clear 속성은 λΈ”λŸ­ μš”μ†Œμ— μ μš©λœλ‹€κ³  함)

마치며

μ›Ή νŽ˜μ΄μ§€μ˜ λ‹€μ–‘ν•œ λ ˆμ΄μ•„μ›ƒμ„ κ΅¬μ„±ν•˜κ³ 
μš”μ†Œλ₯Ό λ°°μΉ˜μ‹œν‚€λŠ”λ° ν•„μš”ν•œ CSS에 λŒ€ν•΄ μ•Œμ•„λ³΄μ•˜λ‹€β˜ΊοΈ
(ν•˜μ–—κ²Œ λΆˆνƒœμ› μ–΄πŸ₯²)

λ ˆμ΄μ•„μ›ƒκ³Ό μš”μ†Œμ˜ 배치λ₯Ό κΈ€λ‘œ ν‘œν˜„ν•˜λŠ” 것이 잘 전해지지 μ•Šμ„ 것 κ°™μ•„
μ—΄μ‹¬νžˆ μƒ˜ν”Œ μ½”λ“œλ₯Ό μž‘μ„±ν•΄λ³΄μ•˜λŠ”λ°, 이 글이 λˆ„κ΅°κ°€μ—κ²Œ 도움이 λ˜μ—ˆμœΌλ©΄ μ’‹κ² λ‹€πŸ’–

λ³Έλ¬Έμ—μ„œλ„ μ–ΈκΈ‰ν–ˆλ“―μ΄ 사싀 float은 졜근 잘 μ‚¬μš©λ˜μ§€ μ•Šκ³  있으며,
flexλ‚˜ grid둜 λΉ λ₯΄κ²Œ λŒ€μ²΄λ˜μ–΄κ°€κ³  μžˆλ‹€.
(μ• μ΄ˆμ— floatλŠ” μ›λž˜ λ ˆμ΄μ•„μ›ƒμ„ κ΅¬νšν•˜κΈ° μœ„ν•œ μš©λ„κ°€ μ•„λ‹ˆλΌλŠ” 점)

λ‹€λ₯Έ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄ 뿐만 μ•„λ‹ˆλΌ CSS λ˜ν•œ λ¬΄μ„œμš΄ μ†λ„λ‘œ λ°œμ „ 쀑이기 λ•Œλ¬Έμ—,
μ–΄μ©Œλ©΄ 눈 κΉœμ§ν•  μƒˆμ— flexλ‚˜ grid보닀 더 λͺ¨λ˜ν•œ 문법이 λ‚˜μ˜¬μ§€λ„ λͺ¨λ₯Έλ‹€...πŸ€¦β€β™€οΈ
CSS의 세계도 정말 λ°©λŒ€ν•˜λ‹€λŠ” 것을 λŠλ‚€λ‹€.

λ ˆμ΄μ•„μ›ƒμ„ λŠ₯μˆ™ν•˜κ²Œ κ΅¬μ„±ν•˜κΈ° μœ„ν•΄μ„œλŠ” 였늘 κΈ€μ—μ„œ μ†Œκ°œλœ λ‚΄μš©μ„
깊게 깊게 μ΄ν•΄ν•˜κ³  μžˆλŠ” 것이 μ€‘μš”ν•˜λ‹€κ³  μƒκ°ν•œλ‹€.
쒋은 볡슡이 된 것 κ°™μ•„ λΏŒλ“―ν•˜λ‹€.

잘λͺ»λœ 정보가 μžˆλ‹€λ©΄ 마ꡬ마ꡬ마ꡬ마ꡬ μ§€μ ν•΄μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€πŸ™‡β€β™€οΈ

profile
Frontend Developer. λΈ”λ‘œκ·Έ μ΄μ‚¬ν–ˆμ–΄μš” 🚚 β†’ https://iamhayoung.dev

1개의 λŒ“κΈ€

comment-user-thumbnail
2023λ…„ 11μ›” 8일

쒋은 κΈ€ κ°μ‚¬ν•©λ‹ˆλ‹€ !!

λ‹΅κΈ€ 달기