7. text에 관련된 속성들 -바닥부터 시작하는 CSS-

2017. 1. 5. 10:15 from COMPUTER/CSS

7. text에 관련된 속성들      -바닥부터 시작하는 CSS-

 


1. color 속성

다음의 방식으로 text의 색을 지정한다.

color name - "red", "cyan", "black" 등 색상 이름으로 지정.

a HEX value - "#ff0000" 16진수로 지정.

an RGB value - "rgb(255,0,0)" RGB색상으로 지정.

 

예 7-1

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       body {
  5.         color: blue;
  6.       }
  8.       h1 {
  9.         color: #00ff00;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  15.     <h1>글자색 지정하기</h1>
  16.     <p>body 태그에 색을 지정하면 그 색이 페이지의 기본 값이 됩니다.</p>
  18.   </body>
  19. </html>


 

2. text-align 속성

글자의 수평 정렬을 할 때 사용.

left : 왼쪽 정렬 (기본 값)

right : 오른쪽 정렬 (text-direction 속성 값이 right-to-left일 경우는 이것이 기본 값.)

center: 글자 중앙 정렬.

justify: 모든 문단의 가로 길이를 똑같이 유지 시킨다.


예 7-2

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       h1 {
  5.         text-align: center;
  6.       }
  8.       h2 {
  9.         text-align: left;
  10.       }
  12.       h3 {
  13.         text-align: right;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  19.     <h1>문장을 중앙에 정렬</h1>
  20.     <h2>문장을 왼쪽에 정렬</h2>
  21.     <h3>문장을 오른쪽에 정렬</h3>
  23.     <p>문장의 좌우 정렬 및 중앙 정렬을 알아봅니다.</p>
  25.   </body>
  26. </html>

 

예 7-3

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div {
  5.         border: 1px solid black;
  6.         padding: 10px;
  7.         width: 200px;
  8.         height: 200px;
  9.         text-align: justify;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  15.     <h1>text-align: justify;의 예제입니다.</h1>
  17.     <p>The text-align: justify; 값은 각 줄의 좌우를 같은 폭으로 맞춥니다.</p>
  19.     <div>
  20.       붉게물든 노을 바라보면 슬픈 그대얼굴 생각이 나 고개숙이네 눈물흘러 아무말 할수가 없지만 난너를 사랑하네 이세상은 너뿐이야 소리쳐 부르지만 저
  21.       대답없는 노을만 붉게 타는데 그 세월속에 잊어야할 기억들이 다시 생각나면 눈감아요 소리없이 그이름 불러요 아름다웠던 그대모습 다시 볼수없는것
  22.       알아요 후회없어 저타는 노을 붉은 노을처럼 난너를 사랑하네 이세상은 너뿐이야 소리쳐 부르지만 저 대답없는 노을만 붉게 타는데
  23.     </div>
  25.   </body>
  26. </html>

 

 

3. text-decoration 속성

글자를 꾸밀 때 사용하는 속성.

text-decoration: none; 은 link가 걸린 문장에 underline을 없애기 위해 자주 사용된다.

none(기본 값), overline, underline, line-through 등의 값을 지정할 수 있다.


예 7-3

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       a {
  5.         text-decoration: none;
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  11.     <p>A link에 underline을 없앤다.
  12.       <a href="http://study-zone.tistory.com/">나라공부방</a>
  13.     </p>
  15.   </body>
  16. </html>
  18. 각 속성 값의 사용 예 예 7-4
  19. <html>
  20.   <head>
  21.     <style>
  22.       h1 {
  23.         text-decoration: overline;
  24.       }
  26.       h2 {
  27.         text-decoration: line-through;
  28.       }
  30.       h3 {
  31.         text-decoration: underline;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  37.     <h1>overline 사용</h1>
  38.     <h2>line-through 사용</h2>
  39.     <h3>underline 사용</h3>
  41.   </body>
  42. </html>

 


4. text-transform 속성

글자를 대문자 또는 소문자로 바꾼다.

uppercase, lowercase, capitalize 등의 값을 적용할 수 있다.

예 7-5

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       p.uppercase {
  5.         text-transform: uppercase;
  6.       }
  8.       p.lowercase {
  9.         text-transform: lowercase;
  10.       }
  12.       p.capitalize {
  13.         text-transform: capitalize;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  19.     <p class="uppercase">study english hard(uppercase)</p>
  20.     <p class="lowercase">STUDY ENGLISH HARD(lowercase)</p>
  21.     <p class="capitalize">study english hard(capitalize)</p>
  23.   </body>
  24. </html>

 


5. text-indent 속성

문단의 시작을 들여쓰기 할 때 사용.


예 7-6

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       p {
  5.         text-indent: 50px;
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  11.     <p>눈물이 난다 이 길을 걸으면 그 고운 손길이 자꾸 생각이 난다 붙잡지 못하고 가슴만 떨었지 내 아름답던 사람아 사랑이란게 참 쓰린 거더라
  12.       잡으려 할수록 더 멀어 지더라 이별이란게 참 쉬운 거더라 내 잊지 못할 사람아
  13.     </p>
  15.   </body>
  16. </html>

 


6. letter-spacing 속성

글자 간의 여백의 크기를 조절한다.

normal : (기본 값)

length : 수치를 직접 사용해서 공백 지정. 마이너스(-)값도 허용됨.


예 7-7

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       p.space1 {
  5.         letter-spacing: 3px;
  6.       }
  7.       p.space2 {
  8.         letter-spacing: -3px;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  14.     <p class="space1">나 기억해 줘 내 고백은 널 위한 꿈</p>
  15.     <p class="space2">나 기억해 줘 내 고백은 널 위한 꿈</p>
  17.   </body>
  18. </html>

 


7. line-height 속성

줄 간의 여백 크기를 조절한다.

normal, number(현재 font크기의 배수로 지정), length(px, pt 등을 사용), %(현재 font크기를 기준)

예 7-8

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       p.small {
  5.         line-height: 0.7;
  6.       }
  8.       p.big {
  9.         line-height: 1.8;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  15.     <p>
  16.       라일락 꽃 향기 맡으면 잊을 수 없는 기억에
  17.       <br>
  18.         햇살 가득 눈 부신 슬픔 안고 버스 창가에 기대 우네</br>
  19.     </p>
  21.     <p class="small">
  22.       가로수 그늘 아래 서면 떠가는 듯 그대 모습
  23.       <br/>
  24.       어느 찬비 흩날린 가을 오면 아침 찬 바람에 지우지
  25.       <br/>
  26.     </p>
  28.     <p class="big">
  29.       이렇게도 아름다운 세상 잊지 않으리
  30.       <br/>
  31.       내가 사랑한 얘기 우 우우우 우<br/>
  32.     </p>
  34.   </body>
  35. </html>

 


8.direction 속성

글자의 진행 방향을 지정한다.

ltr : left-to-right 왼쪽에서 오른 쪽으로 진행.(기본 값)

rtl : right-to-left 오른쪽에서 왼쪽으로 진행.

 

예 7-9

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div.ex1 {
  5.         direction: rtl;
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  11.     <div>이 문장은 기본 값에 의한 진행입니다.</div>
  12.     <div class="ex1">이 문장은 right-to-left 에 의한 진행입니다.</div>
  14.   </body>
  15. </html>

위에서 보면 right-to-left의 진행이 약간 이상하게 나오는데 좀 더 완벽한 구성을 위해서 사용하는 속성으로

unicode-bidi라는 속성이 있다.

속성 값으로는 normal(기본 값), bidi-override가 있다.

이 속성을 사용해서 재구성을 해보면 아래와 같다.

 

예 7-10

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div.ex1 {
  5.         direction: rtl;
  6.         unicode-bidi: bidi-override;
  7.       }
  8.     </style>
  9.   </head>
  10.   <body>
  12.     <div>이 문장은 기본 값에 의한 진행입니다.</div>
  13.     <div class="ex1">이 문장은 right-to-left 에 의한 진행입니다.</div>
  15.   </body>
  16. </html>

글자의 진행이 완전히 바뀐 것을 알 수있다. 잘 쓰이지는 않는다.

 


9.word-spacing 속성

단어 간의 공백의 크기를 지정한다.(기본 값은 0.25em 이다.)

normal : (기본 값이 된다.)

length : 수치를 직접 사용해서 공백 지정. 마이너스(-)값도 허용됨.


예 7-11

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       p.space1 {
  5.         word-spacing: 5px;
  6.       }
  7.       p.space2 {
  8.         word-spacing: -5px;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  14.     <p class="space1">나 기억해 줘 내 고백은 널 위한 꿈</p>
  15.     <p class="space2">나 기억해 줘 내 고백은 널 위한 꿈</p>
  17.   </body>
  18. </html>

 


10. text-shadow 속성

글자에 그림자 효과를 준다.

h-shadow(수평) v-shadow(수직) blur-radius(흐림도: 선택적, 기본값은 0) color(선택적);

none ; (기본 값)


예 7-12

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       h1 {
  5.         text-shadow: 3px 2px red;
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  11.     <h1>글자에 그림자 효과를 줍니다.</h1>
  12.     <p>
  13.       <b>알림:</b>IE9 이전 버전은 지원하기 않음.</p>
  15.   </body>
  16. </html>

 


11. white-space 속성

normal : 연속 공백은 안되고 줄 바꿈은 된다.(기본 값)

pre : 연속 공백과 줄 바꿈이 된다.(원문대로 출력)

nowrap : 연속 공백과 줄 바꿈이 모두 안 된다.

inherit : 부모 요소로 부터 상속됨.


예 7-13

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div {
  5.         width: 300px;
  6.         border: 1px solid;
  7.         background: cyan;
  8.       }
  9.       .p1 {
  10.         white-space: normal;
  11.       }
  12.       .p2 {
  13.         white-space: nowrap;
  14.       }
  15.       .p3 {
  16.         white-space: pre;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div>
  22.       <p class="p1">연속 공백 X. 줄 바꿈 O. 
  23. 가로수      그늘 아래 서면
  24. 떠가는      듯 그대 모습
  25. 어느        찬 비 흩날린 가을 오면
  26. 아침       찬 바람에 지우지
  27.       </p>
  28.     </div>
  30.     <div>
  31.       <p class="p2">연속 공백 X. 줄 바꿈 X.
  32. 가로수      그늘 아래 서면
  33. 떠가는      듯 그대 모습
  34. 어느        찬 비 흩날린 가을 오면
  35. 아침       찬 바람에 지우지
  36.       </p>
  37.     </div>
  39.     <div>
  40.       <p class="p3">연속 공백 O. 줄 바꿈 O.
  41. 가로수      그늘 아래 서면
  42. 떠가는      듯 그대 모습
  43. 어느        찬 비 흩날린 가을 오면
  44. 아침       찬 바람에 지우지
  45.       </p>
  46.     </div>
  47.   </body>
  48. </html>


 

12. vertical-align 속성

텍스트를 수직 정렬 할 때 사용.

block 요소가 아닌 inline 이나 inline-block 에서만 가능.

왜냐하면 행 방향으로 나열된 요소들의 수직 정렬 옵션이기 때문.

그래서 줄 바꿈이 있는 <div> 에서는 안 된다.

 

속성 값

baseline : 기본 값으로 부모 요소의 baseline 에 맞춥니다.

sub : 아래첨자에 기준을 맞춤.

super : 위첨자 기준으로 맞춤.

text-top : 요소 상단을 부모 font 의 상단에 맞춤.

text-botom : 요소 하단을 부모 font 의 하단에 맞춤.

middle : 부모 요소의 중앙.

top : 부모 요소의 상단.

bottom : 부모 요소의 하단.

length(길이 값) : 0px는 baseline 과 같은 값임. 0px를 기준으로 길이 값을 주어 상하 위치를 조절할 수 있다. 마이너스(-)는 baseline 아래로 내려간다.

% : 0%는 baseline 과 같은 값임. 길이 값과 마찬가지로 0 을 기준으로 상하 위치를 조절할 수 있다.

 

부모요소text와 자식요소 text의 정렬

예 7-14

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       p {
  5.         font-size: 20pt;
  6.       }
  7.       span {
  8.         color: red;
  9.         font-size: 12pt;
  10.       }
  11.       #ver1 {
  12.         vertical-align: baseline;
  13.       }
  14.       #ver2 {
  15.         vertical-align: sub;
  16.       }
  17.       #ver3 {
  18.         vertical-align: super;
  19.       }
  20.       #ver4 {
  21.         vertical-align: text-top;
  22.       }
  23.       #ver5 {
  24.         vertical-align: text-bottom;
  25.       }
  26.       #ver6 {
  27.         vertical-align: top;
  28.       }
  29.       #ver7 {
  30.         vertical-align: middle;
  31.       }
  32.       #ver8 {
  33.         vertical-align: bottom;
  34.       }
  35.       #ver9 {
  36.         vertical-align: 50%;
  37.       }
  38.       #ver10 {
  39.         vertical-align: 10pt;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <p>부모요소의 문장입니다 :
  45.       <span id="ver1">자식요소의 글: baseline</span>
  46.     </p>
  47.     <p>부모요소의 문장입니다 :
  48.       <span id="ver2">자식요소의 글: sub</span>
  49.     </p>
  50.     <p>부모요소의 문장입니다 :
  51.       <span id="ver3">자식요소의 글: super</span>
  52.     </p>
  53.     <p>부모요소의 문장입니다 :
  54.       <span id="ver4">자식요소의 글: text-top</span>
  55.     </p>
  56.     <p>부모요소의 문장입니다 :
  57.       <span id="ver5">자식요소의 글: text-bottom</span>
  58.     </p>
  59.     <p>부모요소의 문장입니다 :
  60.       <span id="ver6">자식요소의 글: top</span>
  61.     </p>
  62.     <p>부모요소의 문장입니다 :
  63.       <span id="ver7">자식요소의 글: middle</span>
  64.     </p>
  65.     <p>부모요소의 문장입니다 :
  66.       <span id="ver8">자식요소의 글: bottom</span>
  67.     </p>
  68.     <p>부모요소의 문장입니다 :
  69.       <span id="ver9">자식요소의 글: 30%</span>
  70.     </p>
  71.     <p>부모요소의 문장입니다 :
  72.       <span id="ver10">자식요소의 글: 20pt</span>
  73.     </p>
  74.   </body>
  75. </html>

 

부모요소: text와 자식요소 image의 정렬

예 7-15

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  5.       img {
  6.         width: 30pt;
  7.         border-color: black;
  8.         border-width: 1px;
  9.         border-style: solid;
  10.       }
  11.       #ver1 {
  12.         vertical-align: baseline;
  13.       }
  14.       #ver2 {
  15.         vertical-align: sub;
  16.       }
  17.       #ver3 {
  18.         vertical-align: super;
  19.       }
  20.       #ver4 {
  21.         vertical-align: text-top;
  22.       }
  23.       #ver5 {
  24.         vertical-align: text-bottom;
  25.       }
  26.       #ver6 {
  27.         vertical-align: top;
  28.       }
  29.       #ver7 {
  30.         vertical-align: middle;
  31.       }
  32.       #ver8 {
  33.         vertical-align: bottom;
  34.       }
  35.       #ver9 {
  36.         vertical-align: 50%;
  37.       }
  38.       #ver10 {
  39.         vertical-align: 10pt;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <p>부모요소의 문장 :
  45.       <img
  46.         id="ver1"
  47.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  48.       baseline</p>
  49.     <p>부모요소의 문장 :
  50.       <img
  51.         id="ver2"
  52.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  53.       sub</p>
  54.     <p>부모요소의 문장 :
  55.       <img
  56.         id="ver3"
  57.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  58.       super</p>
  59.     <p>부모요소의 문장 :
  60.       <img
  61.         id="ver4"
  62.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  63.       text-top</p>
  64.     <p>부모요소의 문장 :
  65.       <img
  66.         id="ver5"
  67.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  68.       text-bottom</p>
  69.     <p>부모요소의 문장 :
  70.       <img
  71.         id="ver6"
  72.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  73.       top</p>
  74.     <p>부모요소의 문장:
  75.       <img
  76.         id="ver7"
  77.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  78.       middle</p>
  79.     <p>부모요소의 문장 :
  80.       <img
  81.         id="ver8"
  82.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  83.       bottom</p>
  84.     <p>부모요소의 문장 :
  85.       <img
  86.         id="ver9"
  87.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  88.       50%</p>
  89.     <p>부모요소의 문장 :
  90.       <img
  91.         id="ver10"
  92.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  93.       10pt</p>
  94.   </body>
  95. </html>

 

