CREATIVE

'Web Design' 카테고리의 글 목록

이매지네이션 라이브러리 명함 디자인 제작 기초 가이드라인(기초지식·부서/직급·한글 영문 표기법) 명함 사이즈 기본크기는 90×55로, 가로세로 1mm정도씩 오차가 있으나 대부분의 명함이 이 크기이다. 이젠 잘 사용되지 않으나 여성들에게 많이 사용되어진 85×48도 있다. 보다 큰 명함사이즈는 136×75크기도 있다. 그 밖에 여러 가지 크기가 있지만 지금 사용되고 있는 명함은 대부분 88×54이다. 그러나 대부분의 칼라 옵셋명함의 경우 실사이즈는 86×52의 약간 작은 사이즈로 제작되고 있다. 종횡가로로 된 종이에 가로 글자가 가장 정통적인 타입이다. 안정감이 공인된 스타일이다. 세로로 된 종이에 가로 글자는 증명사진들을 넣기에 적합한 스타일이다. 가로세로 공히 세로글자는 요즘 잘 사용하지 않으나, 부분적인 세로글자는 전체적인 느낌을 좋게 가져갈 수 있다. 명함 폰트(서체) 고딕체 : 가로세로 굵기..
이매지네이션 라이브러리 개발자도구 F12 Application(애플리케이션) 이미지 다운로더 개발자도구를 통해서 웹페이지의 이미지를 다운받을 수 있다. 이미지의 주소값까지 모두 얻을 수 있다. 다만 일괄 다운로드가 불가능하기 때문에 하나하나 다운을 받거나 주소링크를 가져와야 한다. 주소 링크를 가져오는 것은 어렵지 않지만 빠른 작업속도를 위해서 확장프로그램을 사용하는 것이 좋다. 컴퓨터 활용은 기능을 많이 알면 알수록 훨씬 쉬워진다. 이미지를 활용하여 다양한 툴킷을 제작하고 많은 작업을 위해서는 빠른 속도가 중요하다. 이를 위해 다양한 도구프로그램을 사용하는 것이 좋다. 이전에도 한 번 언급했듯이, 다양한 확장프로그램이 있고 확장프로그램을 자유롭게 활용하는 것에 따라 작업능력이 달라진다. 구글 확장프로그램에서 이미지 다운로더(Image Downloader)을 찾아 다운받을 수 있다. 확장프로그램..
이매지네이션 라이브러리 에디트플러스 (Edit Plus) 설치 및 FTP 연결방법 에디터플러스는 이곳에서 구입 및 다운로드가 가능합닏가. 인터넷 환경에서 편리하게 사용할 수 있는 윈도우용 문서 편집기로, HTML, PHP, 자바, Hex 뷰어 기능 등을 지원합니다. 개발업체는 국내 이에스컴퓨팅입니다. 아무리 좋은 프로그램이 있어도 사용방법을 모르면 소용없듯이, 이번에는 FTP 접속 및 관리를 도와주는 프로그램인 에디트플러스에 대해서 간단하게 알아보겠습니다. 사실은 몇 번 해보면 그렇게 어려운 것은 하나도 없는데, 처음 하거나 용어를 모르는 경우에는 이게 뭔지 헷갈리는 경우가 있을 겁니다. 그에 대한 설명입니다. FTP란 무엇일까? FTP는 File Transfer Protocol의 약자로 말그대로 파일을 전송하는 통신 규약입니다. FTP 서버에 파일들을 업로드, 다운로드할 수 있도록 ..
이매지네이션 라이브러리 MySQL 그누보드 관리자 계정찾기(아이디/비밀번호) 이 문제를 해결하기 위해서는 아래의 조건을 갖춰야한다. MySQL 데이터베이스를 설치하고 접속하여 관리할 수 있어야 한다. 연결되어있는 호스팅 서버의 PHP 버전을 체크하고 버전에 맞는 PHPmyAdmin을 설치한다. 만약 PHP 서버가 5버전 이하라면 그 이하의 버전을 설치하길 권장한다. 접속 에러(접속거절 오류코드 : 200)가 발생할 수 있다. 그누보드 버전에 맞게 MySQL에 접속하여 해당 데이터베이스를 수정하거나 새롭게 업데이트 한다. 그누보드 4라면 G4_member 데이터베이스에 접근하면 되고, 그누보드 5라면 G5_member 데이터베이스에 접속해서 해당 데이터를 새롭게 업데이트하면 된다. 그누보드의 회원관리 항목 중 비밀번호는 모두 암호화가 되어 있기 때문에 새로운 비밀번호로 업데이트를 ..
이매지네이션 라이브러리 나눔스퀘어 웹폰트의 치명적인 문제점(한자표기) 그렇다. 뭔가 놓치고 있는 것이 있다고 생각했는데, 잘 기억이 나지 않아서 그냥 무시하고 타이틀 부분에 나눔스퀘어 폰트를 적용했지만, 치명적인 문제점이 있었다. 그것은 바로 한자 표기였다. 나의 경우에는 한자를 많이 쓰는 편이다. 노토 산스 한글 웹폰트를 사용해버리면 중복되어 버리기 때문에 나눔스퀘어 폰트를 사용할 수 없다. 그래서 생각한 것이 바로 노토 산스 중국어 웹폰트를 적용하는 것이다. 한글로는 나눔스퀘어를 적용하고 싶고, 한자 부분만 중국어 웹폰트를 적용하는 것이다. 구글에서 쉽게 제공하고 있기 때문에 임폴트를 통해서 적용해본다. @import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css); font-family: 'Noto Sans ..
이매지네이션 라이브러리 나눔스퀘어 폰트 깨짐 현상과 웹폰트 활용방법 폰트는 매우 중요하다. 특히, 디자인 작업을 할 때가 아닌 웹에서 보여지는 폰트를 웹폰트라고 한다. 웹폰트와 디자인 작업을 했을 때의 폰트가 보여지는 것이 다른데, 이와 같은 현상은 간단하게 설명하기 복잡하기 때문에 바로 폰트 깨짐현상에 대해서 정리해본다. 폰트 깨짐이란, 말 그대로 폰트가 뭉개지는 현상을 말한다. 일러스트나 포토샵에서 안티앨리언싱을 적용한 폰트는 깔끔하고 부드럽게 보여지는 반면에, 웹폰트의 경우에는 폰트 사이즈가 변할수록 가독성이 떨어진다. 웹폰트에서 가장 깔끔하게 떨어지고 가독성이 좋다고 하는 나눔스퀘어 폰트조차도 16포인트 이하의 글씨크기에서는 폰트가 선명하지 않고 깨지는 현상이 발생한다. 그래서 가독성을 위해서 일반적으로 웹폰트로는 시스템 기본 폰트인 맑은 고딕이나 애플고딕, 돋움..
이매지네이션 라이브러리 CSS/HTML 미리보기 편집기 웹사이트 'CSSDESK' CSSDESK 웹에서 CSS/HTML 편집 작업을 할 때, 바로바로 어떻게 표시되는지 확인하고 싶을 때 유용한 웹사이트 CSSDESK입니다. 굉장히 직관적이고 편리해서 자주 사용하지만, 단점은 아무래도 한글의 경우에 제대로 HTML에서 입력이 안되는 경우가 있습니다. 되기는 하는데, 붙여넣기 방식으로 넣어야 합니다. UTF이나 Language 언어 호환때문에 그런 것 같습니다. 기본 CSS 세팅이 되어 있기는 한데, 필요한 CSS 요소를 수정하면 아래와 같이 표시될 수 있습니다. HTML도 직접 넣어주시면 되는데, 아주 간단한 DIV 요소를 활용해서 아래와 같이 박스를 만들 수 있습니다. This is box. 이런식으로 간단한 HTML 코드를 넣어서 DIV 블럭을 만들어봤습니다. 특정 코드를 테스트하거..
이매지네이션 라이브러리 소프트웨어의 제작과 배포 그리고 프로그래밍 프로그래밍 귀찮은 것은 싫고 노가다도 싫다면 역시 프로그래밍을 배우는 것이 좋은 것 같다. 그도 그럴 것이, 만약 반복 작업을 해야 하거나 귀찮은 것들을 해야 한다면 프로그램으로 쉽게 하는 것이 가장 편하기 때문이다. 그래서 프로그래밍을 배우는 건데, 쉽게 얘기하면 컴퓨터 언어를 배워서 언어대로 컴퓨터에게 명령하는 거다. 얼마나 편한가! 물론, 프로그래밍 언어를 배우는 일 자체가 귀찮을 수 있다. 만약 그정도라면 숨 쉬는 것도 귀찮아서 차라리 죽어버리는 것이 낫다고 생각할 수도 있겠지만, 그래도 프로그래밍 정도는 배우면 뭔가 쓰임새가 많다. 프로그램을 배포하는 것 까지는 상당한 시간이 걸리고 많은 테스트를 거쳐야 하지만, 능숙한 프로그래머는 프로그램 하나도 뚝딱 만들어낸다. 비교하는 것을 좋아하는 한국사..
이매지네이션 라이브러리 <video> : 비디오 삽입 요소 간단 사용방법 간단 사용방법은 아래와 같습니다. 비디오 영상을 별도의 데이터베이스를 통해서 삽입할 필요 없이, 외부 주소값을 불러와서 아래의 요소로 적용시킬 수 있습니다. Autoplay 부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다. Buffered 미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 TimeRanges 객체를 포함합니다. Controls 이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다. Height 비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다. Loop 부울(boolean) ..
이매지네이션 라이브러리 HTTP → HTTPS 리다이렉션 전환(.htaccess) 루트 위치에서 .htaccess 문서파일을 찾아 아래와 같이 작성해준다. 이 값을 추가하면 301, 302 리다이렉션 문제를 해결할 수 있다. 사이트 도메인을 변경하거나 SSL 도입할 경우에 HTTP 접속 주소값을 영구적으로 HTTPS로 리다이렉션을 해주는 방법이다. RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
이매지네이션 라이브러리 트와이스 여성팬사이트 'Want' 트와이스 일반 팬사이트가 아닌 '여성 팬사이트'인 Want 팬사이트인데 정말 깔끔하게 잘 꾸며놨고, 글리터 패턴이 정말 예쁘게 잘 사용되었다. 컬러감각도 독특하고 디자인 자체가 예뻐서 많은 내용이 있는 팬사이트는 아니지만, 개인적으로 정말 마음에 드는 팬사이트라고 생각한다. 뭔가 커뮤니티 형식이라서 한국사람들이 이용하기에 간편하게 되어 있는 사이트라고 느낄 수 있다. 메뉴 상단 부분의 웹디자인 가장 기본 폰트로 사용되었으며, 사용된 색상값은 아래와 같다. ■ #28356C; ■ #B39976; 팬사이트를 제작할 계획이 있거나 웹디자인을 하는 사람이라면 심플하지만 세련된 디자인은 위와 같은 형식으로 제작하면 좋을 것이라고 생각한다. 이외에 푸터 부분은 갈색 톤으로 마무리하고 좌측 하단에 접속자와 우측에는 ..
이매지네이션 라이브러리 Article 태그와 Section 태그 정리 ※ 개인적으로 공부하기 위한 HTML5 태그 정리글입니다. 프론트엔드를 공부하다보면 의외로 신기한 태그들을 새롭게 알게 된다. 그리고, 한번쯤은 봤을만한 태그들이 익숙해지고 직접 작업을 할 때, 사용하게 되면 태그들이 있는 이유를 한 번에 이해하게 되고, HTML 구조만 보더라도 어떤 식으로 구성되어 있고 어떤 의도로 작업을 했는지 쉽게 이해할 수 있게 되었다. 어쩌면, 영문으로 되어 있어서 언어를 조금 더 잘 이해하고 그 뜻을 파악할 수 있었다면 더 쉽게 이해할 수 있었을지도 모른다. HTML5에서는 정말 다양한 태그들이 있고 평소에 잘 사용하지 않는 태그들이 있지만, 사실 생각해보면 활용도가 굉장하고 언제든지 쉽게 사용할 수 있는 태그들이 있는 것이다. Audio 태그나 Address태그도 마찬가지다..
이매지네이션 라이브러리 일러스트 작업할 때 자주 쓰는 UI·UX 인터페이스 아이콘 뭐 이런 아이콘, 저런 아이콘이기는 한데 티스토리 글쓰기에서는 1단에 3개의 이미지만 보여질 수 있기 때문에 레이아웃이 다소 큰 것은 양해해주길 바란다. 물론 별도로 수정해서 깔끔하게 보여지는 방법도 있고, 여러가지 방법이 있기는 한데, 대충 이런 것들을 인터페이스 혹은 UIUX 아이콘이라고도 말한다. 가장 기본적인 형태의 디자인들로 구성되어 있고, 찾아보면 정말 심플하고 미려한 디자인의 아이콘들도 쉽게 다운받아서 활용하고 있다. 내가 자주 쓰는 아이콘이기도 해서, 백업 겸 관리하려고 이렇게 정리해서 올려본다.
이매지네이션 라이브러리 유튜브 화면 일러스트(.AI) 소스·Source 유튜브 화면 일러스트(.AI) 유튜브 화면으로 활용하기 좋은 일러스트 파일, 다른 유튜브 아이콘이나 일러스트 파일보다 직관적이고 메뉴형태로 쉽게 활용할 수 있는 일러스트 파일 소스다.
이매지네이션 라이브러리 이미지를 짜르지 않고 배경화면의 커버속성을 썸네일에 적용하는 방법 썸네일 이미지 깔끔하게 구현하는 CSS 이미지 썸네일 CSS를 할 때, 크로싱 브라우저만 잘 대응할 수 있다면, 가장 좋은 CSS 설정값은 아래와 같다. position: absolute; z-index: 10; width: 100%; object-fit: cover; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 위와 같이 설정해주는 것이 중앙정렬도 잘하고, 같은 비율(4:3) 내에서 가로와 세로의 비율을 적당하게 잘라주면서 가장 썸네일처럼 보이게 해주는 설정값이다. 배경이미지의 속성이 아니라, 이미지 내에서 위와 같이 적용하면 딱 알맞게 떨어지는데, 위에서 가장 중요한 요소는 바로 Object-fit이다. Object-fit에는 다양한 속성이 있는데, 배..
이매지네이션 라이브러리 엔티티 코드(Entity Code) 정리 자주 쓰는 특수문자를 HTML에서 쉽게 사용할 수 있는 방법으로는 &로 열고 엔티티 코드 이름을 적은 뒤에 ;로 닫으면 해당 문자를 사용할 수 있다. 한번 외워두면 다양한 웹페이지를 구성할 때, 매우 쉽게 사용할 수 있으니 자주 쓰는 문자코드는 꼭 외워두는 것이 좋다. 특히 세로 바(Vertical Bar)는 몰라서 못쓰는 경우가 많으니, 영문으로 쓰지 말고 문자로 쓰는 것이 폰트가 달라졌을 경우를 대비하여 중요한 요소라고 할 수 있다. 캐릭터 엔티티 이름 엔티티 번호 기술 & nbsp; & # 160; 줄 바꿈하지 않는 공백을 삽입합니다. & & amp; & # 38; 앰퍼샌드 " & quot; & # 34; 따옴표 © © & # 169; 저작권 기호 ® & reg; & # 174; 등록 된 기호 ™ ..