CSS 스타일시트 배경 글꼴 정렬방법

CSS 스타일시트 배경 글꼴 정렬방법

CSS 스타일시트의 색상(color), 배경(background), 글꼴(font), 텍스트(text)등을 알아보았습니다. 각 속성 값과 관련된 내용들을 살펴볼 수 있습니다. CSS 스타일시트의 색상과 배경 먼저 살펴보겠습니다. 

 

 

 

CSS 색상 및 배경

주로 HTML에서 배경 또는 색상 등을 변경하기도 했었지만, CSS 스타일시트에서도 자주 이용하고 있습니다. 색상은 흔히 글자 텍스트의 색을 말합니다. 일반적으로 HTML처럼 색을 영어로 입력해주거나, RGB 값을 입력할 수도 있습니다. 직접 색상명을 입력하기도 합니다. 

 

배경은 background라고 이야기합니다. HTML에서의 배경과 스타일시트에서 설정할 수 있는 배경의 범위가 일부 다릅니다. HTML에서는 문서와 테이블, 레이어 배경의 색 또는 이미지 등으로 변경이 가능했습니다. 반면 스타일시트에서는 HTML에서 가능했던 문서, 테이블, 레이어 배경에 추가로 모든 객체의 배경에 배경 색상과 이미지, 각 이미지 위치 지정, 바둑판 배열 등 설정이 가능합니다. 투명한 배경을 기본값으로 가지고 있고, 표와 같은 것들을 입력하더라도 배경이 보일 수 있습니다. 

속성값	내용
background-color	배경색
background-image	배경 이미지
background-repeat	배경 이미지 반복
background-attachment	배경 이미지 고정
background-position	웹 문서 내 배경 이미지 위치
background	배경의 속성

 

배경색 지정 background-color

웹 문서의 배경색을 지정할 수 있는데, 지정하지 않을 경우 투명한 것이 기본값으로 설정됩니다. 투명은 transparent로 background-color : transparent로 적용하게 됩니다. 

 

배경 이미지 지정 background-image

이미지를 지정하는데 배경보다 작을 때는 패턴 형식으로 반복됩니다. 이미지가 만약 없는 경우에는 원하는 배경색을 지정해둘 수도 있습니다. 이미지 파일의 경로 url이 필요하고, 기본값은 none입니다. 

body {background-image : url("image/photo.gif")}
P {background-image : none}

 

배경 이미지 반복 background-repeat

배경의 이미지를 어떻게 반복할 것인지 설정할 수 있습니다. 사용자가 원하는 방향으로 이미지를 연속하여 가로 세로 바둑판 등의 배열로 표시할 수 있고, 하나만 표시할 수도 있습니다. 

배경 이미지

 

고정 여부 background-attachment

배경 이미지를 고정시킬지 결정할 수 있습니다. 페이지를 스크롤해서 내릴 때 이미지까지 같이 보이게끔 할 것인지, 이미지를 고정시켜서 보이지 않게끔 할 것인지 지정할 수 있습니다. 내용만 스크롤이 되어 보일 수 있도록 하게 됩니다. 기본값은 scroll으로 fixed를 사용할 수 있습니다. background-attachment : fixed

 

배경 이미지 위치 조정 background-positon

배경 이미지의 위치를 조절할 수 있습니다. 백분율 퍼센트로, 길이, 위치 등으로 설정할 수 있습니다. 상 top, center 중, 하 bottom으로 위치할 수도 있습니다. 좌 left, 중 center, 우 right으로 위치할 수도 있습니다. 배경 이미지를 좌측 상단을 기준으로 길이 length단위로 위치할 수도 있습니다. 또한 백분율로 위치할 경우 배경 이미지 좌측 상단을 기준으로 % 단위로 설정도 가능합니다. 한 번에 배경을 설정할 수 있는데 background로 할 수 있습니다. 

 

 

 

CSS FONT 글꼴

글씨의 모양과 크기 등 글자를 꾸미는 데 주로 사용되는 스타일 시트 속성이 글꼴입니다. 여기저기 문서 편집할 때 글꼴을 설정하는 것과 동일한 맥락입니다. HTML에서 보다 많은 글꼴 표현이 가능하여 보다 편리한 이용이 가능합니다. 스타일시트에서 제공하는 속성들은 font-family, style, variant, weight, size 등이 있습니다. 

속성값	내용
font-family	글꼴의 종류를 설정한다.
font-style	보통 글자인지, 이탤릭 글씨체인지 글꼴 모양을 설정한다.
font-variant	작은 대문자 사용여부를 결정한다.
font-weight	글꼴의 굵기를 설정한다.
font-size	글꼴의 사이즈, 크기를 결정한다.
font	글꼴의 속성을 결정한다.

 

글꼴의 종류 font-family

