πŸ“’TIL)CSS λ ˆμ΄μ•„μ›ƒ

TaeYangΒ·2021λ…„ 9μ›” 2일
2

TIL

λͺ©λ‘ 보기
2/8
post-thumbnail

μ˜€λŠ˜μ€ CSSλ₯Ό μ‚¬μš©ν•˜λ©΄μ„œ 많이 ν—·κ°ˆλ¦¬κΈ°λ„ position, inline, block, inline-block 등을 μ•Œμ•„λ³Όλ €κ³  ν•©λ‹ˆλ‹€.

ν¬μ§€μ…˜(Position)

Position속성은 ν™”λ©΄μƒμ—μ„œ μ—˜λ¦¬λ©˜νŠΈ(μš”μ†Œ)의 μœ„μΉ˜λ₯Ό μ–΄λ””λ‹€ 쀄지 κ²°μ • ν• μˆ˜ μžˆλ„λ‘ ν•΄μ£ΌλŠ” μ†μ„±μž…λ‹ˆλ‹€.
즉 포지셔닝을 ν•  방법을 μ§€μ •ν•΄μ£ΌλŠ” 속성!

ν¬μ§€μ…˜ 속성

ν¬μ§€μ…˜ μ†μ„±μ—λŠ”tatic, relative, absolute, fixed 등이 μžˆλŠ”λ° 이런 속성듀을 λΆ€μ—¬ν•΄μ€˜μ•Ό λΆ€μˆ˜μ μœΌλ‘œ top, bottom, left, right λ‘₯ μœ„μΉ˜ 값듀을 μ‚¬μš©ν• μˆ˜ μžˆλ‹€κ³  ν•©λ‹ˆλ‹€.

βœ”οΈ static

static속성은 ꡳ이 μž…λ ₯을 ν•˜μ§€ μ•Šμ•„λ„ 기본적으둜 적용이 λ˜μ–΄μžˆλŠ” μ†μ„±μž…λ‹ˆλ‹€.
πŸ’‘ μœ„μ—μ„œ ν¬μ§€μ…˜ 속성을 μ‚¬μš©ν•˜λ©΄ top 같은 μœ„μΉ˜ 값을 μ“Έμˆ˜ μžˆλ‹€κ³  ν–ˆλŠ”λ° μ˜ˆμ™Έλ‘œstatic 속성은 top, bottom, right, left 영ν–₯을 받지 μ•ŠμŠ΅λ‹ˆλ‹€.

βœ”οΈ relative

relative속성은 기본적인 ν¬μ§€μ…˜μ—μ„œ μƒλŒ€μ μΈ ν¬μ§€μ…˜μ„ κ°€μ§ˆ 수 μžˆλ„λ‘ ν•΄μ€λ‹ˆλ‹€.
μœ„μ—μ„œ μ–˜κΈ° ν–ˆλ˜ μœ„μΉ˜ κ°’μšΈ μ΄μš©ν•΄ μ›λž˜μ˜ μœ„μΉ˜μ—μ„œ μƒλŒ€μ μΈ μœ„μΉ˜λ₯Ό 지정해 μ€„μˆ˜ μžˆμŠ΅λ‹ˆλ‹€.

βœ”οΈ absolute

absolute속성은 κ°€μž₯ κ°€κΉŒμš΄ ν¬μ§€μ…˜ 쑰상 μ—˜λ¦¬λ¨ΌνŠΈμ— μƒλŒ€μ μΈ μœ„μΉ˜λ₯Ό μ„€μ • ν• μˆ˜ μžˆμŠ΅λ‹ˆλ‹€.
κ°€κΉŒμš΄ 쑰상 μ—˜λ¦¬λ¨ΌνŠΈκ°€ μ—†λ‹€λ©΄ bodyλ₯Ό κΈ°μ€€μœΌλ‘œ ν•©λ‹ˆλ‹€.

βœ”οΈ fixed

