HTML/CSS 9.CSS Background / Font-Text

정선용·2022년 3월 17일

IT IT > TECH IT > TECH > FE IT > TECH > FE > html/css

배경 이미지의 반복을 지정
수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다.
설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. 이것은 background-repeat 프로퍼티의 기본값이 repeat이기 때문
x축으로만 배경 이미지를 반복할 경우, background-repeat 프로퍼티값에 repeat-x, y축으로만 배경 이미지를 반복할 경우, repeat-y를 설정
반복 출력을 멈추고 싶은 경우, background-repeat 프로퍼티값에 no-repeat를 설정
background-image에 복수개의 이미지를 설정할 경우, 먼저 설정된 이미지가 전면에 출력

<head>
  <style>
    .test0 {
      background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/paper.gif");
      background-repeat: no-repeat, repeat;
    }
    .test1 {
      background-image: url("http://poiemaweb.com/img/bg/dot.png"); 
      background-repeat: repeat;
    }
    .test2 {
      background-image: url("http://poiemaweb.com/img/bg/paper.gif"); 
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="test0">
  background test
  </div>
  <div class="test1">
  background test
  </div>
  <div class="test2">
  background test
  </div>
</body>

background test

background-size 프로퍼티

배경 이미지의 사이즈를 지정
프로퍼티값은 px, %, cover, contain 등을 사용.
배경이미지의 첫번째 값은 width, 두번째 값은 height를 의미. 하나의 값만을 지정한 경우, 지정한 값은 width를 의미하게 되며 height는 auto로 지정 , 둘은 공백으로 구분하여 지정한다.

px값 지정:배경이미지 크기가 지정된 px값 그대로 설정
%값 지정 : 배경이미지 크기가 지정된 %값에 비례하여 설정
cover 지정 : 배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰값에 배경이미지를 맞춤.
contain 지정: 배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 이미지 스케일을 조정

background-attachment 프로퍼티

일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤된다. 화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 background-attachment 프로퍼티에 fixed 키워드를 지정.

background-position 프로퍼티

일반적으로 background-image는 좌상단부터 이미지를 출력한다. 이때 background-position 프로퍼티를 사용하면 이미지의 좌표(xpos, ypos) 지정 가능.
기본값은 background-position: 0% 0%;로 배경이미지는 우측 상단에 위치

background-color 프로퍼티

background-color 프로퍼티는 요소의 배경 색상을 지정

background Shorthand

background-color, background-image, background-repeat, background-position를 한번에 정의하기 위한 Shorthand Syntax

// order
background: color || image || repeat || attachment || position

<head>
  <style>
    .test1 {
      /* background: color || image || repeat || attachment || position */
      background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center;
      width: 50vw;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="test1"></div>
</body>

9.2 Font-Text

font-size 프로퍼티

텍스트의 크기를 정의

font-family 프로퍼티

폰트를 지정
폰트명은 따옴표로 감싸주며 폰트명이 한단어인 경우는 따옴표로 감싸주지 않아도 된다.
여러 개를 동시에 지정이 가능하다. 첫번째 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우, 다음에 지정된 폰트를 적용
폰트는 대부분의 OS에 기본적으로 설치되어 있는 generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적

font-style / font-weight 프로퍼티

font-style 프로퍼티는 이탤릭체의 지정, font-weight 프로퍼티는 폰트 굵기 지정에 사용

<head>
  <style>
    p { font-size: 2.0em; }

    /*
      font-style
      normal / italic / oblique
    */
    .italic {
      font-style: italic;
    }

    /*
      font-weight
      100 ~ 900 or normal / bold / lighter / bolder
    */
    .light {
      font-weight: lighter;
    }
    .thick {
      font-weight: bold;
    }
    .thicker {
      font-weight: 900;
    }
  </style>
</head>
<body>
  <p>normal style.</p>
  <p class="italic">font-style: italic</p>

  <p class="light">font-weight: lighter</p>
  <p class="thick">font-weight: bold</p>
  <p class="thicker">font-weight: 900</p>
</body>

normal style.

font-style: italic

font-weight: lighter

font-weight: bold

font-weight: 900

font Shorthand

font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)

/* size | family */
font: 2em "Open Sans", serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/1.2 monospace;

/* style | variant | weight | size/line-height | family */
/* font-variant: small-caps; 소문자를 대문자로 만든다. 단 크기는 일반 대문자에 비해 더 작다.*/
font: italic small-caps bolder 16px/3 cursive;

line-height 프로퍼티

텍스트의 높이를 지정, 텍스트 수직 정렬에도 응용되어 사용

<head>
  <style>
    .button {
      width: 150px;
      height: 70px;
      background-color: #FF6A00;
      border-radius: 30px;
      box-shadow: 5px 5px 5px #A9A9A9;
    }
    .button > a {
      display: block;
      font: italic  small-caps bold 2em/70px Arial, Helvetica, sans-serif;
      text-decoration: none;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="button">
    <a href="#">Click</a>
  </div>
</body>

Click

font-size와 line-height는 font-size/ling-height 방식으로 준다. line_height를 버튼의 높이인 70px만큼 줌으로써 수직정렬함.

letter-spacing 프로퍼티

글자 사이의 간격을 지정

text-align 프로퍼티

텍스트의 수평 정렬을 정의

<head>
  <style>
    h1 { text-align: center; }
    h3 { text-align: right; }
    p.left  { text-align: left; }
    p.justify  { text-align: justify; }
    a  { text-align: center; }
  </style>
</head>
<body>
  <h1>Lorem ipsum</h1>
  <h3>2016.03.07</h3>

  <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p class="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <a href='#'>Reference</a>
</body>

위 예제의 a 요소에 대한 중앙 정렬은 적용되지 않았다. 이는 a 요소는 inline 요소이기 때문이다. inline 요소는 width 프로퍼티가 없으므로 중앙 개념이 존재하지 않는다. a 요소에 display: block;을 지정한다면 중앙 정렬이 가능.

text-decoration 프로퍼티

text-decoration 프로퍼티를 사용하여 링크 underline을 제거할 수 있다. 또는 텍스트에 underline, overline, line-through를 추가할 수도 있다.

<head>
  <style>
    a { text-decoration: none; }

    p:nth-of-type(1) { text-decoration: overline; }
    p:nth-of-type(2) { text-decoration: line-through; }
    p:nth-of-type(3) { text-decoration: underline; }
  </style>
</head>
<body>
  <a href='#'>text-decoration: none</a>

  <p>text-decoration: overline</p>
  <p>text-decoration: line-through</p>
  <p>text-decoration: underline</p>
</body>

white-space 프로퍼티

white space는 공백(space), 들여쓰기(tab), 줄바꿈(line break)을 의미한다. html은 기본적으로 연속된 공백(space), 들여쓰기(tab)는 1번만 실행되며 줄바꿈(line break)은 무시된다. 또한 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap).
white-space 프로퍼티는 이러한 기본 동작을 제어하기 위한 프로퍼티.

프로퍼티값	line break	space/tab	wrapping(자동줄바꿈)
normal	무시	1번만 반영	O
nowrap	무시	1번만 반영	X
pre	반영	그대로 반영	X
pre-wrap	반영	그대로 반영	O
pre-line	반영	1번만 반영	O

text-overflow 프로퍼티

부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의
해당 프로퍼티 사용 조건

width 프로퍼티가 지정되어 있어야 한다. 이를 위해 필요할 경우 block 레벨 요소로 변경하여야 한다.
자동 줄바꿈을 방지하려면 white-space 프로퍼티를 nowrap으로 설정한다.
overflow 프로퍼티에 반드시 “visible” 이외의 값이 지정되어 있어야 한다.

프로퍼티값	Description
clip	영역을 벗어난 텍스트를 표시하지 않는다. (기본값)
ellipsis	영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(…)를 표시한다.

word-wrap 프로퍼티

한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의

word-break 프로퍼티

한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의 : word-wrap 프로퍼티는 단어를 어느 정도는 고려하여 개행하지만(.,- 등을 고려한다) word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행

정선용

이전 포스트

HTML/CSS 8.CSS Box Model / Display / Position / Float

다음 포스트