해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 CSS3 lesson 6, 7의 내용인 백그라운드와 폰트 & 텍스트에 대해 알아보겠습니다.
6. Background
Background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의합니다.
background-image 프로퍼티
요소에 배경 이미지를 지정합니다.
<style>
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
}
</style>
background-repeat 프로퍼티
배경 이미지의 반복을 지정하며 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있습니다.
설정된 이미지의 크기 < 화면의 경우, 자동으로 이미지가 반복 출력되어 화면을 채우게 됩니다.
이는 기본값이 repeat
으로 되어있기 때문입니다.
x축으로만 배경 이미지를 반복할 경우에는 repeat-x
, y축으로만 배경 이미지를 반복할 경우에는 repeat-y
를 설정하면 됩니다.
반복 출력을 멈추고 싶을 경우에는 no-repeat
를 설정합니다.
여러 개의 이미지를 설정할 경우에는 먼저 설정된 이미지가 전면에 출력됩니다.
background-size 프로퍼티
배경 이미지의 사이즈를 지정하며, 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있습니다.
배경이미지의 width
, height
를 모두 설정할 수 있으며 두 값은 공백으로 구분합니다.
하나의 값만 지정하면 width만 적용되고 height는 auto로 지정됩니다.
프로퍼티값은 px
, %
, cover
, contain
등을 사용합니다.
px
값으로 지정하면 지정된 값 그대로 설정 됩니다.
%
값으로 지정하면 %
값에 비례하여 설정되며, 화면을 줄이거나 늘리면 배경이미지의 크기도 따라서 변경됩니다.
cover
로 지정하면 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰 값에 배경이미지를 맞춥니다. (일부 이미지 안 보일 수도 있음)
contain
으로 지정하면 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 이미지 스케일을 조정합니다.
background-attachment 프로퍼티
일반적으로 화면을 스크롤하면 배경 이미지도 함께 스크롤 됩니다.
배경 이미지를 스크롤 되지 않고 고정되어 있게 하려면 background-attachment
프로퍼티에 fixed
키워드를 지정합니다.
background-position 프로퍼티
일반적으로 배경 이미지는 좌상단부터 이미지를 출력합니다.
이 때 해당 프로퍼티를 사용하면 이미지의 좌표를 지정 할 수 있으며, 기본값은 background-position: 0% 0%;
로 배경이미지는 우측 상단에 위치하게 됩니다.
background-color 프로퍼티
요소의 배경 색상을 지정합니다. 색상값 또는 transparent
키워드를 지정할 수 있습니다.
background Shorthand
축약 버전의 포맷은 다음과 같습니다. (|| 은 공백)
background: color || image || repeat || attachment || position
7. 폰트 & 텍스트
폰트 및 텍스트 관련 프로퍼티는 폰트의 크기, 폰트의 지정, 폰트의 스타일, 텍스트 정렬 등을 정의합니다.
font-size 프로퍼티
텍스트의 크기를 정의합니다.
font-family 프로퍼티
폰트를 지정하며 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않습니다.
여러 개 동시에 지정 가능하며 첫번째 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우, 다음에 지정된 폰트를 적용합니다.
대부분의 OS에 기본적으로 설치되어 있는 generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적입니다.
폰트명은 따옴표로 감싸주며 폰트명이 한 단어인 경우는 따옴표로 감싸주지 않아도 됩니다.
.serif {
font-family: "Times New Roman", Times, serif;
}
font-style / font-weight 프로퍼티
font-style
프로퍼티는 이탤릭체를 지정합니다.
font-weight
프로퍼티는 폰트 굵기를 지정합니다.
/* font-style: normal / italic / oblique */
.italic {
font-style: italic;
}
/*
font-weight
: 100 ~ 900 or normal / bold / lighter / bolder
*/
.light {
font-weight: lighter;
}
font Shorthand
포맷은 다음과 같다.
/* size | family - 필수인 것만 지정했을 때 */
font: 2em "Open Sans", serif;
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/1.2 monospace;
line-height 프로퍼티
텍스트의 높이를 지정하며 텍스트 수직 정렬에도 응용되어 사용됩니다.
수직 중앙 정렬을 하려면 line-height
값과 height
값을 일치시키면 됩니다.
letter-spacing 프로퍼티
글자 사이의 간격을 지정합니다. (마이너스도 적용 가능 1px
)
text-align 프로퍼티
텍스트의 수평 정렬을 정의하며 inline 요소는 정렬되지 않습니다. (width 프로퍼티가 없음)
h1 {
text-align: center; /* 텍스트 가운데 정렬 */
}
text-decoration 프로퍼티
링크의 underline
을 제거할 수 있습니다. - none;
텍스트에 underline
(밑줄), overline
(윗줄), line-through
(가운데줄)를 추가할 수도 있다.
white-space 프로퍼티
공백(space), 들여쓰기(tab), 줄바꿈(line break)을 의미합니다.
HTML은 기본적으로 연속된 공백(space), 들여쓰기(tab)는 1번만 실행되며 줄바꿈(line break)은 무시됩니다.
normal
- 줄바꿈(line break) : 무시
- 공백, 들여쓰기 : 1번만 반영
- 자동 줄바꿈(wrapping) : O
nowrap
- 줄바꿈(line break) : 무시
- 공백, 들여쓰기 : 1번만 반영
- 자동 줄바꿈(wrapping) : X
pre
- 줄바꿈(line break) : 반영
- 공백, 들여쓰기 : 그대로 반영
- 자동 줄바꿈(wrapping) : X
pre-wrap
- 줄바꿈(line break) : 반영
- 공백, 들여쓰기 : 그대로 반영
- 자동 줄바꿈(wrapping) : O
pre-line
- 줄바꿈(line break) : 반영
- 공백, 들여쓰기 : 1번만 반영
- 자동 줄바꿈(wrapping) : O
text-overflow 프로퍼티
부모 영역을 벗어난 자동 줄 바꿈(wrapping)이 되지 않은 텍스트의 처리 방법을 정의합니다.
width 프로퍼티가 지정되어 있어야 하며, 필요할 경우 block 레벨 요소로 변경해야 합니다.
자동 줄바꿈을 방지하려면 white-space 프로퍼티를 nowrap
으로 설정합니다.
overflow
프로퍼티에 반드시 “visible” 이외의 값이 지정되어 있어야 합니다.
예시는 다음과 같습니다.
/* 부모 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(...)를 표시한다. */
.truncate {
width: 150px; /* width가 지정되어 있어야 한다. */
white-space: nowrap; /* 자동 줄바꿈을 방지 */
overflow: hidden; /* 반드시 "visible" 이외의 값이 지정되어 있어야 한다. */
text-overflow: ellipsis; /* ellipsis or clip */
}
text-overflow에 설정할 수 있는 프로퍼티 값은 아래와 같습니다.
clip
: 영역을 벗어난 텍스트는 표시하지 않음(기본값)
ellipsis
: 영역을 벗어난 텍스트는 잘라내고 말줄임표(…) 표시
word-wrap / word-break 프로퍼티
한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의합니다.
link 등을 표기할 때 그 길이가 매우 길어지는데, 해당 프로퍼티를 사용하지 않으면 부모 영역을 넘어가게 됩니다.
word-wrap 프로퍼티는 단어를 어느 정도 고려하여 개행하지만 (.,- 등 고려) word-break 프로퍼티는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행합니다.
.word-wrap {
word-wrap: break-word;
}
.word-break {
word-break: break-all;
}
여기까지 백그라운드와 폰트 & 텍스트에 대해서 정리해봤습니다.
이에 대한 자세한 코드 예시는 아래 더보기에서 확인하실 수 있습니다.