Client/CSS

[CSS] Position 속성 (static, relative, absolute, fixed)

meeeeejin 2020. 6. 11. 10:03

HTML Positioning Rule

CSS의 position 속성을 μ•Œμ•„λ³΄κΈ° 전에 λ¨Όμ € HTML λ¬Έμ„œμ—μ„œ μš”μ†Œλ₯Ό μ–΄λ–»κ²Œ λ°°μΉ˜ν•˜λŠ”μ§€ κ·Έ κ·œμΉ™μ— λŒ€ν•΄ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€.

 

1. Content is everything. 

inline μš”μ†Œμ—μ„œλŠ” μš”μ†Œμ˜ content의 크기가 곧 μš”μ†Œμ˜ 크기가 λ©λ‹ˆλ‹€. 

 

2. Order comes from code.

HTML λ¬Έμ„œμ—μ„œ μ½”λ“œμ— μž‘μ„±ν•œ μˆœμ„œλŒ€λ‘œ μš”μ†Œκ°€ λ°°μΉ˜λ©λ‹ˆλ‹€. 

 

예λ₯Ό λ“€μ–΄, HTML νŒŒμΌμ—

<h1>This is first.</h1>

<h2>This is second.</h2>

λΌλŠ” μ½”λ“œκ°€ μžˆλ‹€λ©΄, h1이 h2보닀 λ¨Όμ €(μœ„μ—) μž‘μ„±λ˜μ—ˆκΈ° λ•Œλ¬Έμ— ν™”λ©΄μ—μ„œλ„ μœ„μ— λ‚˜νƒ€λ‚©λ‹ˆλ‹€. 

 

// ꡬ뢄을 μœ„ν•΄ h1κ³Ό h2 μš”μ†Œμ— ν…Œλ‘λ¦¬λ₯Ό μΆ”κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 

 

3. Children sit on parents.

μžμ‹ μš”μ†ŒλŠ” λΆ€λͺ¨ μš”μ†Œ μœ„μ—(κ²Ήμ³μ„œ) λ‚˜νƒ€λ‚©λ‹ˆλ‹€. 

 

<div class="parent">

      Parent

      <div class="child">Children</div>

</div>

 

 

 

CSS Postion 속성

CSS의 Postion 속성은 λ¬Έμ„œ 상에 μš”μ†Œλ₯Ό λ°°μΉ˜ν•˜λŠ” 방법을 κ²°μ •ν•©λ‹ˆλ‹€. 

속성 값듀은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

 

1. static

postion μ†μ„±μ˜ default 값이며, μ•žμ„œ μ„€λͺ…ν•œ HTML의 μš”μ†Œ 배치 방법에 따라 position이 μ •ν•΄μ§‘λ‹ˆλ‹€.

 

 

2. relative

μš”μ†Œκ°€ μ›λž˜ 있던 μœ„μΉ˜(normal position)λ₯Ό κΈ°μ€€μœΌλ‘œ μƒλŒ€μ μΈ μœ„μΉ˜λ₯Ό 지정할 수 μžˆμŠ΅λ‹ˆλ‹€. 

μ΄λ•Œ μ–΄λ””λ‘œ μ–Όλ§ˆνΌ 이동할 κ²ƒμΈμ§€λŠ” top, bottom, left, right의 offset을 μ΄μš©ν•΄ μ§€μ •ν•©λ‹ˆλ‹€. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
  width: 100px;
  height: 100px;
}
 
.div1 {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: red;
}
 
.div2 {
  background-color: blue;
}
 cs

div1이 μ›λž˜ μžˆμ–΄μ•Ό ν•  μœ„μΉ˜μ—μ„œ μ•„λž˜λ‘œ 20px, 였λ₯Έμͺ½μœΌλ‘œ 50px μ΄λ™ν•œ 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

top: 20px; left: 50px이라고 μž‘μ„±ν–ˆλŠ”λ° 였λ₯Έμͺ½ μ•„λž˜λ‘œ μ΄λ™ν•œ 것이 μ΄μƒν•˜κ²Œ 느껴질 수 μžˆμŠ΅λ‹ˆλ‹€.

postion의 offset은 top: 20px;μ΄λΌλŠ” μ½”λ“œλ₯Ό μœ„μͺ½μ—μ„œ 20px 떨어진 곳이라고 ν•΄μ„ν•˜κΈ° λ•Œλ¬Έμ— div1은 μœ„μͺ½μ—μ„œ 20px, μ™Όμͺ½μ—μ„œ 50px 떨어진 곳에 μœ„μΉ˜ν•˜κ²Œ λ©λ‹ˆλ‹€. 

λ˜ν•œ μ£Όλͺ©ν•  점은 div1의 position이 λ°”λ€Œμ—ˆμ§€λ§Œ 그것이 div2의 positionμ—λŠ” 영ν–₯을 주지 μ•ŠλŠ”λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 

