text-styling
텍스트 색(color 라는 property 사용)
텍스트에 색깔을 설정하는 방법
색을 지정해주는 방법이 몇 가지가 있다.
1. 색이름을 지정해준다.
모든 색이 있지는 않지만 브라우저에서 140개의 색을 지원한다.
2. RGB값을 작성한다.
모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있다. 이 표현 방식이 바로 'RGB'이다.
3. HEX값(16진법)
HEX 값은 단순히 RGB 값을 16진법으로 표현한 방식이다.
몇 가지 텍스트 스타일링
텍스트의 굶기를 정하는 font-weight.
- 100 부터 900 까지의 값들을 가질 수 있다. (100이 가장 얇고, 900이 가장 굵다.)
- font-weight : normal 이 400과 같다(default)
- font-weight : bold가 700과 같다.
- font-weight : 110 처럼 없는 값을 사용하면 기본 굵기가 나온다.
- font과 브라우저에 따라서 사용 가능한 weight가 정해져있다.
텍스트의 정렬을 정하는 text-align(정렬).
- text-align : left(default)
- text-align : center
- text-align : right
- div 태그의 content도 정렬할 수 있다.
텍스트의 꾸미는 용도인 text-decoration.
텍스트를 몇 가지 방법으로 꾸밀 수 있다.
사실 옵션도 별로 없고, 디자인적으로 이쁘지는 않다.
- text-decoration : underline (글에 밑줄)
- text-decoration : overline (글위에 선)
- text-decoration : line-through (줄이 글을 관통한다. 즉 글을 지우는 듯한 효과)
- text-decoration : none(default)
a tag(기본적으로 밑줄이 그어져 있다.)와 가장 많이 사용한다.
사실 꾸밈을 없애기 위해 많이 사용한다.
텍스트를 가운데 정렬 하고싶다면?
block level element(가로줄 전체를 차지하고 있다.)는 text-align : center 사용 시 center가 되지만,
inline level element는 text-align : center 사용 시 center가 되지 않는다.
해결방법은 무엇일까?
- if a tag 입력 시 div로 감싸준다.
- div를 text-align : center 해준다.
폰트의 크기를 변경하고 싶다면 font-size
텍스트의 크기를 설정하는 방법은 크게 두 가지로 나눌 수 있다.
1. 절대적인 방법(Absolute) : 다른것들에 영향을 받지 않는다.
- px
- pt : point는 px보다 1.33배 정도 크다.
2. 상대적인 방법(Relative)
- em : %와 비슷한데 %에서 100을 나눈다고 생각하면 된다, 1em = 100%, 2em = 200% 와 같은효과
- % : %로 font 크기를 계산시 부모요소의 폰트크기를 기준으로 한다.
line-height(줄 간격을 조절)
line-height를 사용하면 줄간격을 조절할 수 있다.
파란줄이 content area이다.
font-family와 font-size에 따라서 content area가 정해지고,
line-height는 content area에 영향을 주지 않는다.
line-height를 통해서 각 줄이 실질적으로 차지하는 공간을 정해줄 수있다.
위의 두번째 처럼 line-height를 99px을 줄경우 content area를 보고 40px이 남기 때문에 위아래로 20px의 공간이 추가로 생긴다.
반대로 40px로 설정하면 content area 보다 19px 적기에 위아래로 -9.5px의 공간이 줄어든다.
폰트 설정을 할 수 있는 font-family
폰트는 크게 다섯 종류로 나눌 수 있다.
1. Serif : Times, Times New Roman, 궁서체, 다 끝에가 살짝씩 꼬부라져있다.
2. Sans-Serif : Arial, 굴림체, 꼬부라진게 없다. 그래서 깔끔한 디자인을 하기에 좋다.
3. Monospace :
- Courier, Courier New
- 모든 글자 폭이 똑같다. 모든 글자가 같은 넒이를 차지하기 때문에 프로그래밍 폰트로 쓰인다.
4. Cursive : 필기체
5. Fantasy : 특이한 나머지 글꼴
Times New Roman는 여러 단어로 이루어진 폰트 이름이기 때문에 ""안에 넣어준다.
Cursive, Fantasy는 좀 지저분해 보일 수 있어서 긴 글에는 잘 안쓰이고 짧은 글에 조금씩 사용된다.
사이트에 입히는 방법을 알아보자.
- font-family : Arial, Times, Sans-Serif
위의 모든 font가 사용자의 컴퓨터에 없을 수도 있다.
그래서 그런 경우를 대비해서 제2의 폰트를 설정할 수도 있다.
일단 브라우저는 Arial를 찾고, 만약 이게 없으면 Times를 사용하게 된다.
보통 제1의폰트, 제2의폰트 까지만 써주고 마지막 대안으로는 폰트 종류를 쓴다.
즉 브라우저는 먼저 Arial이 있는지 확인하고 만약에 실패하면 Times를 쓰려고 시도하고 이것마저 실패한다면 설치되어 있는 Sans-Serif 폰트 중에 하나를 찾아서 사용하게 된다.
여기까지의 과정은 사용자가 가지고 있는 폰트를 사용하는 방법을 보았다.
구글 웹폰트
위의 방법 모두 설치된 font만 사용가능 했다.
우리가 직접 폰트 파일을 제공해 주면 폰트를 사용할 수 있다.
폰트 파일을 제공해 주는 방법이 몇가지가 있는데 요즘 가장 많이 쓰이는 것은 구글 폰트 이다.
구글 폰트 : https://fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
정식 지원하지 않는 약간 베타 출시한 폰트들을 모아둔 곳 : https://fonts.google.com/earlyaccess
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
<link> tag 복사 후 폰트를 사용하고 싶은 페이지에 붙여 넣으면 된다.
<head> 안에 넣는다.
font-family 문법은 우선 Roboto를 사용해보려고 시도해보고 만약에 사용 못하면 사용가능한 다른 Sans-Serif 폰트를 사용하라는 뜻이다.
폰트 파일 사용하기
내가 직접 가지고 있는 폰트 파일을 사용하는 방법
내가 다운로드 받고 싶은 폰트를 다운받아 fonts 라는 폴더를 만들고
CSS 파일에 @font-face를 작성 후 src:url("../fonts/폰트명"); font-family: 이 폰트에 이름을 준다.
<span> tag
<div> tag는 그냥 요소들을 묶어주는 역할을 한다.
다른 큰 역할은 없지만 여러 요소들을 묶어서 스타일링 해줄 수 있다는 장점이 있다.
<div> 는 content를 단독적인 새로운 줄에 놓아버린다.
<span> 과 <div> 의 공통점은 다른 큰 역할 없이 요소들을 묶어준다는 것이다.
하지만 굉장히 큰 차이점이 있다.
<span> 은 원래 있던 글의 위치에 영향을 주지 않는다.
특정 텍스트만 스타일링 해주고 싶을 때 <span> 을 사용하면 된다.
'HTML_CSS > HTML & CSS' 카테고리의 다른 글
| Codeit_부트스트랩(bootstrap) (0) | 2021.11.30 |
|---|---|
| Codeit_도움이 되는 사이트 (0) | 2021.07.07 |
| Codeit_크롬 개발자 도구 (0) | 2021.07.06 |
| Codeit_코멘트 (0) | 2021.07.06 |
| Codeit_CSS 파일 연결과 스타일을 적용하는 다양한 방법 (0) | 2021.05.25 |