티스토리 뷰

CSS

[CSS] Text Align

Dongi 2021. 12. 25. 15:56

안녕하세요 동기 여러분! 오늘은 텍스트 정렬에 대해 알아봅시다!

 

Text Align

p {
  text-align: center;
}

방법은 위와 같이 작성해주시면 됩니다.

 

 

정렬

정렬 방식 설명
left 왼쪽으로 정렬
right 오른쪽으로 정렬
center 가운데로 정렬
justify 줄을 늘려 각 줄의 폭을 맞춤 (신문 기사와 잡지에서 많이 씀)
inherit 부모 요소의 정렬을 따름

 

 

 

예

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <img src="https://tistory1.daumcdn.net/tistory/4908644/attach/b421ac0267a34c8a9b05ded4470e1348"/>
    <p>
      집에 먹을 것이 거의 떨어져 장을 보러 갔다. 집 근처 마트에 갔는데 크리스마스 이브라 그런지 사람들이 엄청 많아서 계산대의 줄이 너무 길었다.
      내가 사는 곳 근처의 마트는 셀프 계산대와 캐셔 계산대가 구분되어 있는데 이유는 모르겠으나 셀프 계산대의 줄에 사람이 대략 50명은 되어 보였다.
      '아 저 줄을 언제 기다려서 사고 가나 ㅠ ㅠ'하며 걱정을 했지만 캐셔가 있는 계산대에는 사람이 별로 없어서 기다리지 않고 나올 수 있었다.
      아싸라비야 콜롬비야...
    </p>
  </body>
</html>

위의 코드를 사용하여 여러 정렬을 해봅시다.

 

text-align: left; 왼쪽 정렬

p {
  text-align: left;
}

img {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  width: 300px;
  height: 300px;
}

 

 

text-align: right; 오른쪽 정렬

p {
  text-align: right;
}

img {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  width: 300px;
  height: 300px;
}

 

 

text-align: center; 가운데 정렬

p {
  text-align: center;
}

img {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  width: 300px;
  height: 300px;
}

 

 

text-align: justify; 줄을 늘려 각 폭을 맞춤

p {
  text-align: justify;
}

img {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  width: 300px;
  height: 300px;
}

 

 

오늘의 느낌

내일 저녁에는 두부 버섯전골을 먹어야겠다.

'CSS' 카테고리의 다른 글

[CSS] Background Image  (0) 2021.12.26
[CSS] Color and Background Color  (0) 2021.12.25
[CSS] Font Weight  (0) 2021.12.24
[CSS] Font Size  (0) 2021.12.24
[CSS] Font Family  (0) 2021.12.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함