글꼴의 종류를 선택할 때 이용되는 family는 자주 보셨을 수도 있습니다. 보통은 하나의 통일된 글꼴을 이용하는 편이지만 가끔 제목과 같은 타이틀 또는 중간에 삽입하는 인용문 등의 경우 다른 글꼴이 필요할 수 있습니다. 요즘은 예쁜 글꼴들이 많아서 글꼴을 다운로드하고 추가해줄 수도 있습니다. 만약 예쁜 폰트의 글씨체를 사용하고 싶어서 글꼴을 정의한다면, 컴퓨터에서 다운로드한 글씨체를 찾게 됩니다. 그런데 만약 저장된 글꼴이 없을 경우 스타일시트에서 지정한 대체 글꼴로 나타납니다. 여기서 한 개 더 글씨체를 추가하고 싶다면, 따옴표로 추가해서 입력해주기만 하면 됩니다. 

body {font-family : 본고딕 R, 본고딕 L, 나눔 고딕}

글꼴의 모양 font-style

글꼴의 모양을 이탤릭체로 사용할 수 있습니다. font-style : normal 값을 하면 기본값으로 지정한 글꼴 모양이 나타납니다. font-style : italic으로 할 경우 이탤릭체로 표시됩니다. 

 

작은 대문자 font-variant

글자의 영문 소문자를 작은 대문자로 변경해줄 수 있는 속성입니다. 해당하는 글꼴이 작은 대문자 글꼴이 포함되어 있지 않다면 적당한 비율로 대문자를 표시할 수 있습니다. font-variant : normal을 할 경우 지정 글꼴 모양으로 표시합니다. font-variant : small-caps로 지정할 경우 글꼴 모양을 작은 대문자로 변경해줍니다. 

 

글꼴의 굵기 두께 font-weight

font-weight로 글자의 두께를 설정할 수 있습니다. 크기와는 다르기 때문에 100에서 900까지의 값 또는 normal, bold, bolder, lighter 값으로 이용할 수 있습니다. 기본값은 normal입니다. 

속성값	내용
100에서 900	단계별로 지정해 놓은 글꼴의 두께 값입니다. 커질수록 두께가 굵어집니다.
normal	숫자 400의 값과 동일합니다. 기본 값이라고 볼 수 있습니다.
bold	숫자 700의 값과 동일합니다.
bolder	현재 지정해둔 두께보다 1단계 더 두꺼운 값을 적용합니다.
lighter	현재 지정해둔 두께보다 1단계 더 얇은 값을 적용합니다.

 

글꼴의 크기 font-size

다양한 글자의 크기를 설정할 수 있습니다. HTML에서 이용할 때는 약 7가지 정도의 정해진 크기가 있었지만, 보다 다양한 크기를 선택할 수 있게 됩니다. 기본값은 medium입니다. 이전처럼 길이, 백분율 등으로도 가능한데 절대 크기와 상대크기까지 고려할 수 있습니다. 절대 크기는 옷을 고를 때의 느낌과 비슷하다고 볼 수 있겠습니다. 

속성값		내용
절대크기	xx-small, x-small, small medium large, x-large, xx-large	기본값은 medium으로 10pt입니다. HTML에서 사용되는 1~7단계와 동일한 총 7가지 값을 나타냅니다.
상대크기	large, smaller	상대크기를 나타내는 것으로 기준이 되는 글꼴보다 한단계 크거나, 작은 글꼴로 나타납니다. large는 1단계 큰 글꼴, smaller은 1단계 작은 글꼴.
길이	em, ex, px	상대적 크기의 단위로 숫자와 함께 사용하게됩니다.
	pt, pc, mm, cm, in	절대적 크기의 단위로 숫자와 함께 사용하게됩니다.
백분율	%	글꼴 크기를 상위 태그에 비례해 백분율로 나타납니다.

글꼴의 크기를 설정하지 않는다면 기본값은 3인 small로 될 수 있습니다. 위에서 볼 수 있는 절대 크기의 단위는 px는 픽셀, cm은 센티미터, mm은 밀리미터, in은 인치로 1인치에 2.5399cm입니다. pt는 포인트로 1pt는 1/72인치입니다. pc는 picas로 1pc는 12pt입니다. 

font 속성을 통해서 한꺼번에 설정도 가능합니다. 글꼴의 이름보다도 크기가 먼저 입력이 되어야 하게 됩니다. 

 

CSS TEXT 텍스트 

주로 텍스트는 단락의 모양과 관련되어 있습니다. 보통 문서를 작성할 때 줄 간격, 자간 등을 조절하여 깔끔한 구성을 하기도 하는데 비슷하다고 볼 수 있겠습니다. 글자, 단어, 텍스트 등의 정렬 등이 있는데요. text-indent, align, decoration, transform 이 있고 line-height, letter-spacing과 word-spacing, vertical-align 이 있습니다. 

