디자인

개인적으로 맥의 시스템 언어를 영어로 하고 사용하고 있습니다. 생성 파일 등 영문이 호환성이 좋기 때문인데요. 대신 대부분의 프로그램 또한 기본 설정이 영어로 되어있어 영어를 잘 못하는 입장에서는 간혹 난감할 때가 있습니다^^; 업무 차 파워포인트를 사용하다가 한글로 바꾸는 방법을 찾아보는데 오피스 내 설정에서는 찾아봐도 도무지 방법이 나와있지 않더군요. 여러 시도 끝에 방법을 알아내 이렇게 공유해봅니다. 게다가 이 방법은 오피스 뿐 아니라 다른 프로그램도 가능한 방법이라 많은 분들에게 유용할 것 같습니다. (반대로 한글로 설정되어있는 프로그램도 영어로 바꿀 수 있습니다) 결론부터 말씀드리면 맥 시스템 설정에서 가능합니다. 맥에서 프로그램 언어 설정 바꾸기시스템 설정 (System Settings) 들어..

일러스트레이터에서 새 문서를 열고 폰트를 작성하면 항상 Adobe 명조로 작성이 되기 때문에 매번 수정해주는 것이 일입니다. (사실 기본 폰트는 Myriad Pro지만 우리는 한글을 작성하기 때문에 어도비 명조로 바뀌는 것이지요) 검색을 해봐도 매 문서마다 기본폰트 설정을 하는 방법이 나올 뿐, 모든 문서에서 기본 값을 바꾸는 내용은 잘 나오지 않습니다. 어도비에 답이 있어 기록 겸 공유 차원에 올려봅니다.https://helpx.adobe.com/kr/illustrator/using/fonts-faq.html 글꼴 | 자주 묻는 질문 및 문제 해결 팁글꼴과 관련하여 질문이 있으십니까? 몇 가지 일반적인 질문을 확인하고 문제 해결 팁을 알아보십시오.helpx.adobe.com 정리하면 다음과 같습니다.파..

저번 포스팅에서는 줄바뀜 시 단어가 잘리지 않고 통째로 넘어가는 방법에 대해 다뤄봤습니다. https://jaeheepapa.tistory.com/entry/CSS-티스토리에서-줄바뀜-시-단어가-잘리지-않게-하기 [CSS] 티스토리에서 줄바뀜 시 단어가 잘리지 않게 하기 별 생각없이 블로그를 살펴보다가 눈에 거슬리는 점을 발견했습니다. 보이시나요? 최근 제목이 긴 글을 포스트했는데 이렇게 메인화면에서 단어가 잘리는 것을요. 제주메밀식 당 해결방 법 과 jaeheepapa.tistory.com 그런데 또 사용하다보니 아무래도 오른쪽 공백이 신경쓰이더군요. 그래서 이번에는 제목을 한줄로 표시하고 넘치는 부분을 생략 표시(...)로 표현되게 바꿔보겠습니다. white-space: nowrap; overflow..

