potatos
๐•๐•’๐•ฆ๐•ฃ๐•ฆ๐•ค
potatos
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ
    • Daily
    • Study
      • CS
      • Network
      • Windows
      • Linux
      • HTML & CSS
      • JavaScript
      • React
      • vue.js
      • Flutter
      • DataBase
      • Elastic Se..
      • Log
      • Coding Tes..
    • Work
      • PC
      • Mobile
      • JPGIF

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

  • notice

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • CSS
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • Linux
  • MySQL
  • Windows
  • ์ˆ˜์ง ์ •๋ ฌ
  • JavaScript
  • ์…€๋ ‰ํ„ฐ
  • ์œˆ๋„์šฐ
  • HTML

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
potatos
Study/HTML & CSS

[CSS] Baseline (์ˆ˜์ง ์ •๋ ฌ)

[CSS] Baseline (์ˆ˜์ง ์ •๋ ฌ)
Study/HTML & CSS

[CSS] Baseline (์ˆ˜์ง ์ •๋ ฌ)

2022. 7. 14. 00:43

Baseline

๋ณดํ†ต ์‚ฌ๋žŒ๋“ค์€ ์š”์†Œ์˜ ๋์„ baseline์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ, ๊ธ€์ž์˜ ๋ฐ”๋กœ ๋ฐ‘ ๋ผ์ธ์„ baseline์ด๋ผ๊ณ  ํ•œ๋‹ค. ํฌ๊ธฐ๊ฐ€ ํฐ ๊ธ€์ž์™€ ์ž‘์€ ๊ธ€์ž๋ฅผ ๋‘๊ณ  ๋ณด๋ฉด ์•„๋ž˜๊ฐ€ ๋งž์ถฐ ์žˆ๋Š” ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ๋Š”๋ฐ ๊ทธ ์„ ์ด baseline์ด ๋˜๋Š” ๊ฒƒ์ด๋‹ค. ํ…์ŠคํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ด๋ฏธ์ง€, inline ์š”์†Œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๋‹ค.
๋˜ํ•œ, vertical-align์˜ ์กฐ๊ฑด๋“ค์„ ์ถฉ์กฑ์‹œํ‚ค๋ฉด์„œ ์ค„์˜ ๋†’์ด๋ฅผ ์ตœ์†Œํ™”์‹œํ‚ค๋Š” ๊ณณ์— ์œ„์น˜ํ•œ๋‹ค.

์ถœ์ฒ˜: https://infoheap.com/css-inline-block-baseline-alignment/

vertical-align

  • inline ์š”์†Œ์™€ inline-block ์š”์†Œ๋ฅผ ์ˆ˜์ง ์ •๋ ฌํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
    • block ์š”์†Œ์—๋Š” ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ์š”์†Œ ์ž์ฒด๋งŒ ์ •๋ ฌํ•˜๋ฉฐ, ๋‚ด์šฉ์—๋Š” ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š”๋‹ค.
    • table cell์— ์ ์šฉํ•  ๋•Œ๋Š” ์ œ์™ธ๋œ๋‹ค.
  • vertical-align์€ ์ •๋ ฌํ•˜๋ ค๋Š” ์š”์†Œ๋ฅผ ๋‹ค๋ฅธ inline ์š”์†Œ์— ์ƒ๋Œ€์ ์œผ๋กœ ์ •๋ ฌํ•œ๋‹ค.
    • ๊ฐ™์€ ์ค„์—์„œ inline ์š”์†Œ์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋†’๋‚ฎ์ด๊ฐ€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋‹ค.
    • ๊ฐ™์€ ์ค„์— ์žˆ๋Š” line-height ์„ค์ •์— ๋”ฐ๋ผ์„œ๋„ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋‹ค.
  • ์–ด๋””์— baseline์ด ๋งž์ถฐ์ง€๋Š”์ง€ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ๋ถ€๋ชจ ์š”์†Œ์— ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ๋น„๊ตํ•˜๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค.
