디자인

저번 포스팅에서는 줄바뀜 시 단어가 잘리지 않고 통째로 넘어가는 방법에 대해 다뤄봤습니다. 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코드가 쭉 나오는데, 아무 위치나 상관없습니다. 다음 코드를 입력해봅니다. ..

위와 같은 그리드 형태의 티스토리 스킨을 쓰다보면 깔끔하고 좋지만 약간의 디자인이 들어가면 좋겠다는 생각이 듭니다. 개인 취향이지만 저는 이미지의 테두리가 둥글둥글한 것이 더 마음이 가는데요. 사용하는 스킨에서 옵션이 있는 경우도 있지만 없는 경우에는 직접 편집을 해주어야 합니다. html은 들어봤는데 css는 뭐지..? 하는 분부터 들어는 봤는데 직접 하기엔 좀.. 이런 분들도 할 수 있는 간단한 매뉴얼을 준비해보았습니다. 스킨마다 조금씩 차이가 있을 수 있는데요, 저는 정상우님이 제작하신 hELLO스킨을 사용 중입니다. 몇가지 스킨을 사용해보았는데 가장 최적화가 잘 되어있고 잘 짜여있어 조금씩 수정해서 사용하기도 좋은 스킨이라고 생각합니다. https://pronist.tistory.com/5 hEL..

일러스트레이터에서 Create Outlines 이란 무엇일까? 작업한 이미지를 출력이나 작업 인계를 목적으로 AI, PDF 파일로 저장할 때 필요한 작업이다. 만약 내 컴퓨터에서 작업하며 사용한 폰트를 출력실이나 다음 작업자가 가지고 있지 않다면 어떻게 될까? 예전 작업했던 이미지를 예시로 함께 확인해보자. 이렇게 보여야 할 화면이 이렇게 보이게 된다. Create Outlines(윤곽선 만들기) 이란 폰트를 다 깨서 벡터이미지 처럼 만들어주는 기능이다. 벡터이미지로 전환이 되면 텍스트가 아니기 때문에 폰트의 유무의 상관없이 작업한 이미지 그대로 볼 수 있다. (대신 텍스트를 수정할 수는 없다.) 두 이미지를 보면, 전자는 텍스트에 밑줄이 쳐있어 텍스트로 인식하는 반면, 후자는 윤곽선이 선택되어 이미지로..