파비콘 추가 방법

비주얼스튜디오코드(vscode) 프로그램에...

hitomis.tistory.com

티스토리 블로그 hitomis에 2021년 1월 올라온 글로, 코드 에디터 VS Code(Visual Studio Code)에서 많이 쓰는 확장 플러그인 10가지를 추천하고 정리했다. 각 확장마다 어떤 기능인지 설명하고 설치 후 사용법을 함께 적었다. 예를 들어 첫 번째로 소개하는 Material Theme과 Material Icon Theme은 에디터 테마와 파일 아이콘을 바꾸는 플러그인으로, 설정 아이콘에서 Color Theme이나 File Icon Theme을 선택하는 방법과 고를 수 있는 테마 종류까지 안내한다. VS Code를 막 설치해 어떤 확장을 깔면 좋을지 모르는 개발 입문자나 작업 환경을 정비하려는 개발자에게 참고가 된다.

게시글

이미지 변경하기 attr()

태그내 속성을 변경하고자 할때 사용하는 attr()함수이다 이미지 변경 뿐만아니라 클래스명 변경 사이즈변경 모든것이 가능하다 이미지 변경하는 방법 마우스 오버시 이미지주소1로 변경된다 $("#_index_banner").attr("src","이미지주소1");

게시글

팝업창 옆에 팝업창 띄우기

팝업창을 띄울때 top,left는 고정되는데 상대적인 위치에 팝업창을 띄우고자 할때 사용하는 방법 var nWidth = "260"; var nHeight = "430"; // 듀얼 모니터인경우 var curX = window.screenLeft; var curY = window.screenTop; var curWidth = document.body.clientWidth; var curHeight = document.body.clientHeight; var nLeft = curX + (curWidth / 2) - (nWidth / 2); var nTop = curY + (curHeight / 2) - (nHeight / 2); var strOption = ""; strOption += "left=" + nLeft + "px,"; strOption += "top=" + nTop + "px,"; strOption += "width=" + nWidth + "px,"; strOption += "height=" + nHeight + "px,"; strOption += "toolbar=no,menubar=no,location=no,"; strOption += "resizable=yes,status=yes"; window.open(src, '', strOption);

Remix Icon 아이콘무료사용

remixicon.com

Remix Icon은 디자이너와 개발자를 위한 오픈소스 아이콘 라이브러리로, 3,200개가 넘는 중립적인 스타일의 아이콘을 제공한다. 각 아이콘은 선(Outlined)과 채움(Filled) 두 가지 스타일로 준비돼 있으며, 사이트에서 검색해 바로 내려받거나 복사할 수 있다. SVG 파일, 웹폰트(CDN·npm), SVG 스프라이트, React·Vue 패키지, Figma 플러그인 등 여러 형식으로 쓸 수 있고, 웹에서는 ri-아이콘명-스타일 형식의 클래스로 간단히 넣을 수 있다. Remix Icon License v1.0에 따라 상업적 용도로도 자유롭게 사용할 수 있다. 웹사이트나 앱 UI에 넣을 무료 아이콘을 찾는 개발자와 디자이너에게 유용하다.

게시글

공유기 사용하는 경우 포트를 통해서 특정 컴퓨터 접속하는 방법

집에서 사용하는 컴퓨터에 접속하고자 할경우 공유기를 사용할경우 접근하기가 쉽지않다 그럴때 포트를 활용해서 접근할수 있는데 "아이피주소:포트번호"를 입력하여 해당 컴퓨터에 접속할수 있다 이때 포트번호는 공유기에 물려 있는 가상아이피를 지정해줘야 접근할수 있다 집에서 컴퓨터를 켜고 FTP서버를 만들어 놓은다음 회사나 학교에서 집에 있는 컴퓨터의 ftp를 접속하여 파일 업로드 다운로드를 할수 있다 ftp를 설치하면 ftp서버 웹서버를 설치하면 홈페이지 등등 원하는 것을 사용할수 있게된다 iptime 공유기를 사용함 192.168.0.1 입력하게 되면 공유기 설정 화면이 나타난다 해당부분에서 로그인함 고급설정 > NAT/라우터 관리 > 포트포워드 설정 메뉴에서 포트설절 111.111.111.111:80 을 입력하게되면 공유기에 물려있는 192.168.0.9 컴퓨터에 접속하게된다 아이피 주소를 알고자 하는경우 기본설정> 시스템 요약 정보 > 외부 ip주소를 확인해보면 알수 있다

게시글

백그라운드 이미지에 padding값을 주는 방법

백그라운드를 노출할때에 공간을 띄우고 하고 싶을때가 있다 이럴때 다음과 같이 하면된다. style="background-image:url('이지지경로'); background-position:10px 20px;" x=>10px y=>20px 띄우게된다

ICON8

icons8.com

ICON8의 홈페이지 주소입니다. https://icons8.com/illustrations 굉장히 많은 수의 무료 일러스트 디자인을 찾아볼 수 있는 'ICON8'의 홈페이지 주소입니다. 정말 많은 수의 일러스트들이 있어서 새로운 것을 보여주고 싶은 디자이너들에게 점점 더 많이 알려져 가고 있습니다. 예를 들어 사람의 캐릭터만 해도 무려 3천 개가 넘는다 하니 말이 안 나올 지경입니다. 이런 특징들 때문에 '대량 일러스트 사이트'로 알려져 있습니다. 캐릭터도 추상적이거나 다양한 느낌을 주는 옵션 등이 있어서 디자이너 초보가 들어가서 이용해도 어느 정도 퀄리티를 뽑을 수 있다는 점이 정말 신기합니다. 또한 미리 모바일이나 웹사이트에 미리 적용해보는 기능도 있습니다. 섣불리 일러스트를 골랐다가 막상 모바일이나 웹사이트에는 어울리지 않는 경우도 꽤 있는데요. 이 사이트에서는 미리 이런 점들을 확인할 수 있다는 게 너무 좋습니다. 특히 많은 사람들이 정말 유용하다고 생각하는 분야는 바로 '편집' 기능입니다. 이 기능을 통해 다양한 리소스들을 마음껏 추가하고 색상이나 크기를 조절하고 배열해서 나만의 일러스트를 만들 수 있다는 점이 정말 대단합니다. 상업적이건 비상업적이건 다 자유롭게 활용할 수 있습니다만 다만 출처를 꼭 표기해야 합니다. 다운로드는 PNG만 가능하고요. 이런 점들은 꼭 조심해서 사용하셔야 합니다!

게시글

웹폰트를 사용해서 텍스트 폰트변경하기

웹폰트를 사용하는 방법이다 스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고 사용하고자 하는곳에 다음과같이 사용하면적용된다 웹폰트 NanumGothic.eot 장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다 이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다 그리고 적용되는 IE에서도 로딩과동시에 적용되는것이 아닌 페이지로딩후 조금 후에 글씨체가 변경된다 아무래도 해당 NanumGothic.eot 폰트를 불러오는 시간이 걸리는듯하다 그리고 기본적인 확장자는 ttf인데 이걸 eot파일로 변경한 후에 사용해야된다