CATEGORIES
CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법을 알아봅니다.외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.-webkit-text-stroke: 1px #000다만, 이 방법은 매우 편리한 방법이지만 아쉽게도 표준 방법은 아니라 웹킷 및 모질라 계열의 브라우저에서만 적용됩니다. 사용할 경우 아래처럼 css에 적용하시기 바랍니다..text-stroke { -webkit-text-stroke: 1px #000;}이제 텍스트에 외곽선이 선명하게 나타납니다.그렇다면 또 다른 방법을 알아봅니다.# -webkit-text-stroke 크로스 브라우징 방법아래와 같
Last Modified : 2019-08-06 00:04:30
무료 또는 유료 폰트를 자신의 홈페이지, 웹사이트에 적용하는 방법을 알아보려고 합니다. 어떻게 해야할까요?우선 CSS를 사용하여 폰트를 바꾸는 것이 가능합니다. 아래는 폰트를 다른 것으로 바꾼는 방법에 대하여 자세히 알아봅니다. 일반적으로 브라우저에서 사용하는 기본 폰트는 다를 수 있어 폰트 설정이 필요합니다. # CSS를 사용하여 웹폰트를 변경하기아래 예제를 봐주세요 만약 webisfree라는 폰트가 있는경우 아래처럼 @font-face에 사용할 폰트를 적용하는 코드입니다. 다음으로 body에 해당 폰트를 적용합니다.@font-face { font-family: webisfree; src: url('./static/fonts/webisfree.ttf');}body { font-family: webis
Last Modified : 2019-08-06 22:00:23웹페이지의 폰트를 부드럽게 사용하기 위해서 css의 font-smoothing 속성을 사용할 수 있습니다. 아래는 이를 적용하는 방법과 효과에 대하여 알아봅니다.# CSS의 -webkit-font-smoothing 속성 알아보기CSS의 스타일 속성 중 하나로 -webkit-font-smoothing 속성이 있습니다. 이 속성을 적용하면 브라우저에 표현되는 텍스트가 렌더링될 때 부드럽게 표현되는 장점이 있습니다.즉 폰트를 더 부드럽게 사용하기 위해서 사용하는 스타일 속성입니다. 이런 이유로 많은 웹페이지에서 사용되는 텍스트 스타일 속성입니다. 아래와 같이 사용합니다.-webkit-font-smoothing: antialiased; 다만 이 속성은 표준 속성이 아니라 모든 브라우저 및 환경에서 구현되지 않습니다
Last Modified : 2020-07-17 20:20:27웹사이트의 폰트를 원하는 폰트로 직접 선택하여 결정할 수 있습니다. 폰트의 사용시 사용가능한 속성은 font-family를 통해 폰트를 선택하여 출력할 수 있습니다. 폰트 지정은 html 또는 body 태그, 즉 제일 상위의 태그에 선언을 꼭 해두어야합니다. 그 이유는 브라우저마다 Default 값의 폰트가 다르기 때문에 다른 스타일의 폰트가 사용되는 것을 방지하기 위함입니다. 간단한 사용방법은 아래와 같습니다..test { font-family: 폰트이름; }! 폰트에 대한 기본정보; 폰트 지정은 아래와 같이 두 가지 타입으로 지정이 가능합니다.a. 폰트명(family name) : 굴림, 궁서, arial, helvetica, verdana 등b. 폰트집합(generic family) : 폰트집합은 비슷
Last Modified : 2018-08-29 10:02:26! 자간, 글자와의 사이값을 수정, letter-spacingletter-space: 수정값수정값의 단위는 pt, em, px 단위가 사용되며 특이한 점은 음수 사용이 가능하다는 점으로 0px을 입력할 경우 자간이 0이 되지 않고 기본값이 적용됩니다. 그렇기 때문에 자간을 없애기 위해서는 -(마이너스) 값이 필요합니다. 아래 예를 참고하세요.! letter-spacing 값이 0인 경우TEST letter-spacing!! letter-spacing 값이 -2px인 경우(음수)TEST letter-spacing!!! letter-spacing 값이 2px인 경우(양수)TEST letter-spacing! letter-spacing를 응용한 display 속성 응용하기나란한 두 개의 블럭을 위치하기 위해서 사
Last Modified : 2015-11-03 18:51:46오늘은 CSS에서 많이 쓰이는 font-size에 대하여 알아보겠습니다. 사실 font-size는 간단한 부분이라 그냥 간과하기 매우 쉽죠. 하지만 폰트는 매우 중요한 부분 중 하나입니다. 그 이유를 알아보면...폰트는 전체 페이지에 모두 적용된다폰트 스타일의 차이가 콘텐츠의 중요도를 결정한다이런 이유입니다. 그럼 먼저 폰트 옵션으로 선택 가능한 것 알아보겠습니다.i. ptii. pxiii. emiv. %(percent)위와 같이 총 4가지 타입이 있습니다. 위에서 부터 알아보면 pt는 예전에 대부분 쓰이던 단위로 inch(인치)를 기준으로 값을 가지며 1pt는 1/72 inch의 값을 가집니다. 절대적인 크기를 가지며 이는 px과 같습니다.그 다음, px은 pixel(픽셀)을 의미하며 하드웨어가 가진 픽셀
Last Modified : 2018-08-29 10:02:35
CSS에서 텍스트(폰트)에 특정한 색, 원하는 색을 사용할 경우 프로퍼티 color를 사용할 수 있습니다. color 프로퍼티의 값이 해당 엘리먼트에 적용되게됩니다. 아래는 사용 문법입니다.eleement { color: color | inherit | initial }@ CSS color property- CSS1CSS의 color 프로퍼티는 사용할 색을 값으로 선택합니다. 이때 HEX, RGB, RGBA, HSL, HSLA 값을 사용할 수 있습니다. 즉 아래와 같이 사용됩니다.color: #f00;color: red;color: #ff0000;color: rgb(255, 0, 0);color: hsl(100, 50%, 30%);! color 값으로 투명도 설정하기색에 투명도를 설정할 수 있으며 이때는
Last Modified : 2019-07-22 20:35:41
윈도우즈에서 폰트를 설치하는 방법에 대하여 알아봅니다. 폰트를 설치하는 방법은 일단 폰트를 가지고 있는 경우와 없는 경우로 나뉠 수 있습니다.# 새로운 폰트가 없는 경우만약 폰트가 없다면 윈도우즈 키를 누르고 font라고 타이핑하면 '폰트 미리보기 및 관련설정'으로 이동할 수 있습니다. 이 곳에서는 현재 글꼴을 보거나 상단의 Microsoft Store에서 더 많은 글꼴 가져오기를 클릭할 수 있습니다. 클릭하면 Store에 있는 무료 또는 유료 글꼴을 다운받아 사용할 수 있으니 알아두시기 바랍니다.스크린샷) Windows Store의 글꼴# 폰트가 있는 경우 설치하기가지고 있는 폰트가 있다면? 이 경우 윈도우즈에 폰트를 추가하여 설치해야합니다. 그러기 위해서 먼저 알아야 할 것이 윈도우즈에서 폰트가 있는 위
Last Modified : 2019-01-30 00:24:00최근 여러 스타트업을 비롯한 기업에서 사용되는 폰트를 무료로 제공해주고 있습니다. 웹사이트의 큰 부분을 차지하는 폰트!! 무료로 적용할 수 있다면 폰트를 변경하는 것도 좋겠죠? 사실 무료 폰트가 많아진 만큼 어떤 폰트가 좋을지 모르겠습니다. 어떤 무료폰트가 좋을까요? 함께 추천해봅시다~ 어떤 폰트가 요즘 핫HOT!!! 한가요?# 무료폰트 정보아래는 무료 폰트관련 정보입니다. 아래 이 외의 더 좋은 폰트를 찾아 지속적으로 업데이트하려고 합니다.! 야놀자 야체 폰트바로가기 > http://cast.yanolja.com/detail/2171개인적으로 이쁘다고 생각하는 폰트입니다^^ 약간 가벼워보일 수도 있으나 아기자기한 폰트를 좋아한다면? 추천합니다 ~최근 여러 스타트업을 비롯한 기업에서 사용되는 폰트를 무료로
Last Modified : 2019-01-25 20:42:49CSS를 사용하여 폰트를 사용하는 방법에 대하여 알아봅니다. 폰트를 설정에는 CSS의 font 프로퍼티를 사용할 수 있습니다. font는 폰트를 설정하는데 필요한 여러가지 옵션을 한 번에 적용할 수 있는 가장 많이 사용되는 프로퍼티 중 하나입니다.! 폰트 타입에 대하여 간단하게 알아보기먼저 폰트를 설정할 때 가장 먼저 생각하는 부분이 어떤 글꼴, 폰트 타입을 사용할 것인가입니다. 폰트의 종류는 어떤 글꼴이냐와 고딕체냐... 명조체냐의 Sans-serif와 Serif로 나뉘게 됩니다. 필기체도 있죠.sans-serifserif여기서 sans-serif는 고딕체에 해당하는 폰트 타입입니다. Serif에 비교하여 단순하고 끝에 휘어지거나 돌출된 부분 등이 생략된 모습을 가집니다. sans는 프랑스어로 없다는 뜻을
Last Modified : 2019-09-30 15:04:16웹에 적용하는 폰트 확장자별 지원 알아보기eotsvgttfwoffwoff2
Last Modified : 2017-06-08 14:38:02