별 생각없이 블로그를 살펴보다가 눈에 거슬리는 점을 발견했습니다. 보이시나요? 최근 제목이 긴 글을 포스트했는데 이렇게 메인화면에서 단어가 잘리는 것을요. 제주메밀식 당 해결방 법 과 같이요. 성격상 한줄에 다 들어가는 것이 제일 좋지만.. 당장 제목을 바꿀 수 없을 것 같아 미봉책으로 다른 방법을 생각해봤습니다. 적어도 줄이 바뀌면서 단어가 잘리지는 않게 해보려고요. 먼저 관련한 css 문법을 확인해보겠습니다. /* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/word-break 속성을 살펴보면 norma..

https://jaeheepapa.tistory.com/entry/WebP-파일-포맷은-무엇이고-왜-쓸까요 WebP 파일 포맷은 무엇이고 왜 쓸까요? WebP 파일 포맷이란? 구글 이미지 검색을 한 후 이미지 파일을 다운 받아보면 흔한 jpg, png, gif 확장자가 아니라 새롭게 등장한 확장자가 있습니다. 바로 WebP입니다. 보통 웹피라고 부르는데 이 파 jaeheepapa.tistory.com 앞에 글에서 WebP 파일 포맷에 대해서 이야기해보았는데요, 이번엔 WebP 파일을 생성하는 방법에 대해 다뤄보겠습니다. 1. 포토샵 사용 포토샵 최신 버젼(23.2 이상)의 경우 WebP 파일을 지원합니다. 포토샵에서 이미지를 연 후, Save As (다른 이름으로 저장)을 누르면 Format 중 WebP..

WebP 파일 포맷이란? 구글 이미지 검색을 한 후 이미지 파일을 다운 받아보면 흔한 jpg, png, gif 확장자가 아니라 새롭게 등장한 확장자가 있습니다. 바로 WebP입니다. 보통 웹피라고 부르는데 이 파일포맷의 정체는 무엇일까요? WebP은 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷입니다. WebP를 사용하면 웹 사이트에서 고품질 이미지를 표현할 수 있지만 PNG, JPEG 등 기존 포맷보다 파일 크기가 작아집니다.하지만 WebP 파일을 저장할 때 압축 방식(무손실 압축, 손실 압축)을 선택할 수 있으므로 데이터 손실 없이 또는 중요하지 않은 정보의 일부만 손실하면서 이미지를 압축할 수 있습니다. Google 개발자는 무손실 WebP 이미지가 PNG보다 최..

제가 블로그를 시작하며 많이 사용하는 네이버가 아니라 티스토리를 선택한 이유는 커스텀이 가능하다는 점이 가장 컸습니다. 그래서 제공되는 기본 폰트 외에 원하는 폰트를 사용할 수 있다는 점이 가장 결정적이었습니다. 디자인에서 폰트는 중요한 역할을 합니다. 아무리 좋은 이미지와 좋은 레이아웃이라고 하더라도 타이틀 폰트가 별로면 뭔가 어색하고, 본문 폰트가 맑은 고딕과 같은 기본 폰트라면 가독성이 떨어져보입니다. 그래서 저는 웹디자인을 할 때 ~ 과 같은 타이틀은 디자인 폰트를 쓰고, 와 같은 본문에는 구글에서 제공하는 Noto Sans KR을 사용합니다. 디자인 폰트는 각자 생각하는 블로그나 웹페이지의 디자인에 맞게 잘 활용하면 되고, 본문은 아직 Noto Sans KR를 대체할만한 폰트를 찾지 못해 거의 ..

제가 웹디자인을 할 때 사소한 것 같지만 중요하게 여기는 부분은 메인컬러입니다. 그래서 클라이언트와 소통을 할 때 가장 먼저 메인 컬러를 잡고 작업을 시작하는 편입니다. 기본 디자인 툴을 다루실 줄 아는 분들이라면 일러스트레이터나 포토샵에서 색상값을 잡고, 팔레트에서 바로 hex코드를 뽑아내겠지만 디자인 툴을 따로 다루지 않는 분들의 경우 원하는 값을 찾기가 쉽지 않습니다. 그런 분들을 위해 간단하게 이용하기 쉬운 사이트를 소개시켜드리고자 합니다. 1. 직접 원하는 색을 찾아 사용하고 싶을 때 : HTML Color Codes 첫번째 사이트는 원하는 값을 직접 찍어 사용하고 싶을 때 이용하는 사이트입니다. 한 화면에서 원하는 색을 고르는 컬러 차트와 더 세밀하게 선택할 수 있는 컬러 픽커 두 가지 모드가..

웹서핑을 하다보면 필요한 부분을 복사하기 위해서이기도 하지만 저는 의미없는 마우스 드래그를 하며 글을 읽는 편입니다. 드래그를 하면 보통 다음과 같은 모습이 나옵니다. 마우스로 드래그한 부분이 대부분 위와 같은 하늘 색으로 표시가 되는데 또 어떤 홈페이지는 다른 색으로 나옵니다. 사실 드래그 색상이 홈페이지에서 중요한 요소는 아니지만 제 경우에는 이런 간단한 변화로 괜히 더 호감이 더 가고 공을 들였다는 생각이 들게 됩니다. 그리하여 지금 운영하는 블로그도 한번 색을 바꿔봐야겠다는 생각에 한번 작업을 해봅니다. 티스토리 관리자 모드에서 스킨 편집을 클릭, html 편집을 누릅니다. 그 후 HTML 옆에 CSS를 클릭합니다. CSS코드가 쭉 나오는데, 아무 위치나 상관없습니다. 다음 코드를 입력해봅니다. ..