[CSS] 문자와 색상 지정
Web/Web Programming

[CSS] 문자와 색상 지정

폰트의 지정

HTML의 출력스타일 지정 태그보다 CSS 속성을 이용

 

폰트 관련 CSS 속성

  • font-family = 글꼴 종류 ; 쉼표(,)로 여러 글꼴 등록 → 첫 글꼴부터 차례로 적용시키며 해당 글꼴이 없는 경우 다음 글꼴 사용

  • font-size = 글자의 크기 [pt / px / % / small / big  등]

  • font-wieght = 글꼴의 두께 [100~900 / lighter(100) / normal(400) / bold(700) / bolder(900)]

  • font-style = 글꼴의 스타일 [normal: 기본 / italic: 이탤릭체]

  • font-variant = 소대문자 변경 [small-caps(소문자를 작은 대문자로 변경) / normal]

 

<!doctype html>
<html>
<head>
  <title>WEB04.css.ex</title>
  <style type="text/css">
    h3{font-family:"맑은고딕""돋움"san-serif; color:red}
    h3:after{content:" (© sblim)"; font-size:10pt}
    p{font-family:"Times New Roman""돋움"serif; line-height:10pt}
    #x-small{font-size:x-small}
    #small{font-size:small}
    #medium{font-size:normal}
    #pt12{font-size:12pt}
    #large{font-size:large}
    #x-large{font-size:x-large}
    #bolder{font-weight:bolder}
    #bold{font-weight:bold}
    #normal{font-weight:normal}
    #ligther{font-weight:lighter}
    #italic{font-style:italic}
    #oblique{font-style:oblique}
    #v-normal{font-variant:normal}
    #small-caps{font-variant:small-caps}
  </style>
</head>
<body>
    <h3>CSS 폰트 속성</h3>
    <p>font-size:<span id="x-small">x-small</span>,<span id="small">small</span>,
      <span id="medium">medium</span>,<span id="pt12">12pt</span>,
      <span id="large">large</span>,<spand id="x-large">x-large</span></p>
    <p>font-weight:<span id="bolder">bolder</span>,<span id="bold">bold</span>,
      <spand id="normal">normal</span>,<spand id="lighter">lighter</span></p>
    <p>font-style:<span id="italic">italic</span>,<span id="oblique">oblique(경사체)</span></p>
    <p>font-varaint:<span id="v-normal">CSS normal, </span><span id="small-caps">
      CSS small-caps</span></p>
</body>
</html>

문자(text)의 조정

문자 관련 CSS 속성

  • text-align = 텍스트의 수평 방향 정렬 [left / right / center]

  • letter-spacing = 텍스트 내 글자 사이의 간격

  • word-spacing = 텍스트 내 단어 사이의 간격

  • vertical-align = 수직 방향 정렬

  • line-height = 텍스트의 줄 간격

  • text-indent = 단락의 첫 줄에 들여쓰기를 할 것인지, 얼마나 들여 쓸 것인지

  • text-decoration = 텍스트에 여러가지 효과를 설정하거나 제거 [overline / line-through / underline / none]

  • text-transform = 텍스트에 포함된 영문자에 대해 대소문자 설정 [uppercase / lowercase / capitalize]

  • text-shadow = 텍스트에 간단한 그림자 효과 설정

<html>
<head>
  <style type="text/css">
    h3 {font-family:"맑은고딕" san-serif; color:red; text-shadow:3px 3px 4px grey }
    h3:after { content: " (© sblim)"; font-size:10pt; text-shadow: 1px 1px 12px green }
    p { font-family:"Times New Roman" "돋움" serif; line-height: 10pt }
    #first { text-align:left; letter-spacing: 2pt; word-spacing: 8pt }
    #second { text-align:left; text-indent:2em; letter-spacing:-2pt; word-spacing:2pt}
    #third { text-align:right; }
    #fourth { text-align:center; }
    #under{text-decoration:underline}
    #over{text-decoration:overline}
    #thru{text-decoration:line-through}
    #cap{text-transform:capitalize}
    #upper{text-transform:uppercase}
    #lower{text-transform:lowercase}
  </style>
