텍스트 표현

 

1. 글꼴 관련 

1) 글꼴

 

font-family:<글꼴이름> | [<글꼴이름>,<글꼴이름> ]

(속성값 나열 할 때 값이 아니라 유형이라면 <>로 묶음)

 

@font-face (눈누 / 구글 폰트 사이트 사용) 

 

 

2) 글자 크기

 

font-size:<절대크기>|<상대크기>|<크기>|<백분율>

 

절대크기: 브라우저에서 지정한 글자 크기

상대크기 : 부모 요소의 글자 크기 기준

크기  :브라우저와 상관없이 글자 크기 직접 지정

백분율 : 부모요소의 글자 크기를 기준으로 백분율

 

3) 단위들

Em : 부모 요소에서 지정한 글꼴의 대문자M기준이 1em 한 후 비율 값 지정

Rem : 문서 시작 부분에서 지정한 크기가 1em 한 후 비율 값 지정(최상위 문서 시작 글 크기가 기준이 되는 거임) 

- nRem  = n

ex )  문서의 html 에서 20px했으면 다른 파일에서 1rem = 20px가 됨 

Ex : 해당 글꼴의 소문자 x 높이 기준 비율

Px : 모니터의 1 픽셀 기준 비율

Pt : 포인트, 일반 문서와 똑같

vw :  viewport 너비의 1% -  높이는 그대로 (viewport(요소의크기?)에 대한 비율에 따라 너비가 움직임)

ex) 20 vw  : viewport의 20v퍼센트 

vh :  viewport 높이의 1% 

 

 

4) font style

 

font-style: normal | itlaic| oblique

 

Itlaic : 처음부터 기울어지게 디자인 됨

Oblique : 원래 글꼴을 기울어지게

 

5) font-weight

 

Font-weight  : normal| bold| bolder | lighter | 숫자(백단위)100-900

 

2. 텍스트 관련 스타일 

1) color : <색상>

 

{Color : rgb(0,0,0,0);}

마지막은 불투명도 : 1은 완전 불투명 ,0은 투명

 

16진수 표기법 : #0000

 

2) text-align (텍스트 정렬)

 

Text-align: start | end | left | right | center | justify | match-parent

 

Start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬

End : 현재 텍스트 " 끝

Left :  왼쪽 맞추어 문단 정렬

Right : 오른쪽 맞추어 문단 정렬

Center : 가운데 맞추어 정렬

Justify : 양쪽에 맞추어 문단 정렬 - 왼쪽 정렬은 오른쪽에 공간이 남지만 justify는 양쪽 공간 동일

Match-parent : 부모 요소에 따라 문단 정렬

 

3) line-height

 

ex)

Font-size : 12px ;

Line-height:24px;

Line-height:2.0;

Line-height:200%;

• -> 다 똑같은 24px
• ( 아래로 간격인거)

4) text-decoration

 

style = "text-decoration:none"  //텍스트에 아무것도 안함

Style = "text-decoration:underline"  //텍스트 밑줄

Style = "text-decoration:overline   //윗줄 표시

Style = "text-decoration:line-through" //글자 통과 줄

 

5) text-shadow

 

Text-shadow : none | <가로거리><세로 거리> <번짐 정도><색상>

 

가로거리 : 양수 : 오른쪽, 음수 : 왼쪽 (필수)

세로거리 : 양수 : 아래 , 음수 : 위쪽 (필수)

번짐정도 : 그림자가 번지는 정도 , 양수 : 모든 방향 퍼져나감, 음수 ; 모든 방향 축소

 

6) text-transform

:  영문 사용시 텍스트이 대소 문자 변형

Text-transform : capitalize;  //첫번째 글자를 대문자로

Text-transform : uppercase ;  // 모든 글자를 대문자로

Text - transform : lowercase; //모든 글자를 소문자로

Text-transform : full - width; 가능한 모든 문자를 전각(가로 세로 비율이 같은 글자)

 

7 ) letter-spacing , word-spacing

Letter-spacing : 글자와 글자 사이 간격 조절

Word-spacing : 단어와 단어 사이 조정

3. 목록 스타일

1) list-style-type

• Disc : 채운 원 모양
• Circle : 빈 원 모양
• Square : 채운 사각형
• Decimal : 1부터 시작하는 10진수
• Deciaml-leading-zero : 앞에 0이 붙는 10진수
• Lower - roman ; 로마 숫자 소문자
• Upper-roman : 로마 숫자 대문자
• Lower-alpha ,lower-latin : 알파벳 소문자
• Upper "
• None : 불릿이나 숫자 없앰

2) list-style-image

: 불릿 대신 이미지 사용

 

기본형 : list-style-image : <url (이미지 파일 경로)> | none(list-style-type에서 지정한 형태로 표시됨)

 

3) list-style-position

: 목록을 들여 씀

 

기본형 : list-style-position : inside | outside;

Inside : 불릿이나 번호가 실제 내용이 시작 되는 위치보다 좀더 안으로 들여씀

Outside : 기본값

 

4) list-style

ul {list-style : none;}
ol{ list-style : lower-alpha inside;}

// 원래는 list-style-type 해서 각 각 따로

nav{//메뉴(네비게이션) 
	width: 300px;
	margin:50px 30px;
}
ul{
	list-style:none;// 목록 나타내는 스타일 없애기 
}
li{
border: 1px soid #222;
padding :20px 40px; //글자와 불록 사이의 공간
margni5px;
}

 

4. 표 스타일 

 

1) caption-side

: 표 제목의 위치 정해줌

caption-side  :top | bottom 
						// 캡션 표 위에  |  표 아

2) border

: 표 테두리 생성

(바깥 , 셀 테두리)

 

사용법 : border : px(굵기)  solid(선 형) 

 

3) border-spacing

: 표와 셀에 따로 테두리 지정 → 여백 생김

이를 조정해주는 기능

border-spacing : 수평거리 수직거리 

4) border-collapse

: <table> 태그에 적용 되는 스타일에만 지정하면 됨 ( 표와 셀테두리 합치기 / 표와 셀 테두리 따로 표시(기본값)

사용법 : border-collapse : collapse;