쓰는 듯 안쓰는 듯 하면서 자주 쓰이는 것들
내가 요즘 자주 하는 말
....
'아 이거 이런거 있었던 거 같은데.... 뭐였더라...'ㅋ
CSS - TEXT다루기
| color | letter-spacing | word-spacing | text-align |
| text-indent | line-height | text-decoration | text-shadow |
| text-transform | font-variant | text-overflow | white-space |
| overflow | font-size | font-family | font-weight |
| color | 텍스트의 색상을 설정, 기본값은 검정색임 |
| letter-spacing | letter-spacing 텍스트 내에서 '글자 사이'의 간격을 설정할 때 안 녕 하 세 요 |
| word-spacing | word-spacing 텍스트 내에서 '단어 사이'의 간격을 설정 텍스트 내에서 단어 사이의 |
| text-align | 텍스트의 수평 방향 정렬을 설정 |
| text-indent | 단락의 첫 줄의 들여쓰기를 설정 고정적인 사이즈 px / 상대적인 사이즈 % |
| line-height | 텍스트의 줄 간격(높이)을 설정 ( 디자인적으로도 활용이 크다 ) |
| text-decoration | 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용 (none-, underline, line-through, overline) |
| text-shadow | 텍스트에 그림자 효과를 설정 선택자 { text-shadow: 가로거리 세로거리 번짐정도 색상; } h2 {text-shadow: 5px 5px 3px red} |
| text-transform | 텍스트에 포함된 영문자에 대한 대소문자를 설정하는 것 ( uppercase lowercase capitalize ) |
| font-variant | 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 설정 (small-caps) |
| text-overflow | 텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 쳐리할지 설정 overflow: hidden; text-overflow : (clip -자름 / ellipsis -...줄임) |
| white-space | 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정 (wrap, wordbreak, nowrap, ) |
| overflow | 기준선을 벗어나 넘칠 경우 값을 어떻게 처리할지 설정 (visible(기본) -보여주기 / hidden – 숨김 / auto – 넘어가는 text 자동스크롤 / scroll – 가,세로 스크롤바 생김 |
| font-size | 텍스트의 크기를 설정 (% px em rem) 상대, 절대적 크기 / 16px 웹 기본텍스트 사이즈 , 14px 모바일 기본텍스트 사이즈 - 반응형 |
| font-family | - 글꼴을 설정할 때 쓰이는 속성 - 하나의 글꼴도 설정할 수 있고, 여러개의 글꼴도 설정할 수 있다 - 여러 개의 글꼴이 설정 되어 있는 경우, 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 적용 - 글꼴 이름에 띄어쓰기가 있을 경우 반드시 ""따옴표로 감싸줘야 한다 p {font-family: 글꼴이름, 글꼴이름 } 사용자 컴퓨터에 있는 글꼴이 나온다 |
| font-weight | - 텍스트의 굵기를 설정 (기본 굵기: 400) - 숫자는 100(얇고) ~ 900(두꺼움) 사용 |
CSS - 구글폰트 적용법 ( font-family )
// 마음에드는 구글 폰트 link 받아서 <head> 복사
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
// css로 font를 적용해줘야 한다
// *전체 style , font추가 => font-family : "폰트이름" -> 구글폰트 싸이트에서 복붙
* { font-family: "Stylish", sans-serif; }'개발공부_Blog > HTML-CSS' 카테고리의 다른 글
| CSS - display (0) | 2021.11.27 |
|---|---|
| CSS - background (0) | 2021.11.27 |
| CSS - 선택자 (0) | 2021.11.27 |
| HTML - input 2 (0) | 2021.11.27 |
| HTML - input (0) | 2021.11.27 |
댓글