1. 폰트 스타일 지정 방법
CSS에서는 폰트에 다양한 속성을 지정 하는 것이 가능하며 폰트의 스타일을 꾸며주는 속성은 보통 해당 기기(랩탑 or 모바일 기기) 안에 설치 되어있는 폰트로 적용하는 방법이 있지만, 적용하고 싶은 폰트가 없을 경우 다음 세가지 방법으로 외부 사이트의 경로에 존재하는 폰트 스타일로 지정 할 수 있습니다.
- 마음에 드는 폰트를 외부 사이트로 임포트 하는 방식입니다. CSS 파일 안에
@import속성을 주어 url 안에 해당 폰트의 경로를 입력하면 되며, 대표적으로 google Fonts에서 해당 폰트들을 제공 받게 됩니다.@import url('https://fonts.googleapis.com/css?family=Roboto'); body { font-family: 'Roboto', sans-serif; }
head영역 안에link태그를 삽입 후 href 경로로 외부 폰트 경로를 지정 해줍니다.<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> </head> /*css 파일 내*/ body { font-family: 'Roboto', sans-serif; }
@font-face키워드를 사용해 사용자가 폰트를 직접 커스터마이징 하는 방법이 있습니다.@font-face { font-family: 'Customed Sans'; src: url('https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bbck.woff2') format('woff2'); }
2. 폰트 CSS 속성 종류
폰트에 대한 CSS 속성들의 상세한 내용은 다음 사이트를 참조하는 것이 보다 자세하게 확인이 가능하나, 대표적인 CSS 속성들을 살펴보자면 다음과 같습니다.
font-size: 폰트의 사이즈를 설정합니다. px를 기본 단위로 사용하며 em, rem, 등의 상대 단위도 사용이 가능합니다.
font-weight: 폰트의 굵기를 설정합니다. 이하 단위는 font-size와 동일합니다.
font-style: 폰트의 스타일을 지정합니다. 아주 기본적인 폰트 스타일을 구비하기 떄문에 종류도 많이 않을 뿐더러 이 속성을 사용 할때는 주로 italic을 사용합니다.
text-decoration: 해당 텍스트의 라인을 지정합니다. 밑줄(underline), 가운데 줄(line-through), 윗줄(overline) 값이 존재합니다.
line-height: 텍스트의 높이 영역을 지정 합니다. 이 경우 display 값이 block 혹은 inline-block일 경우에만 지정이 가능하며 이 속성에 값을 부여시 텍스트 마다의 위아래 간격이 넓어진다고 생각하면 됩니다.
text-align: 텍스트의 정렬 방향을 의미합니다. 주로 left, right, center중 하나를 사용합니다.
vertical-align: 텍스트가 inline일 경우 수직으로 정렬하는 전용 속성입니다. 주로 top, middle, bottom중 하나를 사용합니다.
text-indent: 텍스트의 들여쓰기 정도를 나타냅니다. 단위는 size나 weight 등과 같이 사용합니다.
text-transform: 텍스트의 대소문자 변경 여부를 나타냅니다. 주로 각 단어의 첫 글자를 대문자로 지정하거나(capitalize) 전체 문자를 대문자(uppercase) 혹은 소문자(lowercase)로 만드는데 사용합니다.
word-break: 텍스트의 줄바꿈 여부를 설정합니다. 텍스트가 박스의 너비를 넘길 시 그 경계를 무시하고 줄을 바꾸거나(break-all) 해당 단어가 박스의 너비를 넘기려 할 경우 줄을 바꾸는(break-word) 경우 등을 설정합니다.
overflow-wrap: 해당 텍스트가 박스의 범위를 넘어갔을 경우 범위를 넘은 텍스트를 어떻게 처리할지를 설정합니다. 이 설정은 word-break의 값들도 사용 가능하지만 숨기거나(hidden), 줄바꿈 없이 그 상태로 보이게 하거나(visible) 줄바꿈은 하되 스크롤을 생성하여 내려 보게 할 수(scroll)있습니다.
인생은 본인의 삶을 곱씹어보는 R과 타인의 삶을 배워 나아가는 L의 연속이다.