퍼즐 놀이 퍼즐 놀이

쇼핑몰 사이트를 구성하다보면 헤더나 푸터 상품리스팅 등 작은 폰트들이 들어가는 위치들이 있다. 하지만 예쁜 폰트에만 초점을 맞추면 사용자들이 불편함을 느끼기 마련이다.  웹폰트 14px 기준에서 가독성 좋은 예쁜 폰트는 어떤게 있을까.자, 여기서 14px는 무슨 기준일까? 한글은 'ㄹ', 'ㅎ'이 들어가는 글자의 경우 글씨가 작아지면서 인식이 어려워 지는 단점이 있다. 기본적으로 Regular 폰트를 사용하면서 가독성이 좋아지길 바란다면 14px이상으로 세팅해보자.그러면 사용자의 시력을 지켜주는 좋은 디자이너가 될 것이다.  1. Noto Sans Korean말모~말모~ 기본중의 기본 Noto.딱히 폰트를 뭐 선택해야 할지 모르겠다 싶을 때는 그냥 Noto Sans를 쓰면 된다.구글에서 만들었으니 평타는..

반응형이 많이 쓰이는 요즘 더 이상 이미지로 화살표나 X버튼을 만들어서 이미지가 깨지거나 수정시 하게 되는 업로드의 불편함을 줄여주는 방법이 되겠다. 화살표 만들기 1. ::after에 border와 transform을 활용해서 만드는 방법 .arrow {position: relative;} .arrow::after {position: absolute; left: 0; top: 0; content: ''; width: 50px; height: 50px; border-top: 5px solid #000; border-right: 5px solid #000; transform: rotate(225deg);} transform 값 4개정도는 알아두고 적절하게 활용하자. 45deg, ∧ 315deg, ∨ ..

1. checked 여부 확인 $("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */ $("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ 2. checked/unchecked 처리 $("input:checkbox[id='ID']").prop("checked", true); /* by ID */ $("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ 3. 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제 $("input:radio[name='NAME']:radio[value='..

저는 웹디자인을 10년이상을 한 나름 기초지식은 있다고 생각하는 비전공자 입니다.작년에 6개월간 프론트엔드&퍼블리셔 전문가 과정을 듣고 좀 더 개발자스럽게 변해보려고 시도중인데요.개발자들은 필수로 가지고 있는 정보처리기사 자격증을 따보려 합니다. 일단 이 한번을 위해 책을 사기엔 무리가 있는 듯 해서 열심히 구글링을 해본 결과역시 인터넷은 정보의 바다 라는 걸 새삼스레 느끼며 공부하기 전에 정리를 해보려 합니다. 개발 공부하면서 배우던 것들도 있고, IT직종인데다가 기초지식은 더러 있다고 생각하기때문에...요약집을 훓어보고 기출문제를 미친듯이 풀 예정입니다. 01. 요약집 훓어보기 '합격시켜 드릴께요!! 정보처리기사 필기요약' 제목에 혹해서 네이버 블로거 이기쥬히님의 도움을 받아보고 진행해 보려 합니다...

웹사이트를 만들다보면 Contact 페이지에 지도를 넣게 되는데요.구글맵 API를 이용해서 하는 방법을 소개해 드리겠습니다.어려운 건 없으니 따라해 보시면 될꺼예요. https://developers.google.com/maps/?hl=ko구글 API는 너무 자세히 나와 있어서 포스팅이 무색하긴 하네요. Android, iOS, 웹 브라우저 및 HTTP 웹 서비스를 통해 이용할 수 있어요.그중에 저는 웹브라우저에 사용하는 방법을 알려드리겠습니다. 01. HTML내에 자리 만들어주기html 안에 자리를 만들어 주고 id값을 지정해 줍니다. 02. 스크립트 추가하기구글맵을 불러올 수 있는 자바스크립트를 추가해 줍니다. zoom이 0이면 완전히 축소된 지도이고, 확대/축소 수준이 높아질수록 더 높은 해상도로 ..

포토샵에서 텍스트를 적용하다 보면 행간이 auto로 되어 있으나 두 배 이상의 높이로 지정되어난감한 적이 있을 것이다. 이럴 땐 간단히 해 볼 수 있는 방법이 두가지로 나눌 수 있다.01. character 설정을 리셋 해본다.02. Paragraph에서 설정을 바꿔준다. 첫번째는 별 소득이 없을 가능성이 크다. (내 경우는 그랬으니까;;)두번쨰 방법으로 하면 간단히 해결 할 수 있는 부분이다. Paragraph에 들어가면 행간을 조절하는 pt값이 보일 것이다.그 부분을 내가 원하는 만큼 지정해 주면 끝! 하지만,Auto Leading 값을 수정해두고 쓰시면 수정해둔 auto값으로 항상 행간값이 유지되는 것이 함정!Paragraph 설정에서 보시면 Justification이라는 것이 있는데여기서 Auto..

코딩을 하다보니 이 크로스브라우징 제대로 되지 않는게 확인 된다.기본으로 설정을 했을 때는 문제가 없었으나디자인적인 요소 적용을 했을 때가 문제였다.200px 가로 사이즈의 짧은 구분선을 지정해서 확인해보니크롬에서 확인했을 때 좌측정렬로 잘 보였으나익스에서는 중앙정렬로 보이면서 디자인이 일그러져 버렸다. ㅠㅠ 크로스브라우징을 생각한다면 대신 로 하는 게 현재로써는 가장 편한 방법이지 싶다.

웹디자인을 하다보면 무심코 지나치게 되는 부분 중에 하나가 저작권법 표기다.이 또한 한글 표기가 아니기에 우리는 눈에 익숙한걸 쓰게 마련인 것 같다.올바른 표기로 되어 있던 것들은 어서 고쳐버리고 웃음거리가 되지 않도록 하자. 잘못된 표기법※---는 저작권자 또른 사이트명 등이 들어가는 위치. Copyright ⓒ --By. ---Made by ---Made in ---Copyright in ---Copyright ⓒ 2016 by --- All Pictures cannot be copied without permissionCopyright (C) 2016 --- all rights reserved.Copyright for --- all rights reserved. 위에서 보면 ⓒ 나 (C)는 이 자체..