이렇듯 relative position을 가진 μš”μ†Œλ“€μ€ λ‹€λ₯Έ μš”μ†Œλ“€μ˜ positionμ—λŠ” 영ν–₯을 주지 μ•ŠμŠ΅λ‹ˆλ‹€. 

 

 

3. absolute

ν•΄λ‹Ή μš”μ†Œμ˜ ancestor μ€‘μ—μ„œ position 속성을 가진(not static) μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ μƒλŒ€ μœ„μΉ˜λ₯Ό 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

λ§Œμ•½ ancestor μ€‘μ—μ„œ position이 μ§€μ •λœ μš”μ†Œκ°€ μ—†λ‹€λ©΄ 초기 μ»¨ν…Œμ΄λ‹ 블둝(ex. <body>)λ₯Ό κΈ°μ€€μœΌλ‘œ μƒλŒ€ μœ„μΉ˜λ₯Ό μ§€μ •ν•©λ‹ˆλ‹€. 

 

div1이 div2의 λΆ€λͺ¨μΌ λ•Œμ˜ μ˜ˆμ‹œ)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.div1 {
  position: relative;
  background-color: red;
  width: 200px;
  height: 200px;
}
 
.div2 {
  position: absolute;
  bottom: 20px;
  right: 30px;
  background-color: blue;
  width: 100px;
  height: 100px;
}
 cs

div2λŠ” κ°€μž₯ κ°€κΉŒμš΄ positioned ancestor인 div1을 κΈ°μ€€μœΌλ‘œ μœ„μΉ˜ 이동을 ν•˜κ²Œ λ©λ‹ˆλ‹€. λ”°λΌμ„œ div1의 μ•„λž˜μͺ½μ—μ„œ 20px, 였λ₯Έμͺ½μ—μ„œ 30px 떨어진 곳에 μœ„μΉ˜ν•˜κ²Œ λ©λ‹ˆλ‹€.

λ§Œμ•½ div1의 position이 μ •ν•΄μ Έ μžˆμ§€ μ•Šλ‹€λ©΄(static이라면) div2의 μœ„μΉ˜ 이동은 body μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ μΌμ–΄λ‚˜κ²Œ λ©λ‹ˆλ‹€. (body μš”μ†Œ 내에 div1, div2 μš”μ†Œλ°–μ— μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ‹€κ³  κ°€μ •ν–ˆμ„ λ•Œ)

absoluteλŠ” relative와 λ‹€λ₯΄κ²Œ λ‹€λ₯Έ μš”μ†Œλ“€μ˜ position에 λ³€ν™”λ₯Ό μ€λ‹ˆλ‹€. 

 

4. fixed

veiwport(μ›ΉνŽ˜μ΄μ§€κ°€ λ³΄μ΄λŠ” ν™”λ©΄)을 κΈ°μ€€μœΌλ‘œ μƒλŒ€ μœ„μΉ˜λ₯Ό 지정할 수 μžˆμŠ΅λ‹ˆλ‹€. 

뷰포트의 νŠΉμ • μœ„μΉ˜μ— μš”μ†Œλ₯Ό κ³ μ •ν•˜κΈ° λ•Œλ¬Έμ—, μŠ€ν¬λ‘€μ„ ν•΄μ„œ 화면이 내렀가더라도 μš”μ†ŒλŠ” 같은 μœ„μΉ˜μ— κ³ μ •λ©λ‹ˆλ‹€.

 

1
2
3
4
5
6
7
8
.div1 {
  position: fixed;
  top: 100px;
  left: 100px;
  background-color: red;
  width: 200px;
  height: 200px;
}
 cs

 

 

 

κ³΅λΆ€ν•œ 것을 μ •λ¦¬ν•œ λ‚΄μš©μž…λ‹ˆλ‹€. μˆ˜μ •ν•  것이 있으면 μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€ :)

 

 

728x90
μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ 동일쑰건

'Client > CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[CSS] z-index (μš”μ†Œμ˜ μŒ“μž„ μˆœμ„œ 지정)  (0) 2020.06.12
[CSS] ꡬ글 μ›Ή 폰트(Google fonts) μ‚¬μš© 방법  (0) 2020.06.11
[CSS] display 속성  (0) 2020.06.11
[CSS] CSS κΈ°λ³Έ λ°•μŠ€ λͺ¨λΈ(Box Model)  (0) 2020.06.09
[CSS] CSS μ„ νƒμž (Selector)  (0) 2020.06.09

'Client/CSS'의 λ‹€λ₯ΈκΈ€

  • ν˜„μž¬κΈ€[CSS] Position 속성 (static, relative, absolute, fixed)

κ΄€λ ¨κΈ€

λŒ“κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”