[ css3 ] border, font, text, display

border , font , text , display

 

1. border 

2. font

3. text 

4. display

 

* border : 테두리 

속성	설명	mdn
border	테두리	바로가기
border-color		바로가기
border-style		바로가기
border-width		바로가기
border-top, border-bottom, border-right, border-left		바로가기

 

 

* font : 크기, 두께, 서체, 스타일

속성	설명	mdn
font-size	크기	바로가기
font-style	스타일	바로가기
font-weight	두께	바로가기
font-family	서체	바로가기
font	속기	바로가기

 

* text

속성	설명	mdn
text-align	정렬	바로가기
text-indent	들여쓰기/내여쓰기	바로가기
text-transform	대소문자	바로가기
text-overflow	텍스트 넘침	바로가기
text-decoration	텍스트 밑줄	바로가기
line-height	줄간격	바로가기
letter-spacing	자간	바로가기
word-spacing	단어 사이 간격	바로가기
word-break	줄바꿈	바로가기
white-space	공백문자처리	바로가기
direction	텍스트 방향( 좌우 )	바로가기
writing-mode	텍스트 방향( 세로쓰기 )	바로가기
-webkit- : 크롬 , 사파리 , 오페라	텍스트 말줄임 1. 너비  2. white-space: nowrap; 한줄 3. overflow: hidden; 넘침 4. text-overflow: ellipsis;	여러줄 말줄임 display: -webkit-box; -webkit-line-clamp: 줄수; -webkit-box-orient: vertical

 

* line-height

line-height

 

* display

블록레벨요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록레벨 요소로 바꿈

display:block

display:inline

display:inline-block

display:none

 

속성	설명	mdn
display:table	전체를 표처럼	<table> 요초처럼 표현
display:table-row	표의 줄처럼	<tr> 요소처럼 표현
display:table-cell	표의 칸처럼	<td> 요소처럼 표현
border-collapse	겹치는 부분을 한줄	바로가기

 

-webkit- : 접두어 사용

-webkit-text-fill-color	텍스트 색상 채우기	mdn
-webkit-text-stroke	텍스트 테두리	mdn
-webkit-text-stroke-color	테두리 색	mdn
-webkit-text-stroke-width	테두리 두께	mdn
-webkit-line-clamp	말줄임 여러줄 지정	mdn