๐Ÿ’…CSS/โšกver.0

๐Ÿ’…Decorate from CSS : Text - align

4:Bee 2024. 2. 18. 16:54
728x90

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” text์˜ ๋ฐฐ์น˜๋ฅผ ์กฐ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„ ๋ณผ ๊ฒƒ์ด๋‹ค. css์˜ ๋ฌธ๋ฒ•์„ ๋‹ค๋ฃจ๋‹ค ๋ณด๋‹ˆ ๊ทธ๋ฆฌ ๋ณต์žกํ•œ ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์žˆ์ง€ ์•Š์œผ๋‹ˆ ์‹ค์Šต ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด์„œ ๋น ๋ฅด๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

html๊ณผ css์˜ ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="./style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="text1">
    text1
  </p>
  <p id="text2">
    text1
  </p>
  <p id="text3">
    text1
  </p>
</body>

</html>
#text1 {
  text-align: right;
  border: 1px solid gray;
}

#text2 {
  text-align: center;
  border: 1px solid gray;
}

#text3 {
  text-align: left;
  border: 1px solid gray;
}

๊ธ€์ž๋“ค์˜ ์œ„์น˜๋“ค์„ ์ง€์ •ํ•˜๋Š” text-align๋“ค์˜ ์„ธ๊ฐ€์ง€ ๋ฌธ๋ฒ•๋“ค์ด๋‹ค. right,left,center์™ธ์—๋„ start์™€ end ๋“ค์ด ์žˆ๋‹ค. ๋งˆ์šฐ์Šค๋ฅผ text-align์— ์˜ฌ๋ ค ๋‘๋ฉด ๊ด€๋ จ ๋ฌธ๋ฒ•๋“ค์ด ๋‚˜์˜ค๋‹ˆ ์ฐธ๊ณ  ํ•ด๋ณด๊ธฐ ๋ฐ”๋ž€๋‹ค.

728x90