폰트
-
[html/css] Font Awesome 아이콘 사용하는 방법개발자 2021. 6. 7. 19:28
웹페이지를 보다보면 이미지가 아닌 텍스트 방식의 아이콘이 출력된 것을 볼 수 있다. 컴퓨터 기본제공 특수문자도 아니고 이미지가 아니면 어떻게 그런 아이콘을 만들 수 있었을까? 정답은 Font Awesome에 있다. Font Awesome은 텍스트 방식으로 아이콘을 만들 수 있게 해주는 솔루션이다. Font Awesome은 컴퓨터에서 기본적으로 제공하고 있는 아이콘을 출력하는 방식이 아닌, 특수하게 개발된 Font Awesome 아이콘 전용 폰트 파일을 이용하여 아이콘을 출력하는 방식이다.. 따라서 초보자는 쉽게 구현할 수 없는 아이콘도 Font Awesome만 이용하면 매우 간단하게 아이콘을 만들 수 있다. CSS를 이용하여 아이콘을 만드는 방식이기 때문에 속도도 빠르고 모든 웹브라우저에서 호환된다. h..
-
[html/css] font 속성에 대하여 (2)개발자 2021. 6. 2. 18:13
지난 게시물에 이어서 font에 대해서 마무리 하도록 하겠습니다 font-style font-variant font-weight 이 세가지 속성에 대해 설명을 했었습니다. ★font-size -폰트 크기를 지정한다 ** 폰트 크기를 나타내는 단위에는 두가지 종류가 있다 - 절대크기 font-size가 지정되지 않으면 기본 크기 16px **단위: px: 픽셀단위. 기본 16px pt: 일반적인 문서프로그램에 사용되는 크기 16px=12pt 그 밖에 인치(in), 밀리미터(mm), pc(1pc=12pt)등등 - 상대크기 말 그대로 상대적인 크기 기준이 되는 font-size 속성이 앞에서 지정되어있거나 감싸는 태그에 지정되어있어야함(상속된 속성) (기준이 없다면 디폴트값인 16px 기준) ★font-fam..
-
[html/css] font 속성에 대하여 (1)개발자 2021. 6. 2. 18:08
안녕하세요. html/css 속성 중 font 속성에 대하여 알아보려고 한다... 일단 css에서 font(폰트)에 관련된 주요 속성은 다음과 같다 font-style font-variant font-weight font-size font-family letter-spacing word-spacing line-height ★font-style - 폰트의 기울임에 관련된 속성이다 normal: 글꼴의 기본 형태로 표시 font oblique: 글꼴을 기운 형태로 표시 font italic: 기운 글꼴이지만 폰트에 따라 표현이 될 수도있고 안될수도 있기때문에 그땐 oblique를 사용 font inherit: 부모태그의 설정을 따름 font? font ? ★font-variant -작은 대문자로 나타내는 속..
-
[HTML/CSS] font-family 속성에 대하여개발자 2021. 6. 2. 17:36
html/css font-family에 대해서 알아보려고 합니다 ★font-family 속성이란..? css에서 원하는 글꼴을 지정할 때 font-family 속성을 사용한다. ☆사용 예 div { font-family: Verdana, "Times New Roman", arial; } ☆font-family에 대해서 -글꼴 집합 -맨 앞에 글꼴이 컴퓨터에 없다면 그 다음 글꼴을 사용한다. -지정한 글꼴이 모두 없다면 기본값으로 표시된다. -font-family는 family-name과 generic family로 나뉨 - family-name: 글꼴이름 generic family: 모양이 비슷한 글꼴 그룹 ☆font-family 사용 법!! 1. 하나 이상의 글꼴을 열거할 때 쉼표를 쓴다. 2. 글꼴 ..