image와 text를 함께 사용할 경우.

예 7-16

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       img {
  5.         width: 50pt;
  6.         border-color: black;
  7.         border-width: 1px;
  8.         border-style: solid;
  9.       }
  10.       img.top {
  11.         vertical-align: text-top;
  12.       }
  14.       img.bottom {
  15.         vertical-align: text-bottom;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  21.     <p>An
  22.       <img
  23.         alt="black cat"
  24.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg"/>
  25.       image with a default alignment.</p>
  27.     <p>An
  28.       <img
  29.         alt="black cat"
  30.         class="top"
  31.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg"/>
  32.       image with a text-top alignment.</p>
  34.     <p>An
  35.       <img
  36.         alt="black cat"
  37.         class="bottom"
  38.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg"/>
  39.       image with a text-bottom alignment.</p>
  41.   </body>
  42. </html>

 


13. text-overflow 속성

문자열의 overflow를 처리하는 속성.

clip: overflow부분을 잘라낸다.

ellipsis: overflow부분을 생략기호(...)로 표기한다.

 

예 7-17

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       #div1 {
  5.         white-space: nowrap;
  6.         width: 18em;
  7.         overflow: hidden;
  8.         text-overflow: clip;
  9.         border: 1px solid #000000;
  10.       }
  12.       #div2 {
  13.         white-space: nowrap;
  14.         width: 18em;
  15.         overflow: hidden;
  16.         text-overflow: ellipsis;
  17.         border: 1px solid #000000;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  23.     <p>"text-overflow:clip" 을 사용한 div 영역</p>
  24.     <div id="div1">시간이 남아서 할 일이 없어서 나 지금 이러는게 아닌데 너란 남자는 나빠</div>
  26.     <p>"text-overflow:ellipsis":을 사용한 div 영역</p>
  27.     <div id="div2">시간이 남아서 할 일이 없어서 나 지금 이러는게 아닌데 너란 남자는 나빠</div>
  29.   </body>
  30. </html>

 

 

저작자표시 비영리 변경금지

'COMPUTER > CSS' 카테고리의 다른 글

9. 중앙 정렬 -바닥부터 시작하는 CSS-  (0) 2017.01.07
8. font 관련 속성들 -바닥부터 시작하는 CSS-  (0) 2017.01.07
6. margin, padding, border 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.30
5. position 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.24
4. float 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.08
Posted by star story :

티스토리툴바

Snippet :: Code View :: "+location.href+' 
'+b+"

티스토리툴바

");top.consoleRef.document.close()}$(".snippet-container").each(function(b){$(this).find("a.snippet-text").click(function(){var d=$(this).parents(".snippet-wrap").find(".snippet-formatted");var c=$(this).parents(".snippet-wrap").find(".snippet-textonly");d.toggle();c.toggle();if(c.is(":visible")){$(this).html("html")}else{$(this).html("text")}return false});$(this).find("a.snippet-window").click(function(){var c=$(this).parents(".snippet-wrap").find(".snippet-textonly").html();a(c);$(this).blur();return false})});$(".snippet-toggle").each(function(b){$(this).click(function(){$(this).parents(".snippet-container").find(".snippet-wrap").toggle()})})});