속성값	내용
text-indent	단락의 첫 번째 줄의 들여쓰기 여부를 결정합니다.
text-align	텍스트의 수평 정렬을 할 수 있습니다.
text-decoration	텍스트의 장식 효과를 설정하거나, 링크 텍스트의 링크를 없앨 수 있습니다.
text-transform	영문자를 대문자 또는 소문자로 정할 수 았습니다.
line-height	줄 간격을 조절할 수 있습니다.
letter-spacing	글자 사이의 간격을 조절할 수 있습니다.
word-spacing	단어 사이의 간격을 조절할 수 있습니다.
vertical-align	텍스트의 수직 정렬 방법을 설정할 수 있습니다.

 

단락의 첫 줄 들여 쓰기 text-indent

단락의 첫 번째 줄에서 얼마 큼의 들여 쓰기를 할 것인지를 결정할 수 있습니다. 기본값은 0으로 고정되어 있습니다. 일반적으로 양수를 입력해주면 들여 쓰기가 됩니다. 만약 숫자의 값에 -가 붙어 음수가 될 경우 내어 쓰기가 됩니다. 이전처럼 백분율로도 들여 쓰기가 가능합니다. 

 

텍스트 수평 정렬 text-align

텍스트를 수평으로 어디에 정렬할 것인지 정할 수 있습니다. 보통 글을 시작할 때 왼쪽부터 작성하기 때문에 기본값은 left가 됩니다. 좌 left, 우 right, 가운데 center, 양쪽 justify 등으로 문단을 정렬할 수 있게 됩니다. 

 

텍스트 장식 text-decoration

텍스트에 추가하는 장식을 말합니다. 기본값은 none으로 장식을 하지 않는 것을 의미합니다. 텍스트에 밑줄을 그어주는 underline, 텍스트 위에 줄을 그어주는 overline, 텍스트 중앙에 줄을 그어주는 line-through, 텍스트를 깜빡여주는 blink가 있습니다. 

 

영문을 대문자 소문자 결정 text-transform

텍스트를 대문자 또는 소문자로 변경해줄 수 있습니다. 일반적으로 문장의 첫 번째 문자가 대문자로 표시되는데 첫 문자만 대문자로 할 것인지, 모든 텍스트를 대문자로 설정할 것인지, 소문자로 전체할 것인지 선택할 수 있습니다. 기본 값은 none으로 입력한 단어가 그냥 그대로 보입니다. capitalize로 할 경우 첫 번째 문자만 대문자로 표시합니다. uppercase는 모든 텍스트를 대문자로 변경해줍니다. lowercase는 모든 텍스트를 소문자로 변경해줍니다.

 

줄 간격 설정 line-height

문서의 가독성을 위해서 줄 간격은 정말 중요합니다. 기본값은 normal로 기본 설정되어있는 줄 간격입니다. 이전처럼 절대 단위와 상대 단위, 백분율 등이 있습니다. 그리고 간격은 -를 붙여서 음수로 할 수 없습니다. 

 

글자 간 간격 설정 letter-spacing

글자와 글자 사이의 간격을 자간이라고 합니다. 이러한 글자 사이의 간격을 조절하는 자간 설정입니다. HTML에서는 자간 설정이 안 되었습니다. 간혹 자간을 통해 한 페이지에 담을 수 있는 글자를 늘리거나 줄여서 가독성을 높여주기도 합니다. 기본값은 normal로 여기에 길이 값을 +, -로 추가해서 간격을 설정할 수 있게 됩니다. 

 

단어 간 간격 설정 word-spacing

자간과 비슷할 수 있지만, 단어끼리의 간격이기 때문에 조금 다릅니다. 기본값은 normal로 기본값에 +, - 표현이 가능합니다. 

 

텍스트 수직 정렬 vertical-align

텍스트를 수직으로 어떻게 정렬할지 설정할 수 있습니다. text-align의 경우 수평으로 정렬하는 방법이고, vertical-align은 텍스트 또는 이미지를 수직으로 정렬할 수 있는 것입니다. 기본 값은 baseline으로 auto를 통해 자동정렬도 가능합니다. sub는 아래 첨자로 표시할 수 있고, super으로 위 첨자로 표시할 수 있습니다. middle은 이미지와 함께 할 경우 텍스트를 중앙 정렬할 수 있고, 이미지와 같이 텍스트를 위로 정렬할 때는 top, 아래로 정렬할 때는 bottom으로 할 수 있습니다. 텍스트와 함께 할 때 위로 정렬하려면 text-top, 텍스트와 함께 할 때 아래로 정렬하려면 text-bottom으로 할 수 있습니다. 

전체적인 CSS 스타일시트 배경 글꼴 정렬방법을 살펴보았습니다. 

 

 

 

CSS 스타일시트 기초