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. 드림보이
    2021.11.10. text-align 파트 수강완료
  2. 황금아가리
    211003
  3. 이현수
    2021.09.10(금)
  4. 두드
    2021.07.21 완료
  5. jeisyoon
    2021.06.21 text-align - OK
  6. barozaqu
    20180518.
  7. 완료
  8. text-align과 float이 헷갈린데 정리되었음 좋겠네용ㅋㅋ
  9. Minint
    2021.03.13
  10. HyeonHui Jeong
    20210218
  11. 임태경
    완료했어요 감사해요
  12. 스마일가이
    2021.01.26 완료 감사합니다
  13. datsciseol
    20210115
  14. 따뜻한츄르
    2020 12 30
  15. 티치
    2020.12.28
  16. 몽실엄마
    12/22/2020 학습완료
  17. 201214
  18. switpotato
    20201122: 2차학습 완료
  19. 켄드릭
    2020년 11월 03일(화) 1차 수강완료
  20. jaehyunlee
    완료
  21. 여니여니
    201006 완료
  22. 박병진
    2020.10.03 완료
  23. 콜라
    20200926완료
  24. 김성곤
    20200718 감사합니다!
  25. jaehyunlee
    완료
  26. 한강
    text-align: left;
    text-align: center;
    text-align: right;
    text-align: justify;

    오늘도 감사합니다.^^!
    200528
  27. 무지개반사
    완료
  28. Blanc
    2020.01.05
  29. Grigo
    완료
  30. alpha
    191001 수강완료
  31. 태태
    수강완료
  32. 제이제이
    완료
  33. 치디우기
    수강완료
  34. 싸커홍
    완료
  35. FIRE
    20190728 완료
  36. 다나가
    190722 - 수업 완료!!
  37. 김주엽
    수업완료
  38. 잘될자
    190503 금요일 수강.
  39. basstrio
    완료
  40. 노혜주
    완료
  41. lygon
    2019-02-23 완료
  42. 숨이
    완료햇습니당
  43. 김민영
    완료
  44. SlowStarter
    감사합니다!
  45. 스페이스몽키
    감사합니당
  46. JN87
    180103 감사합니다!
  47. 푸른하늘
    10일차 공부 감사합니다
  48. 이경일
    text-align : left, right,center,justify 로 문장정렬을 할 수 있다.
  49. 키썬
    감사합니당~~
  50. 오빠는다르다
    감사합니다~!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기