더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 12개의 일치하는 문서를 찾았습니다.
- webdevetc
@font-face로 aws s3 폰트 불러올 때 cors 에러 해결 방법
특정 웹폰트를 s3의 스태틱 저장소에 올려두고 @font-face를 사용하여 불러올 수 있습니다. 아래처럼 말이죠.@font-face { font-family: 'myFont'; url('s3 저장소 url') }}로컬 웹 환경에서 불러올 때는 아무 이상 없이 잘 가져왔는데 S3에서 불러오니 CORS(Cross origin resource sharing) 에러가 발생하였습니다. 원인과 해결 방법을 알아봅니다.# CORS 에러의 원인은?참조 Origin이 달라 발생하는 에러로 스크립트로 외부 리소스를 불러올 때 발생하는 합니...
Last Modified : 2023-02-24 10:57:00
Created : 2023-02-24 19:57:00 
etc윈도우즈 새로운 폰트를 추가하는 방법
윈도우즈에서 폰트를 설치하는 방법에 대하여 알아봅니다. 폰트를 설치하는 방법은 일단 폰트를 가지고 있는 경우와 없는 경우로 나뉠 수 있습니다.# 새로운 폰트가 없는 경우만약 폰트가 없다면 윈도우즈 키를 누르고 font라고 타이핑하면 '폰트 미리보기 및 관련설정'으로 이동할 수 있습니다. 이 곳에서는 현재 글꼴을 보거나 상단의 Microsoft Store에서 더 많은 글꼴 가져오기를 클릭할 수 있습니다. 클릭하면 Store에 있는 무료 또는 유료 글꼴을 다운받아 사용할 수 있으니 알아두시기 바랍니다.스크린샷) Windows Store의 글꼴# 폰트가 있는 경우 설치하기...
Last Modified : 2019-01-30 00:24:00
Created : 2019-01-25 20:44:06- css
CSS Property font
CSS를 사용하여 폰트를 사용하는 방법에 대하여 알아봅니다. 폰트를 설정에는 CSS의 font 프로퍼티를 사용할 수 있습니다. font는 폰트를 설정하는데 필요한 여러가지 옵션을 한 번에 적용할 수 있는 가장 많이 사용되는 프로퍼티 중 하나입니다.! 폰트 타입에 대하여 간단하게 알아보기먼저 폰트를 설정할 때 가장 먼저 생각하는 부분이 어떤 글꼴, 폰트 타입을 사용할 것인가입니다. 폰트의 종류는 어떤 글꼴이냐와 고딕체냐... 명조체냐의 Sans-serif와 Serif로 나뉘게 됩니다. 필기체도 있죠.sans-serifserif여기서 sans-serif는 고딕체에 해당하...
Last Modified : 2019-09-30 15:04:16
Created : 2018-12-20 09:18:56 
cssCSS Property color
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...
Last Modified : 2019-07-22 20:35:41
Created : 2018-07-09 20:34:12
csscss 폰트 바꾸기, font-face를 적용하기
무료 또는 유료 폰트를 자신의 홈페이지, 웹사이트에 적용하는 방법을 알아보려고 합니다. 어떻게 해야할까요?우선 CSS를 사용하여 폰트를 바꾸는 것이 가능합니다. 아래는 폰트를 다른 것으로 바꾼는 방법에 대하여 자세히 알아봅니다. 일반적으로 브라우저에서 사용하는 기본 폰트는 다를 수 있어 폰트 설정이 필요합니다. # CSS를 사용하여 웹폰트를 변경하기아래 예제를 봐주세요 만약 webisfree라는 폰트가 있는경우 아래처럼 @font-face에 사용할 폰트를 적용하는 코드입니다. 다음으로 body에 해당 폰트를 적용합니다.@font-face { fon...
Last Modified : 2019-08-06 22:00:23
Created : 2017-09-04 05:47:14- css
css 텍스트 외곽선 처리하기, stroke
CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법을 알아봅니다.외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.-webkit-text-stroke: 1px #000다만, 이 방법은 매우 편리한 방법이지만 아쉽게도 표준 방법은 아니라 웹킷 및 모질라 계열의 브라우저에서만 적용됩니다. 사용할 경우 아래처럼 css에 적용하시기 바랍니다..text-stroke { -webkit-text-strok...
Last Modified : 2019-08-06 00:04:30
Created : 2017-09-01 07:24:13 - etc
웹에 적용하는 폰트 확장자별 지원 알아보기
웹에 적용하는 폰트 확장자별 지원 알아보기eotsvgttfwoffwoff2...
Last Modified : 2017-06-08 14:38:02
Created : 2017-06-08 14:36:27 - etc
무료 폰트를 추천해봅시다~ 어떤 폰트가 요즘 핫한가요?
최근 여러 스타트업을 비롯한 기업에서 사용되는 폰트를 무료로 제공해주고 있습니다. 웹사이트의 큰 부분을 차지하는 폰트!! 무료로 적용할 수 있다면 폰트를 변경하는 것도 좋겠죠? 사실 무료 폰트가 많아진 만큼 어떤 폰트가 좋을지 모르겠습니다. 어떤 무료폰트가 좋을까요? 함께 추천해봅시다~ 어떤 폰트가 요즘 핫HOT!!! 한가요?# 무료폰트 정보아래는 무료 폰트관련 정보입니다. 아래 이 외의 더 좋은 폰트를 찾아 지속적으로 업데이트하려고 합니다.! 야놀자 야체 폰트바로가기 > http://cast.yanolja.com/detail/2171...
Last Modified : 2019-01-25 20:42:49
Created : 2017-04-27 02:56:56 - css
[CSS] 폰트의 선택 및 옵션, font-family
웹사이트의 폰트를 원하는 폰트로 직접 선택하여 결정할 수 있습니다. 폰트의 사용시 사용가능한 속성은 font-family를 통해 폰트를 선택하여 출력할 수 있습니다. 폰트 지정은 html 또는 body 태그, 즉 제일 상위의 태그에 선언을 꼭 해두어야합니다. 그 이유는 브라우저마다 Default 값의 폰트가 다르기 때문에 다른 스타일의 폰트가 사용되는 것을 방지하기 위함입니다. 간단한 사용방법은 아래와 같습니다..test { font-family: 폰트이름; }! 폰트에 대한 기본정보; 폰트 지정은 아래와 같이 두 가지 타입으로 지정이 가능합니다.a. 폰트명(fami...
Last Modified : 2018-08-29 10:02:26
Created : 2015-03-05 14:24:34 - html
[CSS] 폰트와 관련된 모든 속성들 알아보기
! 자간, 글자와의 사이값을 수정, letter-spacingletter-space: 수정값수정값의 단위는 pt, em, px 단위가 사용되며 특이한 점은 음수 사용이 가능하다는 점으로 0px을 입력할 경우 자간이 0이 되지 않고 기본값이 적용됩니다. 그렇기 때문에 자간을 없애기 위해서는 -(마이너스) 값이 필요합니다. 아래 예를 참고하세요.! letter-spacing 값이 0인 경우TEST letter-spacing!! letter-spacing 값이 -2px인 경우(음수)TEST letter-spacing!!! letter-spacing 값이 2px인 경우(양수...
Last Modified : 2015-11-03 18:51:46
Created : 2015-01-30 17:42:52