CREATIVE

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

이매지네이션 라이브러리 KeyCodes (ALL keyboards) 키 코드 Key Codes This document is written by Helge Willum Larsen It contains a list of all "onkeypress", "onkeydown" and "onkeyup" KeyCodes in JavaScript, that can be typed with a DANISH KEYBOARD !!! Other keyboards probably have other KeyCodes. The first section is tested with the Microsoft Internet Explore 5.0 and the Netscape Communicator 4.51. At this time, Netscape didn't support "onkeydown" and "..
이매지네이션 라이브러리 <ruby> 태그 위첨자 사용방법 태그의 정의와 사용방법 태그는 일본어의 후리가나와 같이 해당 문자의 발음이나 설명을 위첨자로 표시할 수 있는 특징이 있습니다. 루비 주석(ruby annotation>을 정의할 때 사용할 수 있습니다. 일반적으로 태그는 태그와 태그와 함께 사용될 수 있습니다. 코드 예시 사용방법 米津玄師 MV「LOSER」歌詞かし 米津玄師 MV「LOSER」歌詞かし 이렇게 사용할 경우 와 부분은 윗첨자를 정의할 때 사용할 수 있습니다. 태그는 태그 내부에 위치합니다. 함께 사용할 수 있는 태그는 에서 요소를 지원하지 않는 브라우저에서만 표시될 문자를 정의할 수 있습니다. 보통은 자주 사용하지는 않는 태그입니다. 위 첨자로 표시되기때문에 rt 의 스타일시트를 지정해줘야합니다. 기본형은 line-height: normal;로 ..
이매지네이션 라이브러리 다크모드 라이트모드 토글 스위치 기능(Javascript/JQuery) 다크모드 라이트모드 토글 스위치 CSS와 JavaScript를 활용한 다크모드 라이트모드 토글 스위치 기능을 내 사이트에 추가하는 방법입니다. 해외 사이트들을 참고하여, 현재 적용되어 있는 그대로의 코드값입니다. 버튼의 형태나 디자인 등은 사용자의 취향에 맞게 수정할 수 있으며, 위치 등도 조절해서 사용하시길 바랍니다. 버튼이 아닌 라벨 태그로도 구성할 수 있습니다. 이 경우에는 버튼 태그로 HTML 블럭을 만들어주고 클릭시 발생하는 자바스크립트인 onclick()를 활용한 방법입니다. 이미지(해)와 이미지(달)간의 스위칭(토글전환)은 removeClass와 addClass 자바스크립트로 구성하며, 버튼은 클릭했을 때 toggleClass로 'dark'로 전환되는 과정입니다. HTML과 JavaScrip..
이매지네이션 라이브러리 CSS 이미지 스프라이트란 무엇일까? 이미지 스프라이트(image sprite) 웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러개의 이미지를 찾고 CSS로 해당 부분의 이미지만을 사용하는 것이죠. 이런 방식을 사용하는 이유는 웹 사이트의 로딩 시간을 줄이기 위해서입니다. 일반적인 블로그나 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 할 필요는 없지만, 트래픽이 매우 많거나 많은 사람이 이용하는 검색포털과 같은 사이트에서는 이렇게 아이콘 형식의 이미지들은 이미지 스프라이트를 사용하여 서버요청을 줄이고 웹 페이지의 로딩 시간을 단축시켜줍니다. 이렇게 하면 로딩시간이 작아지면서 사이트의 품질이 높아지는 결과를 가져올 수 있..
이매지네이션 라이브러리 운송장조회 HTML 및 스크립트 운송장조회 HTML 및 스크립트입니다. 깃헙에 올라온 내용이며, 택배사 등의 택배 및 항공화물을 조회할 수 있습니다. 택배 및 항공화물 조회 택배 및 항공화물 조회 업체명 선택해 주세요 경동택배 대신택배 대한항공 동부택배 로젠택배 범한판토스 우체국택배 일양로지스택배 천일택배 한덱스택배 한의사랑택배 한진택배 현대택배 CJ 대한통운택배 CVSnet편의점택배 DHL택배 FedEx택배 GTX로지스택배 KG옐로우캡택배 KGB택배 OCS택배 TNT Express UPS택배 송장번호 업체명 선택 후, 송장번호를 입력해주세요. 관련정보 우편번호 | 지역번호 | 영문주소
이매지네이션 라이브러리 b태그와 Strong태그의 차이 태그 사용에 있어서 b태그와 Strong태그의 보여지는 결과는 같습니다. 티스토리 에디터에서도 컨트롤 + B를 누르면 글씨가 굵어지면서 해당 적용 부분이 강조되는 것을 확인할 수 있습니다. 그렇다면, 보기에는 별 차이가 없는 b태그와 Strong 태그는 어떤 차이일까요? 바로 강조의 차이에 있습니다. 보기에는 적용된 부분이 굵어지는 것으로 결과가 같아보이지만, 웹 최신표준에서는 Strong 사용을 권고하고 있습니다. 즉, 글을 작성할 때 가능하다면 강조해야할 부분을 Strong 태그로 분류한다면 로봇이 해당 문서 내용을 '더 잘' 이해하고 검색에 반영한다고 이해하면 되겠습니다. 강조 하는 내용입니다. 강조 하는 내용입니다. 결과값 강조 하는 내용입니다. 강조 하는 내용입니다.
이매지네이션 라이브러리 라이트모드 다크모드 토글 스위치 CSS(Dark Mode toggle switch) 디자인 1) Switch Button See the Pen Switch Button by Hugo (@kapz) on CodePen. 2) Switch ButtonPure CSS Toggle Buttons | ON-OFF Switches See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen. 3)CodePen Home Pure CSS toggle buttons See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen. 4) Switch See the Pen Switch by Fabrice Lejeune ..
이매지네이션 라이브러리 [JavaScript] 타이핑 애니메이션 효과 JQuery 라이브러리를 통해서 쉽게 타이핑 애니메이션 효과를 적용할 수 있습니다. 순서대로 아래와 같이 설정한다면 5분 내에 적용이 가능합니다. 중요한 것은 타이핑 효과를 적용하고자 하는 곳에 블럭(HTML)을 넣고 자바스크립트 언어로 구현합니다. CDN / JQeury 라이브러리를 불러옵니다. 사용하고자 하는 위치에 HTML 블럭을 만듭니다. 자바스크립트 언어 코드로 텍스트를 적용합니다. 위는 예시이며, 다양한 효과를 적용할 수 있습니다. 메소드에 따라서 타이핑 속도나 타이핑 전환 속도 등을 구현할 수 있습니다. 옵션(Options) Name Type Default value Description strings String or Array null Strings to type out when using autoS..
이매지네이션 라이브러리 [JavaScript] D-Day 타이머 var ddaytimer = setInterval (dayGap, 1000) function dayGap () { var dday = new Date("November 24, 2017 00:00:00").getTime();// 디데이 var nowday = new Date();// 현재시각 nowday = nowday.getTime();// 밀리세컨드 단위변환 var distance = dday - nowday;// 남은 시간에서 현재시작을 뺀다. var d = Math.floor(distance / (1000 * 60 * 60 * 24));// 일 var h = Math.floor((distance / (1000*60*60)) % 24);// 시간 var m = Math.floor((distance /..
이매지네이션 라이브러리 Mac OS Dock CSS3 Mac OS Dock Menu with pure css3 and HTML? Possible? We have seen different types of menu in web applications. Different styles, different animations, different colors etc are used for menus. If you are familiar with Mac os, you must be knowing how the docker menu is. The Docker is the bar of icons that sits at the bottom of your screen. It provides easy access to some of the Apple applications o..
이매지네이션 라이브러리 IE에서 object-fit 속성처럼 적용하는 방법 IE에서는 object-fit 속성을 사용할 수 없다. 박스 내의 여백을 모두 채우면서 동일한 비율로 크기를 꽉 채우기 위해서는 여러가지 방법을 사용할 수 있는데, 이미지(img) 속성의 경우에는 object-fit: cover;로 쉽게 적용할 수 있다. 하지만, IE에서는 사용할 수 없고 IE11부터는 주석처리가 불가능하기 때문에 웹킷브라우저 등에서 사용이 가능한 object-fit: cover;와 같은 효과를 아래와 같은 방식으로 구현할 수 있다. -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) transl..
이매지네이션 라이브러리 [CSS] overflow 속성정리(hidden, auto, scroll) visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 나의 경우에는 overflow 속성을 사용할 때, hidden, auto, scroll 를 주로 사용한다. 이외에는 잘 사용하지 않는다고 보면 되는데, overflow 속성 자체가 어떤 요소가 박스 밖으로 넘어갈 때의 처리방법을 선언하는 속성이다. 보통은 텍스트에 사용하기도 하지만, 종종 이미지나 다른 요소에도 적용해서 사용하는 경우가 있다...
이매지네이션 라이브러리 [CSS]IE(익스플로러)에서 말줄임 또는 -webkit-line-clamp 이슈 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 일반적으로 말줄임은 위와 같은 속성을 사용한다. 영어 그대로 white-space(공백)은 공백처리를 어떻게 처리하면 좋을지 적용해주는 속성이고, overflow는 글이 요소 밖으로 넘칠 경우 가려주는 속성이다. 그리고 text-overflow는 텍스트가 요소 밖으로 넘쳤을 때 ellipsis(생략 부호)로 줄여주는 속성이다. -webkit- 속성은 IE에서 사용하지 못한다. 크롬, 사파리 등에서만 적용이 된다나, 그래서 위의 속성을 IE에서 적용할 수 없다면 다른 방법을 찾아봤다. 바로 IE 주석처리 방법이다. 결과적으로 말하면, 생략 부호는 적용할 수 없었고 텍스트 부분의 높이값만 적용하..
이매지네이션 라이브러리 CSS SVG/CSS Loader CSS SVG/CSS Loader SVG로 구현할 수 있는 CSS 로더, 티스토리 에디터에서는 적용한 HTML과 CSS 가 실시간 구현되지는 않지만, 컨텐츠에 적용할 수 있다는 것만으로도 매우 좋은 장점을 가지고 있다. 자주 사용하지는 않겠지만, 필요한 요소에 사이즈 정도를 조절하여 구현하면 굉장히 예쁘게 사용할 수 있을 것 같은 SVG 로더다. 딱히, 단점이라고 할 필요는 없지만 HTML 편집 상태에서 텍스트를 작성해야 하기 때문이, 일반적인 웹 에디터에서 글을 쓸 때와는 확실히 느낌이 다른 것 같다. 해당 로더의 제작자는 Loader SVG/CSS by Bidji (@Bidji)이며(This loader uses the changing colours to give the impression of ro..
이매지네이션 라이브러리 [CSS] 이미지 애니메이션 효과 적용하기(Keyframe) 이미지 키프레임 애니메이션 효과[CSS] - animista.net 짧게 정리하는 유용한 사이트, CSS 키프레임 속성을 통해서 이미지에 애니메이션 효과를 줄 수 있다. 마우스 오버를 할 경우 이미지를 확대하게 하거나 플립(뒤짚다)효과를 줄 수도 있고, 여러가지 효과들이 많이 있다. 사이트가 무거워지는 것이 싫어서 애니메이션 효과는 가급적 지양하는 편인데, 잘만 사용하면 굉장히 생동감 넘치는 사이트를 만들 수 있다. 정말 유용하며, 다양한 효과를 제공한다. 어디까지나 이미지 뿐만 아니라 텍스트에도 적용이 가능하고 어떻게 구성하느냐에 따라서 다양하게 활용할 수 있을 것이다. 예를 들면, 로고 같은 곳에다가 적용해도 참 예쁘게 적용이 가능할 것이라고 생각된다. 참조 CSS 애니메이션 사용하기 - CSS: C..
이매지네이션 라이브러리 [CSS] Font-Smoothing 안티앨리어싱 속성 Font-Smoothing 웹폰트를 적용할 때, Font-Smoothing 속성의 안티앨리어싱 속성을 적용하면 폰트가 더욱 부드럽게 보일 수 있다. 하지만, 반대로 이야기하면 선명함은 떨어질 수 있다는 얘기다. 따라서, 폰트를 선명하게 하고 싶다면 안티앨리어싱을 적용하는 것이 오히려 역효과일 수 있다. 힌팅이 떨어지는 폰트거나, 뭉개지는 폰트에 안티앨리어싱 효과를 적용하면 훨씬 부드럽고 포토샵으로 디자인 한 것처럼 적용된 글꼴을 적용할 수 있을 것이다. 다만, Font-Smoothing 속성 자체가 Webkit 기반의 Safari와 Chrome에서만 사용이 가능하기 때문에, 브라우징 호환 문제가 있을 수 있다. 속성 적용 방법은 아래와 같이 선언합니다. -webkit-font-smoothing: anti..