CSS

text-align

여기서는 텍스트를 정렬하는 속성인 text-align을 다룹니다.

text-align의 값으로 올 수 있는 값은 아래와 같습니다.  

  • left
  • right
  • center
  • justify

예제 text-align.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        text-align: justify;
        border:1px solid gray;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan iaculis tristique. Pellentesque eu erat mattis est semper condimentum. Nunc sed facilisis turpis. Mauris vulputate, purus in suscipit accumsan, dolor lorem elementum mi, non congue metus urna vitae tortor. Duis dictum ipsum non neque elementum iaculis. Sed sodales purus nisl, gravida pellentesque metus vehicula vitae. Suspendisse sed justo ut lorem molestie consectetur. Nullam efficitur quis velit ut scelerisque. Integer at velit pharetra neque efficitur varius.

Vestibulum interdum tellus sed tellus pretium vulputate. Vestibulum a mattis ante. Ut at metus eget eros dictum tristique. Proin sodales nulla eget enim pulvinar imperdiet. Aliquam et congue quam. Duis blandit dui faucibus lorem auctor, ut laoreet dolor aliquet. Vestibulum nec placerat ligula, vitae vehicula neque. Nulla dictum dui et vehicula mattis. Aenean non erat non diam sollicitudin posuere.

Donec placerat felis in elementum ullamcorper. Duis tellus nunc, eleifend non molestie eget, ornare ut risus. Morbi sit amet nunc ante. Donec vestibulum tortor nec massa vestibulum suscipit. Quisque faucibus pulvinar erat, vitae gravida tortor commodo vitae. Suspendisse malesuada urna eu imperdiet tincidunt. Curabitur non scelerisque nulla. Nullam pellentesque ante ex, eget varius odio lacinia nec. Cras sed ligula vitae odio dictum semper ut sed eros. Vivamus sollicitudin elementum felis a accumsan. In vitae mi at sem molestie bibendum nec quis libero. Fusce sed tortor ultrices, maximus risus nec, tincidunt orci.

In hac habitasse platea dictumst. Maecenas congue arcu nulla, vel pharetra mauris condimentum vel. Quisque sit amet sapien arcu. Vestibulum eu consectetur ante, vel iaculis justo. Proin in ipsum vel eros auctor rhoncus sed vel lacus. Vestibulum suscipit dolor eget nunc accumsan semper. In ac porta libero. Pellentesque risus ipsum, egestas sit amet rhoncus eu, finibus sit amet felis. Nunc gravida nulla non elit porttitor, sed maximus arcu semper. Ut nulla ante, ornare nec quam sed, venenatis viverra odio. Ut vitae odio nisi. Nam vitae ullamcorper nulla. Sed eu fermentum velit. Pellentesque id dolor metus. Nullam pharetra pharetra enim, pretium convallis metus ultrices eget. Sed cursus vestibulum orci in cursus.

Integer commodo varius ornare. Vivamus lacus urna, scelerisque nec lectus porta, interdum commodo dolor. Curabitur sagittis diam quis tellus semper commodo. Ut non orci consectetur, cursus urna et, tincidunt est. Donec mollis vulputate tempus. Aliquam sapien leo, venenatis at ligula vitae, vestibulum finibus ipsum. Donec pulvinar pretium mattis. Mauris risus augue, eleifend et suscipit ac, convallis vel nisl. Fusce tincidunt fringilla vulputate. Ut porttitor lorem vitae sodales finibus.
    </p>
  </body>
</html>

댓글

댓글 본문
  1. 곤비
    0216
  2. 미래도비
    0204
  3. 새콤달콤
    완료
  4. 덕자
    텍스트 양쪽 균등하게 맞추기 - text-align : justify
  5. 다겸란
    수강완료
  6. DreamBoy
    2023.09.17. CSS - 타이포그래피 - text-align 파트 완료했습니다.
  7. AgainstartJH
    2022년 11월 08일 화요일 학습완료!
  8. 헤밍웨이
    220823 감사합니다!
  9. vigorously27
    2022년 7월 19일 월요일 학습완료!
  10. 이슬유치원
    22.7.4 수강완료
    text-align의 값으로 올 수 있는 값은 아래와 같습니다.

    left 왼쪽
    right 오른쪽
    center 중앙
    justify 구석구석
  11. INJE
    22/03/16
  12. jjy_lee2468
    22.02.07수강완료
  13. 강수빈
    22.2.4 완료
  14. 드림보이
    2021.11.10. text-align 파트 수강완료
  15. 황금아가리
    211003
  16. 이현수
    2021.09.10(금)
  17. 두드
    2021.07.21 완료
  18. jeisyoon
    2021.06.21 text-align - OK
  19. barozaqu
    20180518.
  20. choi
    완료
  21. yogg
    text-align과 float이 헷갈린데 정리되었음 좋겠네용ㅋㅋ
  22. Minint
    2021.03.13
  23. HyeonHui Jeong
    20210218
  24. 임태경
    완료했어요 감사해요
  25. 스마일가이
    2021.01.26 완료 감사합니다
  26. datsciseol
    20210115
  27. 따뜻한츄르
    2020 12 30
  28. 티치
    2020.12.28
  29. 몽실엄마
    12/22/2020 학습완료
  30. 201214
  31. switpotato
    20201122: 2차학습 완료
  32. 켄드릭
    2020년 11월 03일(화) 1차 수강완료
  33. jaehyunlee
    완료
  34. 여니여니
    201006 완료
  35. 박병진
    2020.10.03 완료
  36. 콜라
    20200926완료
  37. 김성곤
    20200718 감사합니다!
  38. jaehyunlee
    완료
  39. 한강
    text-align: left;
    text-align: center;
    text-align: right;
    text-align: justify;

    오늘도 감사합니다.^^!
    200528
  40. 무지개반사
    완료
  41. Blanc
    2020.01.05
  42. Grigo
    완료
  43. alpha
    191001 수강완료
  44. 태태
    수강완료
  45. 제이제이
    완료
  46. 치디우기
    수강완료
  47. 싸커홍
    완료
  48. FIRE
    20190728 완료
  49. 다나가
    190722 - 수업 완료!!
  50. 김주엽
    수업완료
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기