Chapter 2. CSS 텍스트, 문단, 목록&링크 스타일

vendor prefix

---

• CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 제공하고자 할 때 사용
• 브라우저 개발 업체마다 특정 속성값들을 자신들만의 표현방법으로 설정하는 경우로인해 별도의 '접두어'를 사용해야 하는 경우가 있음

구분	의미
-webkit-	구글의 크롬, 애플의 사파리 브라우저에 적용
-moz-	모질라(파이어폭스) 브라우저에 적용
-ms-	MS(마이크로소프트) IE 브라우저에 적용
-o-	오페라 브라우저에 적용

CSS 단위 구성

---

• 상대 크기

구분	의미
em	부모 요소의 크기가 기준 / 1em = 1배 = 100% / 2em = 2배 = 200%
rem	최상위의 부모 요소의 크기가 기준으로 배수
%	기본 설정된 크기에서 상대적 크기 설정

• 절대 크기

구분	의미
px	기본 지정된 크기(픽셀 크기)
pt	기본 지정된 크기 (포인트 크기)

색상 표현

---

구분	의미	표현 방법
영문색 이름	영문으로 색 이름을 작성	red, black, blue 등등
16진수 표현	RGB 값을 기준으로 16진수로 작성	#16진수 3자리 입력 ex) #ff0000 (빨간색) => 줄여서 #f00 가능 (2자리씩 보았을때 동일한 값이면 1개로 줄여서 표현 가능)
rgb	RGB 값을 0 ~ 255로 작성	rgb(0~255,0~255,0~255) ex) rgb(255,0,0)
rgba	RGBA는 투명도 표현도 가능	rgba(0~255,0~255,0~255,0~1) ex) rgba(255,0,0,0.1)

텍스트 스타일

---

속성	의미	표현 방법
font-size	- 글자의 크기를 조절 단위 : em, px, pt, ex ※ ex는 현재 소문자 x의 크기 배수 (자주 사용하지 않음)	선택자 {font-size : 숫자 단위;}
font-weight	- 글자 굵기를 조절 구분값 normal : 기본 형태 bold : 굵게 표시 bolder : 기본보다 더 굵게 표시 lighter : 기본보다 더 가늘게 표시 100 ~ 900 : 400이 nomal, 700이 bold에 해당 (세밀한 조절 가능)	선택자 {font-weight : 구분값; }
font-family	- 폰트의 글꼴을 설정해   - 글꼴이름1이 없으면 글꼴2, 글꼴3 으로 선택되어 설정 됨   - 모두 없을 경우 브라우저의 기본 글꼴 사용	선택자 { font-family : "글꼴1", ["글꼴2", "글꼴3"];}
font-variant	- 소문자 영어를 작은 대문자로 표시	선택자 {font-variant : normal or small-caps;}
font-style	- 글자를 이텔릭체로 표시	선택자 {font-style : normal or italic or oblique;}
font	- 글꼴 속성을 모아서 한번에 표현 - font-size와 font-famaily는 꼭 적어야 함	선택자{ font : font-style font-variant font-weight            font-size/line-height font-family ;}
color	- 글자색 변경	선택자 {color : 색상 ; }
text-decoration	- 글자에 밑줄을 긋거나, 취소선을 긋거나,   윗 선을 긋거나, 밑줄을 없앨때 사용하는 속성 구분값 none : 밑줄 삭제 underline : 밑줄 표시 overline : 윗줄 표시 line-through : 취소선 표시	선택자 { text-decoration : 구분값 ; }
text-transform	- 대소문자 변환 구분값 none : 변환없이 표시 capitalize : 시작하는 첫번째 글자를 대문자로 변환 uppercase : 모든 글자를 대문자로 변환 lowercase : 모든 글자를 소문자로 변환	{text-transform :구분값 ;}
text-shadow	텍스트에 그림자 효과 설정 구분값 none : 그림자 표현 없음 가로 : 가로로 얼마나 떨어져 있는지를 지정       (양수는 오른쪽, 음수는 왼쪽) 세로 : 세로로 얼마나 떨어져 있는지를 지정       (양수는 글자아래, 음수는 위) 번짐 : 번지는 정도를 지정 색상 : 색상을 지정 (16진수, RGB, 색상이름 사용)	선택자 {text-shadow : none | 가로값 세로값 번짐값 색상값 ; }
white-space	공백을 처리 구분값 normal : 여러 개의 공백을 하나로 표시 nowrap : 여러 개의 공백을 한개로 표시 / 줄 바꾸지 않음 pre : 여러 개의 공백을 그대로 표시 / 한 줄로 표시 pre-line : 여러 개의 공백을 한개로 표시 / 영역을 넘어가면 자동 줄 바꿈 pre-wrap : 여러 개의 공백을 그대로 표시 / 영역을 넘어가면 자동 줄 바꿈	선택자 {white-space : 구분값 ; }
letter-spacing	낱개 글자의 간격을 조정	선택자 {letter-spacing : px;}
word-spacing	단어 사이 간격을 조절	선택자 {word-spacing : px;}

문단 스타일

---

속성	의미	표현 방법
direction	글자 쓰기 방향 지정 구분값 ltr : 왼쪽에서 오른쪽으로 텍스트를 표시 rtl : 오른쪽에서 왼쪽으로 텍스트를 표시	선택자 {direction : 구분값; }
text-align	문자 위치를 조정(정렬) 구분값 left : 왼쪽에 맞추어 정렬 right : 오른쪽에 맞추어 정렬 center : 가운데 맞추어 정렬 justify : 양쪽에 맞추어 문단 정렬	선택자 {text-align : 구분값 ; }
text-indent	문장 들여쓰기	선택자 {text-indent : 숫자(단위) ; }
line-height	문장끼리의 줄 간격을 조정	선택자 {line-height : normal 또는 숫자(단위) ; }
text-overflow	영역을 벗어나는 텍스트 표시 구분값 clip : 영역을 넘어가는 텍스트를 자름 ellipsis : 말 줄임으로 잘린 텍스트 표현 (...으로 표현)	선택자 {text-overflow :구분값 ; }

목록&링크 스타일

---

속성	의미	표현 방법
list-style-type	목록 기호의 스타일을 지정 구분값 - ul    disc : 흑색 원형    circle : 흰색 원형    square : 흑색 사각형    none : 기호 표시 안하기 (없애기) -ol    decimal : 1로 시작 십진수    decimal-leading-zero : 앞에 0이 붙은 십진수    lower-roman / upper-roman: 소문자 로마자 / 대문자 로마자    lower-alpha / lower-latin : 소문자 알파벳    upper-alpha / upper-latin : 대문자 알파벳	선택자 { list-style-type : 구분값 ; }
list-style-image	기호 대신 이미지 삽입 (10x10 픽셀이 가장 좋은 사이즈)	선택자 { list-style-image : url(이미지 경로); }
list-style-position	목록 기호 들여쓰기 구분값 inside : 블릿이나 숫자를 안쪽으로 들여 씀 outside : 블릿이나 숫자를 밖으로 내어 씀 (기본 값)	선택자 { list-style-position : 구분값 ;}