๊ฐ’ ์„ค๋ช…
baseline ๊ธฐ๋ณธ ๊ฐ’
๋ถ€๋ชจ ์š”์†Œ์˜ baseline์— ๋งž์ถค
baseline์ด ์—†๋Š” ์š”์†Œ๋Š” margin ๋์„ baseline์œผ๋กœ ์‚ฌ์šฉ
sub ๋ถ€๋ชจ ์š”์†Œ์˜ ์•„๋ž˜ ์ฒจ์ž baseline์— ๋งž์ถค
super ๋ถ€๋ชจ ์š”์†Œ์˜ ์œ„ ์ฒจ์ž baseline์— ๋งž์ถค
text-top ์š”์†Œ์˜ ๋งจ ์œ„๋ฅผ ๋ถ€๋ชจ font์˜ ๋งจ ์œ„์— ๋งž์ถค
text-bottom ์š”์†Œ์˜ ๋งจ ์•„๋ž˜๋ฅผ ๋ถ€๋ชจ font์˜ ๋งจ ์•„๋ž˜์— ๋งž์ถค
top ์š”์†Œ์˜ ์œ—์ชฝ์„ ์ค„์—์„œ ๊ฐ€์žฅ ๋†’์€ ์š”์†Œ์˜ ๋งจ ์œ„์— ๋งž์ถค
middle ๋ถ€๋ชจ ์š”์†Œ์˜ ์ค‘์•™์— ๋งž์ถค
bottom ์š”์†Œ์˜ ์•„๋ž˜์ชฝ์„ ์ค„์—์„œ ๊ฐ€์žฅ ๋‚ฎ์€ ์š”์†Œ์— ๋งž์ถค
๋‹จ์œ„ ๊ฐ’ (px, cm ๋“ฑ) ๋‹จ์œ„ ๊ฐ’์œผ๋กœ ๋งž์ถค ๊ฐ€๋Šฅ
% line-height์˜ ๋ฐฑ๋ถ„์œจ

table cell ์†์„ฑ ๊ฐ’

๊ฐ’ ์„ค๋ช…
top ํ…Œ์ด๋ธ” ์นธ์—์„œ ์ƒ๋‹จ padding์„ ๊ฐ€๋กค ์ค„์˜ ๋งจ ์œ„์— ๋งž์ถค
middle ํ…Œ์ด๋ธ” ์นธ์—์„œ padding box๋ฅผ ์ค‘์•™์— ์œ„์น˜
bottom ํ…Œ์ด๋ธ” ์นธ์—์„œ ํ•˜๋‹จ padding ๊ฐ€๋กœ ์ค„์—์„œ ๋งจ ์•„๋ž˜์— ๋งž์ถค

block ์š”์†Œ๋ฅผ ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•

<div>์— line-height ์†์„ฑ์„ ์ ์šฉํ•œ ํ›„, vertical-align: middle; ์„ ์ ์šฉํ•˜๋ฉด ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ์ด ๋œ๋‹ค.

*์ฐธ๊ณ : https://aboooks.tistory.com/180

'Study > HTML & CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[CSS] ์ˆ˜ํ‰ ์ •๋ ฌ & ์ˆ˜์ง ์ •๋ ฌ  (0) 2022.07.14
[CSS] Display  (0) 2022.07.14
[SCSS] ์ƒ์œ„ ์…€๋ ‰ํ„ฐ ์ฐธ์กฐ  (0) 2022.07.13
[CSS] CSS ๊ตฌ์ฒด์„ฑ ๋‹จ์œ„ (์šฐ์„  ์ˆœ์œ„)  (0) 2022.07.13
[CSS] CSS ์ƒ์†  (0) 2022.07.13
  • Baseline
  • vertical-align
  • block ์š”์†Œ๋ฅผ ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•
'Study/HTML & CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [CSS] ์ˆ˜ํ‰ ์ •๋ ฌ & ์ˆ˜์ง ์ •๋ ฌ
  • [CSS] Display
  • [SCSS] ์ƒ์œ„ ์…€๋ ‰ํ„ฐ ์ฐธ์กฐ
  • [CSS] CSS ๊ตฌ์ฒด์„ฑ ๋‹จ์œ„ (์šฐ์„  ์ˆœ์œ„)
potatos
potatos

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.