본문 바로가기

Design

(83)
css 컬러 조정하기 (css color) .red {color:red;} .red {color:rgba(255, 0, 0, 1);} .red {color:#ff0000;} .red {hsl(0, 100%, 50%)} ▲ 위는 모두 동일한 red, 빨간색 컬러입니다. css 코드나 html에서 내부 스타일 코드를 지정할 때 컬러 값을 입력하게 될 때가 있는데, 이때, 표현되는 컬러 값은 동일하지만 적용하는 수치는 사용자의 편의에 따라 여러 가지로 분류하고 있습니다. 그중 대표되는 3가지를 알아보도록 할게요 ​ 고유의 색이름을 지정하거나 rgba로 이루어진 색상, 알파값을 입력하거나 16진수로 이루어진 hex 값을 입력하거나 색상, 명조, 채도로 이루어진 HSL 값을 입력하는 것 그중 가장 많이 사용하는 방법은 2,3번으로 rgba로 색상을 표기하..
CSS 소개와 사용방법 (CSS가 뭔가요?) 🎨 CSS 소개 첫 단추 페이지를 포스팅하기 전에 잠시 CSS가 태어나게 된 일화를 간단히 소개 후 넘어가도록 할게요 ​ 먼저 CSS는 Cascading Style S heets의 약어로 사전적 용어로 풀이해 나타내면 계단식 스타일 시트라고 불립니다. ​ 홈페이지 제작을 했었던 1,2세대 초기 웹디자인과 개발자들은 CSS라는 표준형 언어가 생기기 전에는 웹페이지 폰트에 컬러를 주거나 단일 페이지나 공용 페이지에 특수한 효과를 주고 싶을 때, 모든 페이지에 일일이 스타일 용어를 적용시키거나 개발자를 통한 프로그래밍적 언어로 제어를 해야 했습니다. ​ 이때 당시에는 웹디자이너가 추구하는 미적 효과와 그것들을 실행해야 하는 개발자 사이에 마찰이 불가피했었는데요, 페이지가 늘어나면 늘어날수록 일일이 대입해 적용..
https와 SSL 인증서 설치하는 방법 홈페이지는 2세대에서 3세대를 거치며 디자인적 변화 기반을 다져갈 때 즈음 시스템적인 큰 변화도 하나 겪게 되는데,http://로 시작되던 도메인의 주소가 https://로 변화하는 것입니다. 느린 로딩 화면을 기피하는 우리나라 사용자들에게는 크롬이나 가벼운 브라우저를 사용해 인터넷을 이용하기 시작했는데, 어느 순간부터 초록색 자물쇠로 잠군 '안전함' 표시 마크가 나타나거나 또는 '안전하지 않음'이라는 시각적 표현을 사용해, 현재 이용하는 홈페이지의 상태를 바로 확인할 수 있도록 제공해 주고 있으며, 이는 대부분의 크롬, 파이어폭스 등의 브라우저에서 확인할 수 있습니다. 🔐 https://로 표시된 뜻은 뭔가요? 흔히 회사나 개인 홈페이지 등의 소개 형태로 이루어져 있는 프론트형식의 홈페이지 (회원정보가..
EOT와 WOFF의 차이점 앞서 설명한 TTF와 OTF와 같은 폰트 확장자는 윈도우나 맥에서 설치해 일반적인 사무업무나 오프라인 그래픽작업에서 사용할 수 있는 폰트라고 생각하면 되는데, 이는 편의성의 측면만 고려한것이라 압축이 되지 않은 일반적인 설치 폰트이고, ​ EOT와 WOFF는 로딩속도가 중요한 웹과 모바일 홈페이지에서 ​ 기기로 전달하는 특성을 고려해 최대한 용량을 작게 만든 확장자입니다. EOT (Embedded Open Type) 마이크로소프트에서 인터넷익스플로러용으로 홈페이지를 만들때 시스템폰트가 아닌 다른 폰트들을 불러와서 화면에 적용하기 위해 15년전에 만든 확장자로 코드안에 포함된 폰트타입이라 하여 임베드라는 용어를 사용해 eot라고 부르고 있습니다. css구문중 @font-face를 처음 도입해 적용한 것도 ..
TTF 와 OTF 폰트의 차이점 디자이너라면 한 번쯤은 들어봤을 그 이름. 트루 폰트(TTF)와 오픈 폰트(OTF)의 차이점입니다. ​ 폰트를 설치하려고 ZIP 파일을 들여다봤을 때, 두 가지의 폰트가 나오는데 어떤 폰트를 사용하면 좋을지 고민일 때 간단한 팁으로 알고 계시면 좋을 것 같습니다. 쉽게는 비트맵(Bitmap) 방식과 벡터(vector) 방식 두 가지의 차이점으로, 트루 폰트는 비트맵 방식이, 오픈 폰트는 벡터 방식이 적용되었습니다. 트루타입폰트(TrueType Font) 마이크로소프트사의 MS 프로그램(word,및 기타 문서프로그램), 윈도우에서 주로 쓰이고 있습니다. 쉽게 윈도우용 전용 서체라고 불리며, 1980년 애플이 당시 어도비에 대항하기 위해 만든 폰트로 글꼴을 다양한 크기로 표시될 수 있도록 정례화해서 만든 타..
본고딕이 아닌 노토산스를 써야하는 이유 구글과 어도비가 문자의 존속성과 가치, 사회환원등의 이유로 3년간의 문자 개발을 통해 배포한 이 글자는 한,중,일등의 다양한 서체를 지원하는 장기 프로젝트로(다른 국가의 언어도 모두 있습니다) 고딕과 명조 두 가지 타입으로 전 세계에 배포되었으며, 완성도를 더욱 높이기 위해 우리는 잘 사용하지 않는 외계어를 포함해 폰트를 제작했습니다. 기업이 공동으로 개발했기 때문에 구글은 노토산스(noto sans)라는 이름으로, 어도비는 본고딕(Source Han Sans)이라는 이름으로 배포를 시작하게 됩니다. ​ 목차 낮은 용량으로 사용하기 노토산스(noto sans)를 써야하는 이유 유지보수에 한 걸음 다가가기 해결책 5줄요약 🔨 낮은 용량으로 사용하기 앞서 본고딕체 소개에서도 말씀드린것처럼 외계어를 포함해 폰..
OKR과 KPI의 차이 (OKR이란?) OKR도입을 앞두고.... 피드백과정 올바른 OKR을 위해 화합을 이끌 대화?? 회사가 직원과 고민해야할 목표해야 할 OKR 대화란?? 재설정한 OKR OKR을 수립 한 후에 관리자의 입장에서?? 결론 1. OKR도입을 앞두고.... 처음에는 정량적,정성적 방법인 KPI방식으로 성과중심의 부서 운영방식을 고수해왔던 회사의 입장에서는 더 높은 성과를 낼 수 있게 끔 초점을 맞춘 OKR이라는 방식이라는 제도를 들여왔을 때 직원들은 상당히 어렵고 난해한 표정이 많았습니다. ​ 언뜻봐서는 성과를 내는 KPI와 목표관리도구 OKR의 차이가 별로 없어보였기 때문입니다. 저 스스로도 그렇구요. ​ 마치 KPI를 이름만 바꿔서 좀 더 많은 성과를 내게 끔 만들어 주는 성과 관리 지표 도구 같았습니다. ​ 처음 도입하는..
무료폰트의 역사 (상업용 무료폰트의 변천사) 디자이너라면 꼭 필요한 상업용 무료폰트는 현재 다양한 종류로 편하게 사용되고 배포되고 있지만 웹 디자인의 초창기 까지만해도 그 쓰임새나 저작권등은 무시한채 CD의 형태로 유료 배포되었던 폰트회사들의 조각된 폰트들을 다운받아 설치해 사용하던것이 일반적이었습니다. 저작권등을 모른채 사용하던 디자이너들이나 회사에 공문을 보내 소송의 비용을 지불하게 하거나 폰트구매를 강요당하는 에피소드까지 있었습니다. ​ 2. 언제나 이쁜 폰트를 사용하고싶어하는 디자이너들과 소비자들의 열망이 항상 있었고, 기존에 저작권에서 자유로운 몇 안되는 폰트들의 자간,장평등을 조금씩 조절해 사용하는 수 밖에는 없었죠. ​ 3. 저작권에서 자유롭고 기본체로 사용할 수 있는 폰트들을 초기에 마련해 준 업체는 네이버 였습니다. 국민 모두가 자..