fixed 속성은 화면에 λ³΄μ΄λŠ” μœ„μΉ˜μ— κ³ μ •ν•œλ‹€κ³  μƒκ°ν•˜λ©΄ νŽΈν•©λ‹ˆλ‹€.
μœ„μΉ˜κ°€ ν•œλ²ˆ κ³ μ •λ˜λ©΄ μŠ€ν¬λ‘€μ„ 내렀도 κ·Έμžλ¦¬μ— κ³ μ •μ μœΌλ‘œ μœ„μΉ˜ν•˜κ²Œ λ©λ‹ˆλ‹€!

μ΄λŸ°μ‹μœΌλ‘œ 상단바에 μ μš©μ„ 많이 ν•˜κ²Œλ©λ‹ˆλ‹€.

display 속성

display속성은 μ›ΉνŽ˜μ΄μ§€ μƒμ—μ„œ μ—˜λ¦¬λ¨ΌνŠΈλ“€μ΄ μ–΄λ–»κ²Œ 보여지고 λ‹€λ₯Έ μ—˜λ¦¬λ©˜νŠΈμ™€ μ–΄λ–»κ²Œ μƒν˜Έ λ°°μΉ˜λ˜λŠ”μ§€λ₯Ό κ²°μ •ν•˜λŠ” μ†μ„±μž…λ‹ˆλ‹€. 속성값은 inline, block, inline-block 등이 μžˆμŠ΅λ‹ˆλ‹€.

βœ”οΈinline

inlineμš”μ†ŒλŠ” μ€„λ°”κΏˆ 없이 ν•œμ€„μ— λ‹€λ₯Έ μš”μ†Œλ“€κ³Ό λ‚˜λž€νžˆ λ°°μΉ˜λ©λ‹ˆλ‹€.
inlineμš”μ†Œλ‘œλŠ” span, a, em νƒœκ·Έ 등이 μžˆμŠ΅λ‹ˆλ‹€.

<body>
  <span>span</span>
  <a>abcdef</a>
</body>
</html>
body {
  width: 300px;
  height: 300px:
  margin: 100px;
  padding: 100px; 
}
span {
  background-color: yellow;
}
a {
  background-color: green;
}


inlineμš”μ†ŒλŠ” width, height 속성을 지정해도 적용이 되질 μ•ŠλŠ”λ‹€.

βœ”οΈblock

blick으둜 μ§€μ •λœ μš”μ†ŒλŠ” μ€„λ°”κΏˆμ΄ λ“€μ–΄κ°€ ν•œμ€„μ„ 차지 ,λ‹€λ₯Έ μš”μ†Œκ°€ μžˆμ–΄λ„ λ‹€λ₯Έμ€„λ‘œ λ°€μ–΄λ‚΄κ³  혼자 ν•œμ€„μ„ μ°¨μ§€ν•©λ‹ˆλ‹€.
blockμš”μ†Œλ‘œλŠ” div, p, h1 νƒœκ·Έ 등이 μžˆμŠ΅λ‹ˆλ‹€.

<body>
  <div>div</sdiv>
  <p>p</p>
</body>
div {
  background-color: yellow;
}
p {
  background-color: green;
}

πŸ’‘ inline μš”μ†Œμ™€λŠ” 달리 width, height, margin, padding 속성이 λͺ¨λ‘ 적용 λ©λ‹ˆλ‹€.

inline-block

inline-block μš”μ†ŒλŠ” inlineμš”μ†Œμ²˜λŸΌ μ€„λ°”κΏˆ 없이 ν•œμ€„μ— λ‹€λ₯Έ μš”μ†Œλ“€κ³Ό λ‚˜λž€νžˆ λ°°μΉ˜κ°€ 되고
inline μš”μ†Œμ™€λŠ” 달리 width, height, margin, padding 속성이 λͺ¨λ‘ 적용 λ©λ‹ˆλ‹€.
inline-blockμš”μ†Œλ‘œλŠ” button, input, select νƒœκ·Έ 등이 μžˆμŠ΅λ‹ˆλ‹€.

profile
μŒμ•… 전곡 μ΄μ˜€λ˜ μ˜ˆλΉ„ ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžβ˜€οΈ

0개의 λŒ“κΈ€