WEB개발이야기/Node.js 2018. 7. 10.
Node.js의 유용한 모듈 소개
Node.js에서는 475,000개에 달하는 정말 많은 모듈이 존재합니다. 그중에서 제가 사용해 봤던 몇몇 유용한 모듈을 소개할까 합니다. 1. url (표준모듈) url 모듈은 상대URL을 절대URL로 변경 해주는 등 url 사용에 대한 다양한 기능을 제공하고 있습니다. 간단한 기능 API는 아래와 같습니다. url.resolve(from, to) // 상대경로를 절대경로로 변경하여 줍니다. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) // url 문자열(urlStr)을 url 객체로 변환하여 리턴합니다. url.format(urlObj) // urlObj객체를 URL문자열로 변환하여 리턴합니다. 1.1. 설치 표준모듈이라 Node.js에 포..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
CSS로 그럴듯한 버튼효과를 내보자
별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 코드설명 HTML HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다. BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 CSS .btn의 설정으로 기본형태를 정의합니다. 아래쪽에 있는 transition과 color속성이 중요하다 할 수 있습니다. .btn { display:block; width:200px; height:40px; line-height:40px; border:1px #3399dd solid;; ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
레이아웃의 다단을 100% 로 맞추기
예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
완벽한 CSS3 선택자 총정리
CSS3를 잘 활용하기 위해서는 먼저 선택자를 확실히 알고 넘어가야 합니다. 선택자란 내가 손을 보고자 원하는 HTML테그를 정확히 집어내는 것을 말합니다. 자주 사용하는 선택자의 경우는 잃어버릴 일이 거의 없지만 자주 사용하지 않는 선택자는 잘 생각이 나지 않는경우가 많습니다. 그것을 대비해서 일단 CSS3의 선택자를 정리해 놓으려고 합니다. 제가 잘 활용하려고 정리하는 목적이 크지만 처음보시는 분도 도움이 될 수 있도록 정리해 놓겠습니다. 선택자는 기본 선택자, 속성 선택자, 상태 선택자로 나눌수 있습니다. 기본 선택자 가장 기본이 되는 선택자로 CSS를 다루시는 분이라면 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS버전 * 모든 요소 선택 2 E 태그명이 E인 요소 선택 1 #myIDname..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
무료로 아이콘 폰트 사용하기 - XEICON 편
웹사이트를 개발 시 아이콘을 제작하려고 하는데 딱히 디자이너가 없는경우~, 아이콘을 사용하고 싶은데 라이선스를 구매하기 어려운경우~ 이렇때 고맙게도 무료이면서 간단하게 아이콘을 사용할 수 있는 방법이 있습니다. 대표적으로 폰트어썸이 있지만 우리나라에서도 서비스를 해주는 곳이 있습니다. 바로 XEICON 입니다. XEICON XEICON 홈페이지 바로가기 XEICON은 예전에는 제로보드로 이름을 날렸고 현재는 Xpressengine이라는 브랜드네임으로 서비스를 하고 있는 XE프로젝트에서 Fonts형 아이콘 형태로 무료 서비스를 하고 있는 웹사이트입니다. 이 XE프로젝트는 현재 네이버에서 서포트를 받고 있기 때문에 쉽게 사라지지는 않을 듯 합니다. Fonts형 아이콘을 무료로 제공하고 있는 원조격인 폰트어썸..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
폰트어썸 (Font Awesome) 아이콘 폰트 사용하기
아이콘 폰트인 폰트어썸 (Font Awesome)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000여개의 star를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 있긴하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개나 되어서 상당히 인기가 높습니다. 다만 주의 할 점은 GPL라이선스를 따른다는 것입니다. GPL라이선스는…… 설치 방법 설치는 크게 2가..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
나만의 아이콘 폰트(Icon font) 만들기
정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법에 대해서 정리해 보려고 합니다. 아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 나만의 아이콘 폰트 만들기 오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다. 다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다. 아이콘 폰트를 만들어..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
구글 머티리얼 아이콘(Material icons) 폰트 사용하기
아이콘 폰트인 구글 머티리얼 아이콘 (Google Material icons)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 구글 머티리얼 아이콘 (Google Material icons) 구글 머티리얼 아이콘 홈페이지바로가기 구글에서도 머티리얼 아이콘을 무료로 사용할 수 있게 공개를 했습니다. 구글 머티리얼 아이콘은 웹폰트형식 뿐만이 아니라 안드로이드나 아이폰에서도 사용할 수 있게 SVG와 PNG 형식으로도 아이콘을 제공을 하고 있습니다. 여기서는 다른사이트와 동일하게 웹폰트형식의 아이콘 폰트를 사용할 수 있는 방법에 대해서만 설명을 하도록 하겠습니다. 설치 방법 설치는 크게 2가지로 나누어..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
아이콘 폰트(Icon font) 자유자제로 사용하기
웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘은 필수로 들어가는 요소입니다. 간단하게는 블릿에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 사이트들이 생겨나고 있습니다. 그 중에서도 아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있게 제공을 하고 있습니다. 예전에 이런 것을 딩벳 폰트라고 했었는데.. 이제는 웹폰트형식으로도 무료 제공하고 있어서 웹사이트에 쉽게 적용할 수가 ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
이미지 하단에 생기는 이상한 공백 없애기
HTML로 레이아웃을 설정하다보면 DIV태그 안 이나 P태그 안에 이미지가 있는 경우 이미지 하단에 약 1~3px정도의 공백이 생기는 경우를 볼 수 있습니다. 그 공백을 없애려고 이리 찾아보고 저리 찾아봐도 해결이 잘 되지 않는데요. 이것을 없애는 방법을 정리해 보려고 합니다. ▲ 하단에 파란색의 공백이 있음(표시를 위해 백그라운드색을 파란색으로 했음) 원인 위와 같이 Image를 DIV나 Table에 넣을 경우 하단에 원치않는 공백이 생깁니다. 그 이유는 Image가 인라인 요소이기 때문에 그런 것입니다. 인라인 요소의 경우 블록 요소와 달리 보이지 않는 가상의 기준선이 존재를 하는데 기본값으로 vertical-align의 baseline에 위치를 하게 됩니다. baseline은 영문 소문자로 치자면 ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
HTML5 태그의 블록 요소와 인라인 요소
HTML의 태그는 크게 블록 요소(block element)와 인라인 요소(inline element)로 나누어 집니다. 이 부분을 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 "왜 적용이 되지 않지?" 라는 상황이 발생할 수 있습니다. 예를들면…. 인라인 요소는 height가 적용되지 않는다. 인라인 요소는 width가 적용되지 않는다. 인라인 요소는 text-align이 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록요소 (block element) 블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
웹디자이너라면 꼭 알아야 할 Flexbox Layout
웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table을 이용하여 화면의 레이아웃을 잡았고 웹표준, 웹접근성이 이슈화 되면서 시멘틱한 마크업이 대세가 되면서 CSS의 DIV를 이용한 방법으로 레이아웃을 잡았습니다. CSS3로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox를 사용하여 구현하는 것이 최선이라 할 수 있습니다. 그래서 웹디자이너나 Frontend 개발자라면 꼭 이해를 하고 넘어가야 하는 요소입니다. Flexbox의 브라우저별 지원 현황 브라우저별 Flex 지원은 현재 대부분의 브라우저가 지원하고 있다고 보면 되고 Intern..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
크롬에서 input, textarea, button에 생기는 파란색 테두리 없애는 방법
웹디자인을 하다보면 input이나 textarea등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input이나 textarea에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline은 border와 흡사한 방식으로 css로 핸들링을 할 수 있습니다. 그래서 그냥 focus되는 영역의 outline의 두께를 0으로 만들면 됩니다. 주로 input이나 textarea, button 요소에 생..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
CSS에서 ellipsis('...')를 처리하는 방법
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '…'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. 통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다 .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
반응형웹에 대한 미디어쿼리의 사용
처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고… 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해 줘야 합니다. meta viewport의 width를 device-width로 지정하고 initial-scale을 1로 설정을 해 줘야 합니다. width=device-width : 화면의 넓이를 디바이스(단말기)..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
스크롤에 따라 배경이미지의 시차가 다르게 움직이는 Parallax_ImageScroll
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. **홈페이지 : ** [https://github.com/pederan/Parallax-ImageScroll](https://github.com/pederan/Parallax-ImageScroll) **DEMO : ** [http://codepen.io/pederan/full/Hheuy](http://codepen.io/pederan/full/Hheuy) **라이선스 : ** MIT Install bower로 설치할 경우 bower inst..
WEB디자인이야기/WEB디자인 2018. 7. 10.
더미 이미지를 무료로 제공해 주는 사이트를 소개합니다.
웹사이트 개발 시 더미 이미지가 필요한 경우가 있습니다. 레이아웃을 잡는 거라 특별히 의미가 없는 이미지만 필요한 경우 어디서 구하기도 힘들고 저작권도 신경쓰이고 할때 임시로 이미지를 제공해 주는 사이트가 있습니다. 사용법도 아주 쉽게 적용이 가능 합니다. 다만 인터넷이 연결이 되어 있어야 합니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 웹사이트 : http://placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. 디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 ..
IT이야기/컴퓨터 2018. 7. 10.
탐색기를 넘어선 멀티탐색기인 Q-Dir의 활용
윈도우즈의 파일탐색기는 컴퓨터를 사용하는데 굉장히 유용한 도구 입니다. 물론 컴퓨터에 기본으로 설치되어 있는 탐색기도 매우 훌륭하지만 몇가지 아쉬운 부분이 있는것은 사실입니다. 이번에 Posting하는 Q-dir은 기본 파일탐색기에는 없는 멀티창, 작업위치 저장, 바로가기 기능 등.. 소소하지만 유용한 기능들을 포함하고 있어 사용자의 가려웠던 부분을 일부 해소해 줄 수 있을 것 같습니다. 설치하기 홈페이지에서 다운로드 받기 먼저 Q-dir 홈페이지에서 Qdir을 다운로드 받아야 합니다. 설치형 버전이 있고 무설치형(Portable)버전이 있습니다. 또한 각각의 버전마다 32bit용이 있고 64bit용이 있습니다. 설치형 버전 : 자신의 컴퓨터가 몇 비트인지 확인 후 맞는 것을 다운로드 받으셔서 설치하면 ..
WEB개발이야기/Git 2018. 7. 10.
gogs로 시놀로지의 Git Server을 Github처럼 사용하는 방법
시놀로지에는 기본 패키지로 Git Server가 있습니다. 이것을 설치하고 실행을 하려면 SSH나 Telnet로 접속을 해서 CLI 명령어를 키보드로 쳐 줘야 사용할 수 있습니다. 하지만 이것에 추가로 Git Server를 Web 서비스 형태로 다룰 수 있게 해주는 추가 패키지를 설치하면 Github처럼 Web화면에서 서버를 서비스 할 수 있게 됩니다. Git Server를 Web 형식으로 다룰 수 있는 무료 소스는 여러가지가 있으나 그중에 가장 많은 추천을 받고 있고, 시놀로지용 패키지인 .spk를 제공하고 있는 Gogs를 설치하여 사용하는 방법을 포스팅하려고 합니다. 설치형 무료 Git 서비스 서비스명 설명 URL Bonobo Git Server 설치형 git서비스 (Win) https://bonob..
IT이야기/Office프로그램 2018. 7. 10.
엑셀에서 콤보박스 지정하기
엑셀을 자주 사용하지만 심도깊은 기능을 사용하려면 항상 해메기 마련이지요. 그중에 콤보박스를 설정하는 방법에 대해서도 몇가지 작업을 병행해야해서 자주 잊어버리는 기능중 하나입니다. 그래서 아래에 정리해 둡니다. 참조표 작성 먼저 콤보박스에서 목록으로 사용할 참조표를 작성해야 합니다. 1번의 "차계부항목"쉬트에 그림과 같이 콤보박스에 나타날 목록을 적습니다. 해당 항목은 2번의 "차계부"쉬트에서 사용할 것입니다. 참조표 이름지정 해당 참조표에 아래와 같이 선택하고 이름을 지정해 줍니다. 마우스의 오른클릭을 한후 "이름정의"를 선택합니다. "이름정의"를 선택하면 아래와 같이 팝업창이 뜨는데 관련이름을 임의로 작성을 합니다. 2번의 참조대상은 위의 이미지에서 선택을 한 부분이 자동으로 들어오며 나중에 수정도 ..
IT이야기/무료프로그램 2018. 7. 10.
맥가이버칼 같은 만능 디자인 툴 picpick
맥가이버에게 스위스밀리터리 칼이 있는 것 처럼 디자이너에게는 굉장히 유용하게 사용할 수 있는 만능 디자인 툴인 픽픽(picpick)이 있습니다. 기업 및 단체 또는 개인을 포함한 모든 사용자가 무료로 사용할 수 있으며 상당히 완성도가 높아서 유용하게 사용할 수 있습니다. 다양한 기능 화면 캡처 화면 스크롤 캡처, 전체 영역, 선택 영역, 활성화된 영역, 고정된 영역, 듀얼 모니터 캡처 등 다양한 캡처 기능을 제공하고 있습니다. 직관적인 이미지 편집 기능 그리기, 자르기, 삽입 (텍스트, 화살표, 도형, 말풍선, 스탬프), 형광펜, 하이라이트 효과 등 간단한 이미지 편집 기능이 있습니다. 고급 이미지 효과 및 필터 그림자, 테두리 및 액자, 모자이크, 워터마크, 흐리기, 반전, 이미지 회전, 크기 변경, ..
IT이야기/무료프로그램 2018. 7. 10.
Telnet 접속을 위한 무료프로그램 한글판 PuTTY
Telnet이나 보안접속인 SSH를 접속하기 위한 무료프로그램 Putty를 소개합니다. 윈도우의 CMD에서 telnet을 실행 시킬 수도 있지만 좀더 전문적 프로그램이 필요할 떄 사용하면 됩니다. PuTTY는 무엇보다도 SSH접속이 가능해서 보안 접속에 많이 사용하는 프로그램 입니다. KLDP의 몇몇 훌륭하신 분들이 한글화 작업을 하여 무료로 배포를 하고 있습니다. 해당 사이트에서 다운로드 받아 설치를 하면 되고 설치 방법이 어렵지는 않습니다. 설치를 하면 아래와 같은 화면이 나옵니다. 임시로 사용할 경우는 "접속 대상 정보"에 IP 또는 URL을 입력하시면 되고 접속형식을 선택한다음 하단의 "열기" 버튼을 누르면 접속이 가능합니다. 또한 세션을 저장하여 지속적으로 사용할 수 도 있습니다. 오픈소스-MI..
IT이야기/컴퓨터 2018. 7. 10.
Windows에서 "잠금을 해제하려면 Ctrl+Alt+Del을 누르세요" 화면 피해가기
보안을 위해서 세팅된 잠금을 해제하려면 Ctrl+Alt+Del을 누르세요 라는 메시지가 나오는 화면을 본적이 있을 것입니다. 한동안 컴퓨터를 사용하지 않다가 다시 컴퓨터를 건들게 되면 바로 로그인화면이 나오는 것이 아니라 잠금을 해제하려면 Ctrl+Alt+Del을 누르세요 라는 창이 먼저 나오는 것을 볼 수 있습니다. 보안을 위해 필요한 절차이기는 하지만 가정집이나 기타 보안이 크게 중요하지 않은경우는 귀찮은 것이 사실입니다. 이럴경우 해당 창을 건너뛰기 해서 바로 로그인창이 나오게 할 수 있는 방법이 있습니다. 해당문제를 해결하기 위해서는 데스크탑에서 로컬그룹 정책을 수정해야 합니다. 로컬그룹 정책창 열기 컴퓨터의 시작버튼을 누른면 나오는 명령어 입력창이나 윈도우키 + R버튼을 누른면 나오는 명령어 입..
IT이야기/컴퓨터 2018. 7. 10.
Windows7 에서 WebDAV 연결하는 방법
Windows7의 경우 WebDAV가 연결이 잘 되지 않을 때가 있다. 그때는 아래와 같이 레지스트리를 조금 만져주면 된다. 레지스트리 편집기를 열어 아래 위치를 찾는다 실행 > regedit HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters 아래 키의 값을 1에서 2로 수정한다. 키 이름 : BasicAuthLevel 값(Value) : 2 (키 이름이 없다면 새로 만들기 -> DWORD Value) 각 값이 의미하는 것은 다음과 같다 0 - Basic authentication disabled 1 - Basic authentication enabled for SSL shares only 2 or greater - Bas..
IT이야기/기타 2018. 7. 10.
다후아 IP카메라(IPC-A35) 초기 설정하기
국내 시놀로지 NAS 총판인 에이블스토어에 판매하고 있는 IP카메라인 다후아(Dahua)가 시놀로지 NAS와 호환이 잘된다고 하여 구매를 하였습니다. 가정용으로 사용할 것이므로 DH-IPC-AW12W와 비슷한 DH-IPC-A35를 해외배송으로 구매를 했습니다. 잊어버릴것 같아 처음 IP카메라를 설치하고 초기세팅하는 것을 포스팅 합니다. === 첫 연결 로그인 카메라 방향설정 무선(WIFI) 연결하기 무선IP 설정하기 첫 연결 카메라를 설치하고 랜케이블(유선)을 연결합니다. 처음부터 무선이 연결되지 않으니 유선으로 세팅을 하고 무선을 이용하는 방식으로 사용합니다. 공유기에 랜케이블을 연결하면 DHCP에 의해 자동으로 IP가 할당이 됩니다. 할당된 IP를 브라우저로 접속을 하면 IP카메라에 접속을 할 수 있..
IT이야기/컴퓨터 2018. 7. 10.
win10에서 hosts파일 수정하기
개발을 하다보면 임의로 hosts파일을 변경해야 하는 경우가 있습니다. 이럴경우 Windows 7 버전 이하는 관리자 권환으로 쉽게 수정이 가능한데 windows10버전에서는 관리자권한으로 작업을 한다고 해도 쉽게 수정이 되지 않습니다. 더욱이나 64비트인경우는 그냥 수정이 되지 않습니다. === 이럴경우 아래와 같이 수정하시면 수정이 가능합니다. 안전모드 부팅 hosts파일을 관리자권한으로 수정 재부팅 완료 그럼 좀더 자세히 작성을 해보도록 하겠습니다. 안전모드 부팅 windows10에서 안전모드부팅하는 방법이 몇가지 있으나 저는 1가지만 포스팅하도록 하겠습니다. 업데이트 및 복구 모드를 통해서 1회 안전모드로 재부팅하는 방법입니다. 순서 요약 업데이트 및 복구 선택 복구 선택 고급 시작 옵션 선택 화..
UXUI이야기 2018. 7. 10.
HUD를 넘어서 이제 해드램프로 네비게이션을한다
자동차 오너로써 HUD (전방표시장치 [Head Up Display])만 봐도 대단해 보이는데 해드램프를 이용한 네비게이션까지 나온다고 하니 UX 발전의 끝은 어디인가 하는 생각이 듭니다. 메르세데스-벤츠에서 해드램프를 이용한 네비게이션인 디지털 라이트(Digital Light)를 공개했다고 합니다. 디지털 라이트를 쉽게 설명한다면 해드라이트에 고성능 프로젝터를 달아놓은 것이라고 보면 될것 같은데요. 메르세데스-벤츠는 눈부심 방지가 적용된 2백만 픽셀의 해상도에 해당하는 헤드 라이트를 장착헸디고 합니다. 그래서 주행 중 상황에 따라 다양한 심볼을 보여주기도 하고 네비게이션 가이드도 띄워 주기도 한다고 합니다. 해당 기술은 운전자뿐만 아니라 길을 건너는 보행자에게도 도움을 준다고 합니다. 보행자가 안전하게..
UXUI이야기 2018. 7. 10.
아마존에서 준비중인 드론배송 특허 3가지
아마존에서 드론배송에 대한 다양한 특허를 계속적으로 신청을 하고 있습니다. 어떻게 보면 말도 안되게 병맛인 특허들도 많은데 그중에서 그래도 있으면 좋을것 같은 특허 3가지를 소개해 볼까 합니다. 드론 배송 센터 벌집을 연상시키는 모양의 드론 배송센터에 대한 특허 입니다. 이것은 장거리 배송보다는 도심지의 단거리 배송에 특화된 것이라고 할 수 있습니다. 아직까지 드론의 고질적인 문제인 짧은 배터리 성능이나 고장 등 의 이유로 장거리 운항이 힘들기 때문에 그런것 같습니다. 대략적인 운영 방법은 배송차나 대용량 드론으로 배송할 물건을 배송센터의 타워에 적재를 하면 개개의 배송용 드론이 픽업을 해서 배송지에 배송을 해 주는 형태라고 합니다. 현재는 법적인 문제가 있다고 하는데 향후 법적인 문제가 해결될 경우 요..
UXUI이야기 2018. 7. 10.
BMW의 새로운 도전!! 무선충전시스템의 양산
전기차가 지속적으로 발전을 하고 있고 현재는 한번 충전으로 거의 300km ~ 390km까지 달릴수 있는 차가 대세를 이루고 있는 상황입니다. 그정도 거리면 서울에서 부산까지 편도로 한번 찍을 수 있는 거리인데요. 그것 까지는 대단히 좋은 성과라 할 수 있습니다. 하지만 항상 그 다음이 문제가 되는 것은 그럼 어떻게 다시 서울로 올라오느냐 입니다. 그렇습니다. 바로 충전의 문제 입니다. 빠른 속도로 충전을 하든, 편하게 충전을 하든, 배터리를 교체를 하든, 수소를 집어 넣든, 어째튼 동력을 어떤식으로 얻어 내느냐도 전기차 대중화에 중요한 문제라고 할 수 있습니다. 그런 와중에 BMW가 상용차 생산업체로는 최초로 무선충전시스템의 양산을 하기 시작했다고 합니다. BMW 530e iPerformance 모델에..
