독학/css

CSS독학2(텍스트)

나아눙 2022. 8. 18. 23:00

text 꾸미기

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>텍스트 꾸미기</title>
  6. <style>
  7. p{font-family:verdana} //글씨체
  8. // p{font-size:verdana, sans-serif, Georgia} 우선순위도 둘수 있어요 
  9. p{font-size:20px} //글씨사이즈
  10. p{font-style:italic} //italic(이탤릭) normal ,oblique(기울임),inherit(부모 태그의 값) 글씨 형태
  11. .bold{font-weight:bold}  //글씨굵기
  12. .normal{font-weight:normal}
  13. .fivehundred{font-weight:500} //100~500 normal
  14. .ninehundred{font-weight:900} //600~900 bold
  15. p{letter-spacing:px} //텍스트 자간 지정하기
  16. // p{word-spacing:10px} 띄어쓰기의 길이조절
  17. p{width:300px; line-height:25px} //줄간격 지정하기
  18. p{text-decoration:overline} //텍스트에 줄긋기 underline :밑줄긋기 ,none:효과없음,
  19.                                                                                overline:텍스트 위에 선긋기,line-through:텍스트 가운데 선 긋기
  20.  
  21. </style>
  22. </head>
  23. <body>
  24. <p> hello world </p>
  25.  
  26. </body>
  27. </html>

텍스트 스타일에서 inherit

부모태그의 font-style속성의 값을 그대로 적용한다는 의미이다.

ex)

  1. <head>
  2. <style>
  3. div{font-style:oblique}
  4. p{font-style:inherit}
  5. </style>
  6. </head>
  7. <body>
  8. <div>
  9. hello world
  10. <p>hello world</p>
  11. </div>
  12. </body>

텍스트 굵기 font-weight

  1. <p style="font-weight:bolder">hello world - bolder</p>
  2. <p style="font-weight:lighter">hello world - lighter</p>

