text 관련 CSS
color
글자 색을 지정하는 스타일 속성 값으로는 HEX코드나, rgb(), 색상 명 등이 쓰일 수 있다.
https://velog.io/@chyori/CSS-%EA%B8%B0%EB%B3%B8 - 색상 참조<h1> 안녕하세요 </h1> h1 { color : blue; }
line-height
줄 간격을 조절하는 속성. 줄 간격을 조절함으로써 문서의 가독성을 보다 향상 시킬 수 있다. 고정단위나 상대단위를 사용할 수 있고, 단위 없이 숫자만 입력할 경우 em과 동일하게 인식한다. 만약 font-size가 12px 이고, line-heigth 값이 1.5라고 한다면 줄 간격은 12×1.5 = 18px이 된다.
text-decoration
문자에 밑줄 또는 취소선 등을 넣을 수 있는 속성
none - 아무런 효과를 주지 않는다. ( 기본값 )
underline - 밑줄을 적용한다.
overline - 윗줄을 적용한다.
line-through - 관통하는 줄을 적용한다. ( 주로 취소 선으로 사용 )
inherit - 부모 요소의 속성을 물려받는다.text-align
문단의 정렬을 조절하는 속성 가운데, 우측 정렬로 사용 가능
left - 문자들을 좌측 정렬 ( 기본값 )
right - 문자들을 우측 정렬
center - 문자들을 중앙 정렬
justify - 문자들을 양쪽 정렬 한다. 줄 바꿈이 일어날 때, 해당 줄의 문자를 양 끝에 맞추어 정렬text-indent
문단의 들여쓰기를 조절하는 속성 고정 단위나 상대 단위를 사용하고 값이 양수 일 때는 들여쓰기, 음수일 때는 내어 쓰기가 된다.
text-transform
대소문자가 있는 경우 모두 대문자로 변경하거나 소문자로 변경할 수 있다.
none - 아무런 변화를 주지 않는다. ( 기본값 )
capitalize - 각 단어의 첫 번째 글자를 대문자로 변환한다.
uppercase - 모든 글자를 대문자로 변환한다.
lowercase - 모든 글자를 소문자로 변환한다.
inherit - 부모 요소의 속성을 상속 받는다.letter-spacing
글자 간의 간격을 줄 수 있는 속성 고정 단위나 상대 단위를 사용한다 양수일 경우 간격이 넓어지고, 음수일 경우 간격이 줄어든다.
word-spacing
단어 간의 띄어쓰기 간격을 조절한다. 사용법은 letter-spacing과 똑같다.
vertical-align
보통 인라인 요소에 쓰이는 속성으로 요소와 요소간의 수직 정렬을 조절하는 속성
baseline - 텍스트의 베이스 라인을 기준으로 정렬 ( 기본값 )
sub - 아래 첨자로 표현
super - 윗 첨자로 표현
top - 해당 줄의 가장 높은 요소를 기준으로 맨 위에 정렬
text-top - 부모 요소의 글자를 기준으로 맨 위에 정렬
bottom - 해당 줄의 가장 낮은 요소를 기준으로 맨 아래에 정렬
text-bottom - 부모 요소의 글자를 기준으로 맨 아래에 정렬
middle - 부모 요소의 글자를 기준으로 가운데 정렬
inherit - 부모의 속성을 상속 받음white-space
줄 바꿈에 대한 설정 white-space를 통하여 줄 바꿈이 아에 일어나지 않도록 처리할 수 있다.
normal - 기본값
nowrap - 줄 바꿈을 하지 않는다.
pre - pre태그와 동일하게 그대로 보여진다.
inherit - 부모의 속성을 상속 받는다.
Font ( 글꼴 )
font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있기도하다. 올바른 글꼴을 선택하는 것은 독자가 웹사이트를 경험하는 방식에 큰 영향을 미친다. 읽기 쉬운 글꼴을 사용하는게 좋고 올바른 색상과 텍스트의 크기를 선택하는 것도 중요하다.
서체의 종류와 스타일
font-family ( 글꼴 집합 )
글씨의 서체를 지정하는 속성이다. 바탕, 돋움, 윤고딕 등등 주의할점은 방문자도 해당 서체를 가지고 있어야 제대로 font-family가 적용이 된다. 방문자가 해당 글꼴이 없을 수도 있기때문에 대체할 글꼴로 여러 이름을 유지해한다. 이러한 서체들을 '웹 안전 서체' 라고 부른다. 글꼴 이름은 쉼표로 구분해야 한다. 한글과 영문을 하나의 서체로 사용할 수도 있으나 대체로 한글은 한글서체 영문은 영문 서체를 사용한다.
body { font-family : '폰트명'; }서체의 종류
서체의 종류는 크게 5가지가 있다.
Serif ( 세리프 )
세리프 형태의 서체는 글씨에 꺾쇠가 붙어져 있는 서체이다. 형식과 우아함의 감각을 만든다. 신문이나 인쇄물 등에서 자주 사용하는 서체이다.
Sans-Seif ( 산세리프 )
산세리프에서 'Sans'는 '없을'을 뜻하는 프랑스어로 세리프가 없는 글씨체를 말한다. 세리프에 비해 더 깔끔해 보이고 대체로 더 세련되어 보인다. 잡지와 같은 매체에서 많이 쓰인다.
Monospace ( 모노스페이스 )
모노스페이스라는 서체는 고정 폭 서체이다. A는 넓고, i는 좁은 글씨 폭을 가지고 있기 때문에 가독성이 높아진다.
Cursive ( 커시브 )
커시브 형태는 커브가 많이 들어간 필기체 같은 형태를 말한다. 딱딱한 서체들에 비해서 인간적인 면은 보여줄 수 있다. 하지만 커브가 심한경우 가독성을 떨어트려서 강조되는 제목 부분 정도만 사용하는 것이 좋다.
Fantasy ( 판타지 )
이름에서도 느껴지듯이 일반적인 서체가 아닌 개성 있고 장식성이 많은 서체들을 나타낸다. 굉장히 특이하고 대부분 많이 꾸며져 있기 때문에 강조되는 제목 부분정도만 사용하는 것이 좋다.
각종 폰트관련 CSS
font-size
글씨의 크기를 나타내는 속성 고정단위와 상대단위로 나뉘어져 있다.
https://velog.io/@chyori/CSS-%EA%B8%B0%EB%B3%B8 - 단위 참조font-style
글씨의 스타일을 주는 속성 주로 이텔릭 형식으로 쓸때 많이 사용
normal - 기본적인 형태
italic - 이탤릭체로 보여준다.
inherit - 상위 요소의 font-style를 상속받는다.font-weight
글씨의 굵기를 조절하는 속성 'bold'와 같은 이름으로 넣을 수 있고 100부터 900까지 백 단위 숫자로도 입력 가능하다.
normal 또는 400 - 기본적인 굵기
bold 또는 700 - 굵은 글씨를 표현 한다.
inherit - 상위 요소의 값을 상속 받는다.font-variant
대소문자에 대한 스타일로, 소문자를 작은 대문자 형태로 표현 가능
normal - 기본적인 형태
small-caps - 소문자를 작은 대문자의 형태로 보여준다.
inherit - 상위 요소의 값을 상속 받는다.
출처 - http://webberstudy.com/html-css/css-1/text-style/
https://www.w3schools.com/css/css_text_shadow.asp
웹폰트 ( Web Font )
방문자의 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다. 웹폰트를 적용하는 방식은 2가지가 있는데 하난 CDN ( Contents Delivery Network ) 방식이고 하난 @font-face 방식이다.
CDN 이란
- 지리, 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술
- 느린 응답속도 / 다운로딩 타임을 극복하기 위한 기술
ex) 온라인게임 OBT나 정식 서비스 시작시점에 많은 사람들이 다운로드를 많이 하기때문에 서버다운이 될 수 있어서 CDN이 필수적으로 사용된다.
내 홈페이지가 한국에 있고 미국에 거주하는 이용자가 사이트에 접속하려 할때 물리적으로 거리가 멀기때문에 미국근처에있는 서버에서 CDN을 요청받아 지연되는 시간을 줄일 수 있다.CDN 장점
1. 웹사이트 로딩 속도 개선
2. 인터넷 회선 비용 절감
3. 컨텐츠 제공의 안정성
4. 웹사이트 보안 개선
@font-face 방식
@font-face안에는 font-family, src, font-style, font-weight 속성을 사용할 수 있다.
font-family
CSS 문서에서 사용할 웹폰트 패밀리명 이다.
@font-face { font-family : 'NanumSquareRound'; src : url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');위의 코드는 내가 사용할 웹폰트 패밀리명을 NanumSquareRound으로 하겠다 라고 선언한 예이다. @font-face에서 선언한 font-family명과 다른 css선택자에서 사용할 font-family명이 반드시 같아야 하는건 아니지만 유지보수를 위해 폰트명을 동일하게 해주는 것이 좋다.
src
폰트의 경로와 해당 format을 적어준다. cdn일경우 url('')안에 해당 서버에서 가져온 링크를 적고 local일 경우 경로를 적어주면 된다. ,를 찍고 여러 확장자를 써주고 맨 마지막에 ;만 해주면 된다.
@font-face { font-family: 'Helvetica-Black'; src: url('../font/Helvetica-Black.eot'); src: url('../font/Helvetica-Black.eot?#iefix') format('embedded-opentype'), url('../font/Helvetica-Black.otf') format('opentype'), url('../font/Helvetica-Black.woff') format('woff'), url('../font/Helvetica-Black.woff2') format('woff2');
