나눔스퀘어 폰트 깨짐 현상과 웹폰트 활용방법 2020. 5. 15. 폰트는 매우 중요하다. 특히, 디자인 작업을 할 때가 아닌 웹에서 보여지는 폰트를 웹폰트라고 한다. 웹폰트와 디자인 작업을 했을 때의 폰트가 보여지는 것이 다른데, 이와 같은 현상은 간단하게 설명하기 복잡하기 때문에 바로 폰트 깨짐현상에 대해서 정리해본다. 폰트 깨짐이란, 말 그대로 폰트가 뭉개지는 현상을 말한다. 일러스트나 포토샵에서 안티앨리언싱을 적용한 폰트는 깔끔하고 부드럽게 보여지는 반면에, 웹폰트의 경우에는 폰트 사이즈가 변할수록 가독성이 떨어진다. 웹폰트에서 가장 깔끔하게 떨어지고 가독성이 좋다고 하는 나눔스퀘어 폰트조차도 16포인트 이하의 글씨크기에서는 폰트가 선명하지 않고 깨지는 현상이 발생한다. 그래서 가독성을 위해서 일반적으로 웹폰트로는 시스템 기본 폰트인 맑은 고딕이나 애플고딕, 돋움..

CSS/HTML 미리보기 편집기 웹사이트 'CSSDESK' 2020. 5. 14. CSSDESK 웹에서 CSS/HTML 편집 작업을 할 때, 바로바로 어떻게 표시되는지 확인하고 싶을 때 유용한 웹사이트 CSSDESK입니다. 굉장히 직관적이고 편리해서 자주 사용하지만, 단점은 아무래도 한글의 경우에 제대로 HTML에서 입력이 안되는 경우가 있습니다. 되기는 하는데, 붙여넣기 방식으로 넣어야 합니다. UTF이나 Language 언어 호환때문에 그런 것 같습니다. 기본 CSS 세팅이 되어 있기는 한데, 필요한 CSS 요소를 수정하면 아래와 같이 표시될 수 있습니다. HTML도 직접 넣어주시면 되는데, 아주 간단한 DIV 요소를 활용해서 아래와 같이 박스를 만들 수 있습니다. This is box. 이런식으로 간단한 HTML 코드를 넣어서 DIV 블럭을 만들어봤습니다. 특정 코드를 테스트하거..

소프트웨어의 제작과 배포 그리고 프로그래밍 2020. 4. 19. 프로그래밍 귀찮은 것은 싫고 노가다도 싫다면 역시 프로그래밍을 배우는 것이 좋은 것 같다. 그도 그럴 것이, 만약 반복 작업을 해야 하거나 귀찮은 것들을 해야 한다면 프로그램으로 쉽게 하는 것이 가장 편하기 때문이다. 그래서 프로그래밍을 배우는 건데, 쉽게 얘기하면 컴퓨터 언어를 배워서 언어대로 컴퓨터에게 명령하는 거다. 얼마나 편한가! 물론, 프로그래밍 언어를 배우는 일 자체가 귀찮을 수 있다. 만약 그정도라면 숨 쉬는 것도 귀찮아서 차라리 죽어버리는 것이 낫다고 생각할 수도 있겠지만, 그래도 프로그래밍 정도는 배우면 뭔가 쓰임새가 많다. 프로그램을 배포하는 것 까지는 상당한 시간이 걸리고 많은 테스트를 거쳐야 하지만, 능숙한 프로그래머는 프로그램 하나도 뚝딱 만들어낸다. 비교하는 것을 좋아하는 한국사..

<video> : 비디오 삽입 요소 간단 사용방법 2020. 3. 28. 간단 사용방법은 아래와 같습니다. 비디오 영상을 별도의 데이터베이스를 통해서 삽입할 필요 없이, 외부 주소값을 불러와서 아래의 요소로 적용시킬 수 있습니다. Autoplay 부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다. Buffered 미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 TimeRanges 객체를 포함합니다. Controls 이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다. Height 비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다. Loop 부울(boolean) ..

HTTP → HTTPS 리다이렉션 전환(.htaccess) 2020. 3. 27. 루트 위치에서 .htaccess 문서파일을 찾아 아래와 같이 작성해준다. 이 값을 추가하면 301, 302 리다이렉션 문제를 해결할 수 있다. 사이트 도메인을 변경하거나 SSL 도입할 경우에 HTTP 접속 주소값을 영구적으로 HTTPS로 리다이렉션을 해주는 방법이다. RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

트와이스 여성팬사이트 'Want' 2020. 3. 27. 트와이스 일반 팬사이트가 아닌 '여성 팬사이트'인 Want 팬사이트인데 정말 깔끔하게 잘 꾸며놨고, 글리터 패턴이 정말 예쁘게 잘 사용되었다. 컬러감각도 독특하고 디자인 자체가 예뻐서 많은 내용이 있는 팬사이트는 아니지만, 개인적으로 정말 마음에 드는 팬사이트라고 생각한다. 뭔가 커뮤니티 형식이라서 한국사람들이 이용하기에 간편하게 되어 있는 사이트라고 느낄 수 있다. 메뉴 상단 부분의 웹디자인 가장 기본 폰트로 사용되었으며, 사용된 색상값은 아래와 같다. ■ #28356C; ■ #B39976; 팬사이트를 제작할 계획이 있거나 웹디자인을 하는 사람이라면 심플하지만 세련된 디자인은 위와 같은 형식으로 제작하면 좋을 것이라고 생각한다. 이외에 푸터 부분은 갈색 톤으로 마무리하고 좌측 하단에 접속자와 우측에는 ..

유튜브 화면 일러스트(.AI) 소스·Source 2019. 12. 4. 유튜브 화면 일러스트(.AI) 유튜브 화면으로 활용하기 좋은 일러스트 파일, 다른 유튜브 아이콘이나 일러스트 파일보다 직관적이고 메뉴형태로 쉽게 활용할 수 있는 일러스트 파일 소스다.

이미지를 짜르지 않고 배경화면의 커버속성을 썸네일에 적용하는 방법 2019. 11. 9. 썸네일 이미지 깔끔하게 구현하는 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) 정리 2019. 11. 1. 자주 쓰는 특수문자를 HTML에서 쉽게 사용할 수 있는 방법으로는 &로 열고 엔티티 코드 이름을 적은 뒤에 ;로 닫으면 해당 문자를 사용할 수 있다. 한번 외워두면 다양한 웹페이지를 구성할 때, 매우 쉽게 사용할 수 있으니 자주 쓰는 문자코드는 꼭 외워두는 것이 좋다. 특히 세로 바(Vertical Bar)는 몰라서 못쓰는 경우가 많으니, 영문으로 쓰지 말고 문자로 쓰는 것이 폰트가 달라졌을 경우를 대비하여 중요한 요소라고 할 수 있다. 캐릭터 엔티티 이름 엔티티 번호 기술 & nbsp; & # 160; 줄 바꿈하지 않는 공백을 삽입합니다. & & amp; & # 38; 앰퍼샌드 " & quot; & # 34; 따옴표 © © & # 169; 저작권 기호 ® & reg; & # 174; 등록 된 기호 ™ ..