여러개 요소 넣는법

  1. <style>
  2. h2{color:#333;font-style:italic}
  3. p{color:blue;font-style:normal;text-decoration:underline;line-height:30px}
  4. </style>

텍스트의 색상 color

  1. <body>
  2. <h1>red</h1>
  3. <p style="color:red">hello world</p>
  4. <p style="color:rgb(255,0,0)">hello world</p>
  5. <p style="color:#ff0000">hello world</p>
  6.  
  7. <h1>green</h1>
  8. <p style="color:green">hello world</p>
  9. <p style="color:rgb(0,255,0)">hello world</p>
  10. <p style="color:#00ff00">hello world</p>
  11.  
  12. <h1>blue</h1>
  13. <p style="color:blue">hello world</p>
  14. <p style="color:rgb(0,0,255)">hello world</p>
  15. <p style="color:#0000ff">hello world</p>
  16. </body>

비교

  1. p{letter-spacing:px} //텍스트 자간 지정하기(글자와 글자의 간격을 지정)
  2. p{word-spacing:10px} 띄어쓰기의 길이조절(단어와 단어 사이의 간격을 지정)

텍스트 방향 조절하기 direction

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>direction</title>
<style>
    p:nth-child(1){direction:rtl;color:blue}
    p:nth-child(2){direction:ltr;color:pink}
</style>
</head>
<body>
    <p>오른쪽에서 왼쪽</p>
    <p>왼쪽에서 오른쪽</p>
</body>
</html>

들여쓰기 text-indent

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-indent</title>
<style>
    div{width:200px;background:pink}
    p:nth-child(1){text-indent:10px}
    p:nth-child(2){text-indent:20px}
    p:nth-child(3){text-indent:30px}
</style>
</head>
<body>
    <div>
        <p>들여쓰기10px</p>
        <p>들여쓰기20px</p>
        <p>들여쓰기30px</p>
    </div>
</body>
</html>

태그마다 들여쓰기의 크기가 다름을 알수 있다.

 

텍스트에 줄긋기 +색넣기 text-decoration

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트에 줄 긋기</title>
</head>
<body>
   <p style="text-decoration:underline overline blue">밑줄 윗줄 긋기</p>
   <br>
   <p style="text-decoration:underline dashed red">밑줄 긋기 dashed</p>
   <br>
   <p style="text-decoration:overline dotted pink">윗줄 긋기 dotted</p>
   <br>
   <p style="text-decoration:line-through double yellow">가운데 줄 긋기 double</p>
   <br>
   <p style="text-decoration:underline overline dashed green">밑줄 윗줄 긋기 dashed</p>
   <br>
   <p style="text-decoration:none">줄 안 긋기</p>
</body>
</html>

텍스트 그림자 적용 text-shadow:가로 세로 흐림의 크기 그림자색

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트에 그림자 적용</title>
</head>
<body>
    <p style="text-shadow:10px 10px blue">shadow</p>
    <br>                             가로 세로 그림자색
    <p style="text-shadow:2px 3px pink">shadow</p>
    <br>                            
    <p style="color:blue;font-size:50px;text-shadow:3px 3px 10px blue">shadow</p>    
</body>                                                                         가로 세로 흐림의 크기 그림자색
</html>

텍스트 대소문자 변환

  • uppercase 대문자로 변환
  • lowercase 소문자로 변환
  • capitalize 영단어의 띄어쓰기로 처음 시작하는 문자를 대문자로 변경

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-transform :: pinkcoding</title>
<style>
    .uppercase{text-transform:uppercase}
    .lowercase{text-transform:lowercase}
    .capitalize{text-transform:capitalize}
</style>
</head>
<body>
    <p class=uppercase>uppercase</p>
    <br>
    <p class=lowercase>LOWERCASE</p>
    <br>
    <p class=capitalize>capitalize and caplitalize</p>
</body>
</html>

영문 대문자를 작게 표시

  • font-variant:normal
  • font-variant:small-caps

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font-variant :: pinkcoding</title>
<style>
    p:nth-child(1), p:nth-child(3){font-variant:small-caps}
    p:nth-child(2){font-variant:normal} //미적용
</style>
</head>
<body>
 <p>small-caps</p>
    <p>normal</p>
    <p>small-caps</p>
</body>
</html>

font-variant

가로세로 길이 설정 width height

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>가로 세; 적용</title>
</head>
<body>
    <p style="background:skyblue">가로세로적용X</p>
    <br>
    <p style="background:skyblue;width:100px; height:100px">가로세로적용O</p>
</body>
</html>

width와 height

영역을 벗어날때 처리 overflow

  • overflow:visible 영역을 넘어서도 그대로 표시
  • overflow:hidden 영역을 넘어선 부분 숨기기
  • overflow:scroll 영역을 넘어선 부분이 있으면 스크롤바 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>세로 길이 적용</title>
</head>
<body>
    <p style="background:skyblue;width:100px;height:100px;overflow:visible">
        visible visible visible visible visible visible visible visible visible visible
    </p>
    <br>
    <p style="background:skyblue;width:100px;height:100px;overflow:hidden">
        hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden
    </p>
    <br>
    <p style="background:skyblue;width:100px;height:100px;overflow:scroll">
        scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll
    </p>
</body>
</html>

overflow

공백 처리 white-space

html에서는 공백을 여러개 넣어도 공백은 하나로 처리됨

white-space:pre 공백을 그대로 표시, 박스의 영역을 벗어남

white-space:pre-wrap 공백을 그대로 표시,박스의 영역을 벗어나지 않고 줄바꿈

white-space:pre-line 연속된 공백을 하나로 처리, 박스의 영역을 벗어나지 않고 줄바꿈

white-space:nowrap 연속된 공백을 하나로 처리, 박스의 영역을 벗어남

white-space:normal 연속된 공백을 하나로 처리, 박스의 영역을 벗어나지 않고 줄바꿈

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>white-space :: pinkcoding</title>
<style>
    div{width:180px;height:100px;background:skyblue;margin-bottom:10px}
    .box2 p{white-space:pre-wrap}
    .box3 p{white-space:pre-line}
    .box4 p{white-space:pre}
    .box5 p{white-space:nowrap}
    .box6 5{white-space:normal}
</style>
</head>
<body>
    <div>
        <p>(미적용)연속된공백을                         처리하기</p>
    </div>

    <div class='box2'>
        <p>(pre-wrap 적용)연속된공백을                  처리하기</p>
    </div>

    <div class='box3'>
        <p>(pre-line 적용)연속된공백을                  처리하기</p>
    </div>

    <div class='box4'>
        <p>(pre 적용)연속된공백을                       처리하기</p>
    </div>

    <div class='box5'>
        <p>(nowrap 적용)연속된공백을                    처리하기</p>
    </div>

    <div class='box6'>
        <p>(normal 적용)연속된공백을                    처리하기</p>
    </div>
</body>
</html>