CSS (font, text, 사용자 인터페이스)

CSS

font 속성

<font> 태그 관련 속성은 CSS property로 대체 가능하므로 추천하지 않는다.

CSS Font 관련 속성은 text의 글꼴, 굵기, 크기, 스타일 등을 지정

font는 하나의 선언에서 여러 font 관련 속성을 지정

• font-family : 글꼴 지정(font name) (1)
• font-size : 글자 크기 지정 (1)
• font-style : 글자 스타일 지정 (1)
• font-variant : 소문자를 작은 대문자(small-caps)로 변형 (1)
• font-weight : 글자 굵기 지정 (1)
• font : font에 관한 속성을 한번에 지정하는 단축형(short hand) 속성 (1)

font-family

font-family 속성 사용법은 element { font-family: 글꼴이름, 글꼴이름, ... }

CSS parser 는 앞의 글꼴부터 읽으며 글꼴이 사용자 PC에 없을 경우 다음 글꼴을 적용

generic font 명을 뒤에 작성하는 것이 일반적이다.

font name에 공백(white-space)가 포함된 경우 quotation(")으로 감싸야 한다.

font-style

글자 스타일을 지정하기 위해 사용하며 사용법은 element { font-style: normal | italic | oblique }

속성 값은 normal, italic, oblique 가 있으며 default는 noraml

italic 속성은 글자를 이탤릭체로 표시, oblique 속성은 글자를 기울림꼴로 표시하기 위해 사용

italic은 디자이너에 의해 디자인된 특수한 글꼴, oblique는 일반 글자를 8 ~ 12도 기울여서 표시

font-variant

font-variant 속성 사용법은 element { font-variant: normal | small-caps }

소문자를 작은 대문자로 변환, default는 normal이며, 한글은 변화 없다.

font-weight

font-weight 속성 사용법은 element { font-weight: normal | bold | bolder | lighter }

default는 normal이며 100 ~ 900 까지 숫자 값으로 사용가능(400 : normal, 700 : bold)

font-size

font-size 속성 사용법은 element { font-size: 속성값}

절대 사이즈 속성 값은 xx-small, x-small, small. medium, large, x-large, xx-large

상대 사이즈 속성 값은 larger, smaller

그 외 px, cm, %(부모 엘리먼트와의 비율) 단위 사용가능

font

font 속성은 font-style, font-variant, font-weight, font-size 등을 한 번에 지정 가능한 단축형

속성 값은 "font-style font-variant font-weight font-size/line-height font-family" 순으로 지정

font-size와 font family는 필수 값이며, 생략 시 기본 값이 적용

여러 속성을 정의할 때 순서에 맞지 않게 정의하면 일부만 정의되거나 전체가 무시 될 수도 있다.

text 속성

CSS text 관련 속성은 글자, 공간, 단어, 문단들이 보여지는 속성을 정의

들여쓰기를 위해   문자를 사용하는 것이 아니라 text-indent 속성을 사용하여 들여쓰기 적용

• text-align : text 정렬 방식 지정 (1)
• text-decoration : text 장식 지정 (1)
• text-indent : text-block 안 첫 라인의 들여쓰기 지정 (1)
• text-transform : text 대문자화 (1)
• white-space : 엘리먼트 안의 공백 지정 (1)
• vertical-align : 수직 정렬 지정 (1)
• letter-spacing : 문자 간의 space 간격을 줄이거나 늘림 (1)
• word-spacing : 단어 간의 간격 지정 (1)
• line-height : 줄(행) 간격 지정 (1)
• color : text 색상 지정 (1)

text-align

text-align 속성 사용법은 element { text-align: left | right | center | justify }

justify는 각 라인의 너비가 모두 동일 하도록 간격을 늘린다.

과거에는 <center> 태그를 사용하여 가운데 정렬을 적용

HTML5 부터는 text-align 속성을 사용

text-decoration

text-decoration 속성 사용법은 element { text-decoration: none | underline | overline | line-through | blink }

line-through 는 text 사이로 라인 생성

blink는 text가 깜빡이는 효과 적용(IE 지원 X)

text-indent

text-indent 속성 사용법은 `element { text-indent: 절대 값(px, pt, em, cm etc) | 배율(%) }

절대 값ㅂ의 기본 값은 0

배율 값은 부모 엘리먼트 너비의 비율로 들려쓰기

속성 값에 음수를 허용, 음수 값 사용 시 왼쪽으로 들여쓰기

text-transform

text-transform 속성 사용법은 elemenet { text-transform: capitalize | uppercase | lowercase | none }

capitalize는 첫 글자를 대문자로, uppercase는 글자 전체를 대문자로, lowercase는 글자 전체를 소문자로 변경

white-space

white-space 속성 사용법은 element { white-space: normal | pre | nowrap | pre-line | pre-wrap }

normal은 정해진 영역에 따라 줄이 바뀌며, 하나의 whitespace만 허용

nowrap은 하나의 whitespace만 허용하며, 줄 바꿈을 금지(<br> 을 만나기 전까진 같은 줄에 출력)

letter-spacing & word-spacing

letter-spacing 속성 사용법은 element { letter-spacing: normal | 길이 값(length) }

글자 간의 간격을 조절 (자간을 늘릴 땐 양수, 줄일 땐 음수 사용)

word-spacing 속성 사용 범은 element { word-spacing: normal | 길이 값(length) }

단어 간의 간격을 조절

line-height

line-height 속성 사용법은 elemnet { line-height: 상대 값 | 절대 값 | 비율 }

비율 값을 사용하면 현재 글자 크기를 기본으로 50%, 200%와 같은 비율로 행 간격을 설정

절대 값을 사용하면 행 간격을 px, cm 등으로 직접 설정

상대 값을 사용하면 현재 글자 크기에 상대 값을 곱한 수 만큼 행 간격을 설정

사용자 인터페이스 속성

화면에 출력될 엘리먼트들에 디자인 요소를 추가하는 속성

커서의 모양이나 리스트의 형태를 변경

문서의 배경색과 배경 이미지를 변경

엘리먼트가 화면에 출력되는 방식을 조정

• cursor : 사용자 환경의 마우스 모양을 변경 (2)
• classification : 리스트의 글머리 기호를 변경 (1)
• display : 엘리먼트가 화면에 출력되는 방식을 조정 (1)
• background-color : 배경색을 지정 (1)
• background-image : 배경을 이미지로 지정 (1)
• background-attachment : 배경 이미지를 고정하거나 scroll 여부를 지정 (1)
• background-repeat : 배경 그림의 반복 여부를 지정 (1)
• background-position : 배경 그림의 위치를 지정 (1)
• background : 배경 관련 속성을 한 번에 지정(font 속성과 달리 속성 값 순서에 구애 받지 않는다) (1)

display

화면에 나오는 엘리먼트는 inline 과 block 두 가지로 분류

inline-level 엘리먼트는 줄 바꿈 없이 연속으로 이어진다. ex. <span>

block-level 엘리먼트는 줄 바꿈이 생긴다. ex. <div>

display 속성 사용법은 element { display: none | block | inline | ... }

background-color

background-color 속성 사용법은 element { background-color: color | transparent }

엘리먼트는 padding, border 와 같은 여백 없이 전체 크기만큼 배경색이 지정(margin 여백은 제외)

transparent color는 투명색으로 상위 엘리먼트의 배경색이 표현

color는 색 이릅 | RGB 값 | RGB 코드를 사용

background-image

background-image 속성 사용법은 element { background-image: none | url("image file path") }

배경 이미지가 격자 모양으로 반복하여 나타난다.

스크롤할 경우 배경 이미지도 반복적으로 나타나며 스크롤된다.

background-repeat & background-position

background-repeat 속성 사용법은 element { background-repeat: repeat-x | repeat-y | no-repeat }

repeat-x 는 배경을 수평으로 반복, repeat-y 는 배경을 수직으로 반복

background-position 속성 사용법은 element { background-position: 백분율(%) | 길이 값 | 수평 값 수직 값 }

수평 값은 left, center, right을 가지며 수직 값은 top, center, bottom을 갖는다.