</head>
<body>
  <h3><strong>CSS</strong>문자관련 속성</h3>
  <p id="first">왼쪽정렬, 문자간격 3pt, 단어간격 8pt</p>
  <p id="second">왼쪽정렬, 들여쓰기 2글자, 문자간격 -2pt, 단어간격 2pt</p>
  <p id="third">오른쪽정렬, text-decoration: <span id="under">underline</span>,
    <span id="over"> overline</span>,<span id="thru"> line-through</span></p>
  <p id="fourth">가운데정렬, text-transform: <span id="cap">capitalize</span>,
    <span id="upper"> uppercase</span>, <span id="lower">Lowercase</span></p>
</body>
</html>

색상 및 배경 조정

색상 표현: RGB / RGBA 모델 사용

화면의 각 점(픽셀) = 3byte(RGB) 또는 4byte(RGBA)

1 byte씩 RGB 색상값 지정: 0~255 + RGBA의 경우 4번째는 투명색 표현등의 특수용도로 사용

 

  • 16진수 표현 #RRGGBB

  • 10진수 표현 함수 rgb(R,G,B)

  • 백분율 표현 함수 rgb(R%, B%, G%)

  • 키워드 표현 

https://riptutorial.com/ko/css/example/2099/%EC%83%89%EC%83%81-%ED%82%A4%EC%9B%8C%EB%93%9C

△색상 키워드

 

배경 관련 속성

각 요소의 배경색이나 이미지를 배경으로 지정

  • background-color = 배경 색 [color 속성의 포맷]

  • background-image:url = 배경 이미지 [url("이미지 경로")] → 컨테이너의 크기와 관계없이 삽입된 경우 이미지는 크기 변화없이 그대로 표시되고, 이미지보다 컨테이너가 클 경우 이미지를 반복 표시

  • background-repeat = 배경 이미지 반복 여부 [no-repeat / repeat-x(x축으로 반복) / repeat-y(y축으로 반복) / repeat]

  • background-attachment = 배경 이미지 고정 방식 [ scroll(기본값;요소에 상대적인 위치) / fixed(윈도우 창에 상대적=스크롤바 내려도 이미지 위치 고정) / local(스크롤 할 때 요소의 내용에 상대적 위치) ]

  • background-position = 배경 이미지 위치 [ x y 좌표 / left / top / center / bottom / right 등]

  • background-size = 배경 이미지의 크기 [px / % / cover(이미지 비율 그대로 확대해 요소 전체 덮음) / contain(비율 그대로 확대해 가로나 세로 중 꽉 차는 쪽에 사이즈 맞춤)]

  • background(shorthand) = 한 번에 설정 ※position과 size 설정 시 두 속성 사이에 /를 삽입해 구분해줘야 함

참고: https://ofcourse.kr/css-course/background-%EC%86%8D%EC%84%B1

https://aboooks.tistory.com/160

http://triki.net/prgm/988#dry_toc_10

△ 더 많은 속성 있음

<html>
<head>
  <style type="text/css">
    h3 {color:red; background-color:#90ff90 }
    h3:after { content: " (© sblim)"; font-size:10pt;background-color:yellow }
    #first{background-image:url(strawberry-cut.jpg);background-repeat:repeat-x;}
    #second{background-image:url(strawberry-cut.jpg);}
    #third{background-image:url(strawberry-cut.jpg);background-repeat:no-repeat; background-position:center bottom}
  </style>
</head>
<body>
  <h3><strong>CSS</strong>배경관련 속성</h3>
  <table border="1">
    <tr>
      <td id="first">배경 이미지<br> ● url(파일경로)<br><br>● background-repeat:
        <br>☞ repeat-x</td>
      <td id="second">배경 이미지<br>● url(파일경로)<br><br>● background-repeat:
        <br>☞ repeat</td>
      <td id="third">배경 이미지<br><br>● background-repeat: no-repeat,<br><br>
        ● background-position:<br>☞ center-bottom</td>
</body>
</html>

 

SMALL

'Web > Web Programming' 카테고리의 다른 글

[생활코딩/JavaScript] HTML과 JavaScript (기초)  (0) 2022.01.24
[CSS] 목록과 표 장식하기  (0) 2020.08.05
[CSS] CSS 속성 설정 / 스타일시트 선언 방법  (0) 2020.08.02
[CSS] WEB2.1 - WEB2.9  (0) 2020.07.29
WEB 02.1.1 유튜브 영상 공유  (0) 2020.07.22

    티스토리툴바