자홍 작가님의 친절한 가이드로 나날히 승승장구(?)하고 있음을 셀프로 느끼는 중입니다. 이모티콘 작업도 그렇고 블로그 글쓰기도 그렇고 역시 정답은 무조건 많이 시도하는 것입니다. 자홍 작가님도 그렇게 말씀하셨고요. 무조건 많이 그려볼 수 밖에 없는 것 같다고요. 맞는 말입니다. 그렇기에 요즘에는 이모티콘 모임 시간을 많이 늘려나가고 있습니다. 혹시 대전에서 이모티콘 모임을 찾으신다면 저희 모임에 오세요! 대전 카톡 라인 OGQ 이모티콘 스티커 제작 모임 #이모티콘 #스티커 #OGQ #움티 #멈티 #생산적 #취미 #부업 #아이패드 #클립스튜디오 open.kakao.com 이쪽으로 입장 후 인사와 간단 소개만 먼저 해주심 됩니다. 다시 본론으로 돌아와서 이번에는 클립스튜디오에서 텍스트 레이어를 여러 개 선택..
홈페이지나 티스토리같은 HTML이 수정 가능한 오픈형 플랫폼에서는 텍스트 폰트 수정이 가능합니다. 글꼴 변경은 CSS에서 간단하게 제어할 수 있는데 font-family라는 옵션을 사용하여 원하는 글꼴을 적용시킬 수 있습니다. font-family에는 다음의 속성이 적용됩니다. 속성 1. font-family : 폰트명 2. font-family : initial 3. font-family : inherit 1번은 가장 기본 형태로 원하는 글꼴명을 입력하는 것입니다. 글꼴명에 띄어쓰기가 있는 경우에는 따옴표를 사용하여 하나로 묶어줍니다. 큰 따옴표든 작은 따옴표든 상관 없습니다. 예를 들어서 noto sans kr 이라는 폰트를 적용시키고자 한다면 "noto sans kr" 이라고 입력하면 됩니다. 만약..
구글의 블로그 플랫폼인 블로거에 대해 하나 하나 알아가는 중입니다. 기본적으로 블로거도 티스토리와 동일한 오픈소스 플랫폼이라 HTML이나 CSS 편집이 가능합니다. 다만 관련 자료가 아직 현저하게 적기 때문에 블로그를 운영함에 있어서 첫 시작으로 구글 블로거(Blogger)를 선택한다면 다소 어려울 수 있습니다. 하지만 구글 블로거도 티스토리와 마찬가지로 사람들 쓰라고 만든 콘텐츠 아니겠습니까? 그러니 천천히 알아가면서 새롭게 알게된 부분을 꾸준히 글로 작성하겠습니다. 오늘은 블로거의 글꼴을 변경하는 방법입니다. 스킨마다 다른 글꼴을 지원하겠지만 블로거의 1세대 기본 스킨으로 설정하니 한글은 명조체가 기본 글꼴이더군요. 가독성여 별로 좋아보이지 않아서 고딕 계열로 변경하려고 합니다. 글씨체에서 마우스 오..
제목 그대로입니다. 이와 관련해서 디자인으로 너무나 유명한 회사 중 하나인 어도비(Adobe)에서도 정확한 개념을 정리한 웹문서가 있습니다. 아래의 글입니다. 어도비에서 제공하는 공식 문서 어도비 문서의 영어 버전을 그대로 한국어로 번역했기 때문에 serif는 한국어로 명조가 되며 sans-serif는 고딕이 됩니다. 아래아 한글때부터 꾸준히 워드 프로그램을 사용해보신 분들이라면 익히 들어본 바로 그 글꼴인 명조와 고딕! 이 두 글꼴의 구분은 너무나도 간단 명료합니다. serif vs sans-serif (from Adobe) 딱 이겁니다. 글씨에 삐침이 있느냐 없느냐로 쉽게 구별할 수 있죠. 한글과 마찬가지로 영어에서도 명조와 고딕 구별이 됩니다. 이렇게 끝 부분의 획 처리가 있느냐 없느냐로 쉽게 구별..
HTML에서 글꼴을 스크립트 혹은 링크로 로드하는 방법이 있듯 CSS에서도 @font-face를 사용해 원하는 폰트(글꼴) 파일을 불러와 적용하는 방법에 대해 알아보겠습니다. 방법은 너무나도 간단하고 쉽습니다. 먼저 사용하고자 하는 글꼴 폰트 파일을 준비합니다. 그전에 웹에서 사용 가능하고 여러 브라우저에서 지원이 가능한 폰트 확장자에 대해 알아볼 필요가 있습니다. 웹용 폰트 확장자 다음의 확장자들이 있습니다. 보시죠. Internet Explorer Chrome Safari Opera FireFox TTF/OTF IE9 이상 O O O O SVG IE9 이상 O O O X EOT IE6 이상 X X X X WOFF X O O O O WOFF2 O O O O O 현재 인터넷 익스플로러(Internet E..
이번에는 정말 간단한 CSS 스타일을 알아봅시다. HTML에서 특정 단어를 두껍게 만들기 위한 태그(요소)로는 태그를 사용합니다. b는 Bold의 약자죠. 두껍게 처리하고자하는 단어를 태그로 감싸주면 해당 텍스트만 두껍게 표시가 됩니다. 이것을 CSS에서도 얼마든지 적용시킬 수 있습니다. 두껍게 See the Pen CSS font-weight 두껍게 / 보통 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 살펴보시기 바랍니다. 태그는 설명을 했으니 더 이상 언급을 하지 않고 바로 다음에 보이는 태그를 살펴봅시다. 태그는 인라인 요소로 주로 문장의 특정 단어를 강조하고자 할 때 간편하게 사용할 수 있는 대표 HTML 요소입니다. CSS에서 span 태그를 선택 후 다음의 CSS ..
이 방법은 메인 자막을 변경하는 방법입니다. 무슨 뜻이냐면 가장 많이 나오는 일반적인 대사의 경우 변경이 되지만 특수 자막의 경우는 변경이 되지 않을 수 있다는 이야기입니다. 말로는 설명이 어려울 수 있으니 먼저 주술회전의 스크린샷 이미지를 보시면서 이야기를 이어나가겠습니다. 물론 자막 제작자가 어떤 태그를 사용해서 ASS 자막을 제작했느냐에따라 결과값는 달라집니다. 제목에도 언급했듯 동영상 플레이어 프로그램은 팟플레이어를 사용했습니다. 자막 예시 (주술회전) 현재 ASS 자막을 이용해서 재생하고 있는 주술회전의 모습입니다. 폰트는 a시네마체 입니다. 정상적으로 잘 적용이 된 모습입니다. 하지만 일부 대사는 이렇게 a시네마체가 적용되지 않은 기본 글꼴로 보여지는 모습입니다. 아마 대사의 분위기와 쓰임이 ..
이것이 어떤 글꼴인지 알려달라는 지인의 요청때문에 시작하게된 이번 퀘스트! 해당 글꼴은 태영화체라는 폰트였습니다. 영화폰트라는 별명을 가진 이 폰트는 그야말로 동영상 자막용으로 아주 적합한 폰트였던 것입니다. 허나 이 폰트는 유료입니다. 혹시 비슷한 글꼴이 없을까 싶어서 찾아보니 무료 폰트 중 a시네마라고 하는 글씨체가 있었습니다. 그리하여 이 글씨체를 다운받아 설치하고 바로 다음팟 플레이어에 적용시켰습니다. 본문에서는 어떻게 글꼴을 적용시키는지에 대해 설명하겠습니다. 혹시 a시네마체를 다운로드 받고 싶으신분들은 아래의 글을 참고하시어 그대로 따라하시면 됩니다. 태영화체 대신 아시아폰트 a시네마체 TTF 무료폰트 다운로드 및 설치 방법 태영화체 대신 아시아폰트 a시네마체 TTF 무료폰트 다운로드 및 설치..
시스템 글꼴이 너무 많아서 그런지 엑셀 하나를 작업할때도 로딩을 엄청나게 하더군요. 그리하여 불필요한 글꼴들을 몽땅 지워야겠다고 생각했습니다. 솔직히 글꼴 관리는 거의 안 해서 엉망으로 세팅되어 있을겁니다. 어림잡아 1,000개 이상의 폰트가 윈도우에 설치되어 있을 것으로 짐작합니다. TIP 경고! 본 작업을 진행함에 따라 일부 윈도우10 버전에서는 특수 폰트가 정상적으로 출력하지 않는 문제가 발생할 수 있습니다. 그러니 작업 전 반드시 폰트 백업을 해두시기 바랍니다. 윈도우10 글꼴 폴더에서 삭제하기 제어판의 글꼴로 들어갑니다. 윈도우10에서 제어판을 확인하는 방법은 검색 기능을 사용해서 "제어판" 이라고 한글로 입력하면 됩니다. 그리고 먼저 백업을 하셔야 합니다. 백업은 간단합니다. Ctrl+A로 모..
친효스킨의 글꼴을 변경하는 방법 입니다. 그런데 전체가 아닌 본문에 대해서만 안내해드리는 이유는 스킨이 깨질 수 있기 때문 입니다. 현재 친효스킨의 기본 폰트는 "나눔고딕" 폰트 입니다. 사이드바에도 나눔고딕폰트가 적용되어 있습니다. 하지만 이 글꼴이 바뀌면 사이드바의 형태도 변화가 생길 수 있기 때문에 비추천 합니다. 친효스킨을 아름답고 오류가 없이 사용하시려면 본문에 대해서만 변경하시는것을 추천합니다. 이 외의 개인 욕심에 의해 오류가 발생하는 부분은 도와드리지 않습니다. 폰트 변경에 대한 자세한 방법을 예전에 작성한 바 있습니다. 여기에서는 별도의 폰트 파일이 아닌 구글 웹폰트를 기준으로 설명을 드립니다. 아래의 글을 참고해 주시기 바랍니다. 구글폰트를 이용한 티스토리 글씨체(글꼴) 스타일 변경 방..
친효스킨 커스터마이징 관련 글 입니다. 디스플레이 해상도에 따라서 본문 크기를 다르게 변경하고 싶은 경우에는 간단하게 미디어쿼리에 의해 동작하게 만들 수 있습니다. 친효스킨의 메인 해상도는 스마트폰을 기준으로 설계가 되어 있습니다. 따라서 미디어쿼리를 통해서 특정 해상도 이상일 때를 설계하고 해당 영역에 CSS 매소드를 만들어서 반응형으로 처리할 수 있습니다. 모바일(스마트폰)에서의 친효스킨의 본문 폰트 크기는 기본적으로 아래의 CSS에 마크업 되어 있습니다. 이 부분을 검색합니다. #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: ..
심심해서 사용중인 갤럭시노트9의 시스템 폰트를 한번 바꿔보기로 합니다. 삼성 테마에 가면 유료 및 무료 폰트들이 많이 있습니다. 그냥 그걸 다운로드받아서 적용시키면 되지만, 본문에서 다룰 내용은 삼성테마에 없는 글꼴을 PC에서 다운받아서 컴퓨터와 스마트폰을 연결하고 Wings Font 라고 하는 프로그램을 활용하여 설정하는 방법에 대해서 다루고자 합니다. 생각보다 어렵지 않더군요. 누구라도 쉽게 따라할 수 있습니다. 시작하기에 앞서 본 내용은 삼성 갤럭시 스마트폰에 기본적으로 탑재된 안드로이드 버전이 9.0 이하인 경우에 진행한 방법입니다. 따라서 버전이 높은 기기에서의 진행은 해당 방법이 안 될 수도 있습니다. 또한 또다른 변수들도 존재합니다. 즉 정리하자면 다음과 같습니다. ●스마트폰 운영체제 버전 ..
가끔씩 받는 질문이긴 한데, 공식적으로 한 번 짚고 넘어가야 할 부분인 것 같아서 이렇게 글을 씁니다. 티스토리는 오픈형 블로그여서 사용자가 임의로 커스텀을 할 수 있습니다. HTML과 CSS를 직접 코딩해서 원하는 스타일대로 꾸밀 수 있으며 원하는 폰트를 적용시켜 사용할 수 있습니다. 폰트를 적용하고나서 "적용이 안 된다" 라는 질문을 가끔 받습니다. 구체적인 내용을 파악해보니, 분명 글꼴을 적용시켰는데 폰트 목록에 해당 글꼴이 나타나있지 않다라는 의미였습니다. 이 부분에 대해서 명쾌하게 답변을 드리도록 하겠습니다. "글꼴을 수동 적용 시켜도 글쓰기 에디터 모드에서는 해당 폰트 목록이 나오지 않습니다." 티스토리 구형 글쓰기 에디터에서의 글꼴 목록 입니다. 친효스킨은 현재 리디바탕체가 본문에만 적용되어..
동생이 이거 어떻게 하는거냐고 물어봐서 문서 내용을 살펴보니까 패스 오브 엑자일의 게임 내 글꼴(폰트)을 변경하는 방법에 대한 것 이었습니다. 대충 살펴보니 크게 어렵지는 않을 것 같아서 그 과정을 한번 블로그에 담아 보기로 했습니다. 혹시 패스오브엑자일 사용자 분들 중 평소 글꼴이 마음에 들지 않으신 분들이 계신다면 아래 본문의 내용을 참고해 보시면 도움이 되지 않을까 싶습니다. 준비물1. Visual GGPK 프로그램2. 원하는 폰트 파일 이렇게 두 가지 입니다. 폰트 파일은 확장자가 ttf 혹은 otf 입니다. VisualGGPK 다운로드아래의 첨부파일을 받으시면 됩니다. 크롬 안티바이러스 프로그램에서 이상이 있다고 오류를 띄울 수 있습니다. 그러나 바이러스나 해킹툴은 일절 없습니다. 안심하시기 바..
지난달에 친효체를 도전했으나... 실패했습니다. (울음) 친효체가 나오면 블로그에 적용시켜보려 했는데, 사연 위주로 뽑았나봐요. 아니면 정말 제 글씨가 못쓸 글씨여서 탈락했을 수도 있구요. 뭐 그렇습니다. 그냥 알고리즘을 무료 배포해서 내 손글씨, 내가 사용하도록 만들어 주시면 좋겠는데 말입니다. (안타까움) 2019 한글날! 올해도 역시 많은 무료 폰트들이 배포되었습니다. 이 글은 정보성을 담은 동시에, 개인 백업용으로 활용될 것 입니다. 피시가 포맷되어 자료가 사라지거나 백업은 해 뒀는데 까먹고 못찾는 경우 이 글을 보고 다시 다운로드를 편리하게 받을 수 있는 기능을 하게 됩니다. 혹시 필요하신 분들도 북마크 해두시고 편리하게 이용하시기 바랍니다. 참고로 이곳에서는 다운로드가 가능한 페이지를 안내하고..
프로그래밍을 하시는 분들에게 있어서 폰트는 아마도 중요한 위치에 있을지도 모르겠습니다. 장시간 모니터를 쳐다봐야하고 그 작디작은 오밀조밀한 글씨들을 장시간 보면 피로감이 쌓여오기만 합니다. 그래서 가독성이 높으며 한글과 영어의 이질감이 최대한 없는 그런 코딩 전용 글꼴(Font)은 프로그래머 분들에게는 중요한 위치에 자리잡고 있다고 생각합니다. 저는 전문 프로그래머는 아니지만 지금도 열심히 웹언어를 배우고 있고, 티스토리 반응형 스킨을 개발중에 있기 때문에 브라켓을 사용합니다. 그것도 장시간 사용하죠. PC를 한번 포맷해서 그전에 쓰던 환경에 최적화 되어 있다가 초기화된 브라켓을 쓰니까 영 적응이 안 되더군요. 그래서 혹시 브라켓용 좋은 폰트가 있을까 싶어 검색해보니 몇 개를 추천받았는데, 그 중에서 D..
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다. 지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다. font-family → 글꼴을 지정합니다.font-size → 글자 크기를 설정합니다. 단위는 px 입니다.font-weight → 글자의 굵기를 설정합니다. 보통 bold 를 사용합니다.font-style → 기울이기 등의 글자 스타일을 지정합니다.font-variant → 영어 작성 시, 작은..
기존에 사용했던 방법은 폰트를 다운받고 해당 폰트 파일을 스킨에 집어넣고 적용하는 방법이라 처음 티스토리를 접하시는 분들은 다소 어려울수도 있겠다는 생각을 하게 되었습니다. 실제로 이번에 책을 구매하시고 실전에 바로 적용하려다가 잘 안되서 문의를 주시는 분들이 계셨습니다. 이대로는 안 되겠다 싶어서 최신버전으로 초간단하게 폰트를 내 맘대로 적용하는 방법에 대해서 작성하려고 합니다. 참고로 폰트는 저작권에 민감합니다. 따라서 절대 무료폰트를 사용해야하며 아무 폰트나 막 사용해서는 안됩니다. 저 같은 경우는 구글에서 제공하는 무료 폰트를 사용하는데 꽤 유용합니다. 여기에서도 이 방법을 토대로 작성할 것입니다. 이 글에서는 티스토리를 막 개설하면 바로 적용되어있는 반응형 기본 스킨 #1에 대해서 수정하는 방법..
이 방법은 접속하신 모든 분들에게 보여지는 방법이 아닌, 사용자가 자신의 편리를 위해서 내PC의 크롬에 대한 글꼴 변경 부분이다. 혹시라도 블로그를 운영하시는데, 해당 글꼴을 변경하고 싶은 것이라면 이 방법이 아니라 다른 방법으로 진행해야 한다. 티스토리 블로그 글꼴 변경에 대한 예시를 참고하시면 좋을 것 같다. 피가되고 살이되는 블로그, 친절한효자손 취미생활!글, 사진 및 이미지 ▶ CopyLeft(C) 유길용#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다##공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다##사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다##본 블로그는 크롬(Chrome Browser) 1920×1080 해..
[친효포토샵] 포토샵을 이용하여 폰트에 여러가지 효과넣기 안녕하세요~ 친절한효자손 이에요~! 다시 포토샵강좌 포스팅을 하나 더 진행할께요~! 하여튼, 저는 아는만큼~ 죄다! 포스팅을 할꺼에요^^; 실은...포스팅을 하는 목적이...정보전달도 있지만... 제 복습을 위한 과정이라고나 할까요?? 후후 +_+;; 포토샵은 오래 안하면 전부 까먹게 되어 있어요...그래서!!! 일종의...사용설명서라고나 할까요..?? 후훗~! 이번에는, 포토샵을 이용한 폰트꾸미기 에요~! 아주 간단하게 꾸미는 팁이므로, 응용을 해 보시길 바래요^^; 저번에 삼베질감 만들기를 했었죠?? 그것을 배경으로 해서, 한번 폰트에 효과넣는 것을 해보도록 할께요^^ 우선, 포토샵 왼쪽에 보시면, 이렇게 도구툴이 나와있죠? 그중에서 T 라고 ..