본문 바로가기

분류 전체보기168

01. Hello jQyery jQuery란? jQuery의 목적은 웹 사이트에서 JavaScript를 훨씬 쉽게 사용할 수 있도록하는 것입니다. 여러 줄의 자바스크립트로 처리해야 할 작업을 한줄로 처리할 수 있도록 합니다. 예를 들어 폰트 사이즈를 35px로 변경하는 스크립트를 작성하려고 한다면... jQuery를 이용하면 훨씬 쉽게 작성할 수 있습니다. javascript document.getElementById("demo").style.fontSize = "35px"; jQuery $("#demo").css("font-size", "35px"); 웹페이지에 jQuery 추가 jQuery를 사용하려면 jQuery 라이브러리가 필요합니다. 아래의 2가지 방법으로 연결하여 사용할 수 있습니다. 1. jQuery 다운로드 아래 사이트.. 2020. 8. 20.
06. 객체 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/06-object.html 06. 객체 · GitBook 06. 객체 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age); 결과물은 다 learnjs.vlpt.us 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age).. 2020. 8. 19.
05. 함수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/05-function.html 05. 함수 · GitBook 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. 한번, 이 작업을 함수로 만� learnjs.vlpt.us 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. const a = 1; const b = 2; const sum = a + b; 한번, 이 작업을 함수로 만들어보겠습니다. function add(a, b) { r.. 2020. 8. 19.
04. 조건문 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/04-conditions.html 04. 조건문 · GitBook 04. 조건문 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한�� learnjs.vlpt.us 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한번 봅시다. const a = 1; if (a + 1 === 2) { console.log('a + 1 이 2 .. 2020. 8. 18.
03. 연산자 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/03-operator.html 03. 연산자 · GitBook 03. 연산자 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let learnjs.vlpt.us 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let value = 1; // 변수 선언 value = 2; // 대입 연산자 여기서 두번째 줄에서 사용된 = 문자가 바로 연산자입니다. 연산자의 종류.. 2020. 8. 17.
02. 변수와 상수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/02-variables.html 02. 변수 · GitBook 02. 변수와 상수 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러 learnjs.vlpt.us 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러면, 코드를 이렇게 입력하면 됩니다. let value = 1; 그러면, 앞으로 우리가 value 를 조회하면 value 는 1을 가르키게.. 2020. 8. 17.
01. Hello JavaScript! [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/01-hello-javascript.html 01. Hello JavaScript · GitBook 자바스크립트는 여러분의 브라우저에서 언제든지 사용 할 수 있습니다. 만약 현재 여러분이 크롬브라우저가 아닌 다른 브라우저를 사용중이라면 크롬을 설치하여 실행해보세요. 그리고 개발자 learnjs.vlpt.us 자바스크립트는 여러분의 브라우저에서 언제든지 사용 할 수 있습니다. 만약 현재 여러분이 크롬브라우저가 아닌 다른 브라우저를 사용중이라면 크롬을 설치하여 실행해보세요. 그리고 개발자 도구를 열어보세요. 개발자 도구는 윈도우 Ctrl + Shift + I 또는 macOS Command + Option + .. 2020. 8. 17.
macOS, 파이썬 API 마인크래프트 서버 설치 맥을 기준으로 한 설치 및 설정입니다. 1.마인크래프트설치 -http://minecraft.net 에서 구입하여 설치합니다. 2.파이썬 3.5.6 설치 및 설정 -brew설치 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” -파이썬 설치 및 확인 $ brew install python3 $ python3 —version 3.JDK SE설치 -http://www.oracle.com/technetwork/java/javase/downloads/index.html 접속 후 1.8 이상 다운로드 및 설치 -자바 설치 확인 $ java -version 4.마인크래프트 파이썬 API,.. 2020. 8. 15.
홈브루 설치하기 설치하는 방법 먼저 홈브루를 내 컴퓨터에 설치했는지 터미널에 brew --version을 입력해 확인한다. -bash: brew: command not found가 나와 없다는 것을 확인한다. 터미널에 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"를 입력하고 엔터를 누른다. 엔터를 누른다. 내 컴퓨터의 비밀번호를 입력한다. 설치가 끝났다. 참고 https://brew.sh/index_ko 2020. 8. 15.
emmet 설정 변경 Emmet Cheat Sheet docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com Visual Studio Code의 Emmet Emmet 스 니펫 및 확장에 대한 지원은 Visual Studio Code에 내장되어 있으며 확장이 필요하지 않습니다 . Emmet 2.0 은.. 2020. 8. 14.
macOS 게이트키퍼 비활성화 방법 https://extrememanual.net/33681 macOS 게이트키퍼 비활성화 방법 - 익스트림 매뉴얼 맥/맥북의 운영체제인 macOS는 인터넷에서 다운로드 받은 외부 프로그램을 설치할 때 '확인되지 않은 개발자가 배포한 앱' 또는 '~~은(는) 손상되었기 때문에 열 수 없습니다. 해당 항목을 휴지통�� extrememanual.net 2020. 8. 14.
emmet 사용하기 html,css 등을 작성할때, 시간을 단축시켜주는 확장옵션입니다. https://emmet.io/ 해당에디터 : vscode, atom, notepad++ 외 다수 그외에도 emmet 플러그인만 설치돼있으면 가능합니다. https://docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io 2020. 8. 13.
사이트 기본 setting html5 기본 레이아웃 주메뉴 바로가기 본문 바로가기 로그인 바로가기 회사이름 하나 하나-1 하나-2 하나-3 하나-4 둘둘둘둘둘 둘-1 둘-2 둘-3 둘-4 셋셋셋 셋셋셋-1 셋셋셋-2 셋셋셋-3 셋셋셋-4 넷넷넷 넷넷넷-1 넷넷넷-2 넷넷넷-3 넷넷넷-4 넷넷넷-5 넷넷넷-6 넷넷넷-7 다섯 다섯-1 다섯-2 타이틀 회사로고 공통 스타일시트 크로스브라우징을 위해 각 태그관련 속성을 초기화 시켜주는 CSS로 PC와 Mobile에서의 환경을 고려하여 각각 reset.css를 정의하고 있다. 각 서비스 개편시 해당 reset.css를 활용하여 초기화시켜준다. 그리고 기능적으로 공통적으로 사용되는 속성은 global 클래스네임을 정의하여 선택적으로 사용한다. 1. 아래 주소에서 reset.css를 다운 받.. 2020. 8. 11.
Image Guide 이미지 스프라이트 운영성 이미지 성격이 아닌 아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 Size, Request 최소화를 도모한다. 이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표종류PC webMobile WebMobile AppGIFJPGPNG-8PNG-24이미지 스프라이트 AppGIFJPGPNG-8PNG-24이미지 스프라이트 종류 PC web Mobile Web Mobile App GIF 기본 사용 가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X PC Web 기본 포맷은 GI.. 2020. 8. 5.
Naming Guide prefix/subfix/suffix 정의후보자 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다. ex) tab_notice, tbl_product 등 기본 프리픽스는 형태별로 통일한다. 서브 프리픽스가 필요한 부분은 underscore로 구분하여 표기한다 (line / line_dot) 프리픽스 리스트에 한해 subfix, suffix에서 축약형 네이밍 사용한다 (이외 네이밍은 의미전달 가능하도록 기재) - prefix 2개 이상 중복 시 기능적인 prefix가 맨 앞부분에 위치할 수 있도록 한다. - 단독사용 클래스는 지양하며 prefix를 조합한 형태로 작성한다. 예외:fst, lst, hide, onon 클래스인 경우, 단일 특정요소에 상태변화 클래스를 적용한다면 .. 2020. 8. 5.
Event Page 코딩하기 https://www.melon.com/event/ticket/index.htm?gubunId=&keyword=&pageIndex=0 멜론과 멜론티켓의 꿀케미 혜택! 멜론 GOLD이상 누구나! 멜론티켓 예매수수료 무료! 음악이 필요한 순간, 멜론 www.melon.com 멜론 VIP 혜택관 오직 멜론 VIP만을 위한 특별한 문화 혜택 Melon x Melon 티켓 MVG 멜론과 멜론티켓의 슈퍼꿀케미파워! 멜론 GOLD 이상, 누구나! 예매 횟수 제한없이, 무제한! 정말 쉬운 방법으로, 간편하게! 멜론 티켓 수수료 무료 0원 정말 쉬운 헤택받는 방법! 보고 싶은 공연을 클릭하면 결제 시 자동으로 수수료 무료 혜택 제공! Tip 아래에서 꿀잼공연 추천해드릴게요~ 뮤지컬 〈모차르트!〉 10주년 기념공연 202.. 2020. 8. 4.
git clone(복제) 후 다시 git push(올리기) 1. git 설치하기 - 많은 선택지가 나오는데 그냥 무조건 next를 누르세요~ https://git-scm.com/downloads Git - Downloads Downloads Mac OS X Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific git-scm.com 2. 내 컴퓨터에 새폴더를 만들고 Git 저장소 받아오기(clone).. 2020. 7. 31.
Line Awesome 사용하기 코드만 넣으면 아이콘이 뽕!!! 엄청나게 편한 Line Awesome의 사용방법에 대해 알아봅시다. https://icons8.com/line-awesome Download free icons, music, stock photos, vectors Designers, download the design stuff for free — icons, photos, UX illustrations, and music for your videos. icons8.com 사이트에 접속해서 코드만 복사해오면 사용이 가능하다. 그 전에 css를 설치해야 한다. 1. 설치하기 Getting Started 버튼을 눌러 설치 페이지로 이동한다. 1. CDN에서로드 Font Awesome이 이미 설치되어있는 경우 간단히 Line .. 2020. 7. 30.
크롬 시크릿모드 1. 시크릿 모드 실행방법 컴퓨터에서 Chrome을 엽니다. 오른쪽 상단에서 더보기 > 새 시크릿 창 을 클릭합니다. 3. 시크릿 아이콘이 생성됩니다. 다음과 같이 키보드 단축키로 시크릿 창을 열 수도 있습니다. Windows, Linux, Chrome OS: Ctrl + Shift + n을 누릅니다. Mac: ⌘ + Shift + n을 누릅니다. 시크릿 창과 일반 Chrome 창 간에 전환할 수 있습니다. 시크릿 창을 사용할 때만 비공개로 탐색합니다. 2. 시크릿 작업표시줄에 고정하기 1. 바탕화면에 바로가기를 만듭니다. 2. 아이콘 마우스 오른쪽 클릭 후 속성 선택합니다. 3. 속성 > 바로 가기 > 대상(T) 의 exe"뒤에 한칸 떼고 --incognito라고 입력하고 적용을 누르고 확인을 눌러줍니다. 2020. 7. 28.
원페이지 스크롤 Fullpage.js https://alvarotrigo.com/fullPage/ko/ fullPage scroll snapping. Create full screen pages fast and simple Mouse wheel snap to sections. Fast and simple to use. alvarotrigo.com 2020. 7. 28.
회원가입 폼 http://flato.kr/work/2000n/s503_write.html 이천시동행누리센터 동서양의 아름다운 정원을 품은 이천시동행누리센터으로 여러분을 초대합니다. flato.kr 2020. 7. 24.
유용한 10가지 어도비 XD 플러그인 Adobe XD 의 8 월 릴리스 에서 XD는 새로운 플러그인 패널을 도입했습니다. 플러그인 패널은 플러그인 개발자가 플러그인을 표시하는 데 사용할 수있는 디자인 캔버스와 함께 새로운 표면입니다. 사용자가 디자인 작업을하는 동안 플러그인을 열어두면 디자이너에게는 큰 이점이 있습니다. XD 플러그인은 디자인 캔버스에서 사용자의 선택을 읽고 실시간으로 반응 할 수 있습니다. 새로운 플러그인 패널을 사용하는 유능한 개발자 커뮤니티에서 빌드 한 플러그인이 이미 많이 있습니다. 지난주에 시도한 10 가지 플러그인은 다음과 같습니다. 각 플러그인 사용 경험을 공유합니다. UI Faces by Mighty Alex 사용자 인터페이스 디자이너 인 경우 디자인 모형에서 아바타를 더 사실적으로 보이게 추가하는 빈도를 알고.. 2020. 7. 24.
XD 플러그인 추천 https://mariedays.tistory.com/36 어도비 XD 추천 플러그인 워크플로우의 가속화 및 자동화를 구현하는 강력한 플러그인 Artboard Plus 아트보드 재정렬 ​ Lorem Ipsum 더미 텍스트 생성기 ​ ***** ​ UI Faces 아바다를 생성 원하는 타입으로 ​ User Profile 아바타 생성 랜덤 ​ ***** ​ Unsplash Random Image Unsplash에 있는 무료 이미지를 랜덤으로 가져오는건데 ​ PhotoSplash Unsplash에 있는 무료 이미지를 랜덤으로 가져오는건데 선택할 수 있음 ​ ***** ​ Web Export 아트보드를 HTML, CSS로 내보낼 수 있다 ​ Icondrop by Iconscout 아이콘을 바로 사용할 수 있는 .. 2020. 7. 24.
사이트별 가로 크기 네이버 (https://www.naver.com/) 1190px 다음 (https://www.daum.net/) 1080px 제이티스튜디오 (https://studio-jt.co.kr/) 1262px / 100% 2020. 7. 24.
그리드 시스템 그리드 시스템이란 그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다. 그리드 시스템의 장점 디자인 레이아웃은 모든 측정값이 동일한 규칙을 따르면 자동으로보다 일관된 UI를 얻게 됩니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 플랫폼, 환경 및 화면 크기에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 도와줍니다. 또한 협업의 목적으로 .. 2020. 7. 24.
색상 선택 도구 https://material.io/design/color/the-color-system.html#color-usage-and-palettes Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io https://material.io/resources/color/#!/?view.left=0&view.right=0 2020. 7. 24.
Adobe XD 단축키 Adobe XD에서 사용할 수 있는 모든 키보드 단축키의 목록입니다. XD는 문서 작업을 신속하게 진행하는 데 유용한 단축키를 제공합니다. 대부분 메뉴의 명령 이름 옆에 키보드 단축키가 표시됩니다. 다운로드가 가능한 버전의 키보드 단축키 인쇄에 최적화된 버전의 이들 키보드 단축키를 다운로드하고 인쇄할 수 있습니다. 클릭하여 다운로드 XD에서 모든 키보드 단축키를 볼 수 있는 새로운 플러그인이 도입되었습니다. 플러그인을 설치하려면 플러그인 > 키보드 단축키 > 설치로 이동하십시오. 플러그인을 설치한 후 다음 단축키를 사용하여 키보드 단축키에 액세스합니다. Mac: Shift + ⌘ + f Windows: Shift + Ctrl + f 일반 단축키 결과macOS 키보드 단축키Windows 키보드 단축키 종료.. 2020. 7. 22.
Adobe XD 설치하기 Adobe XD 다운로드 https://www.adobe.com/kr/products/xd.html 탁월한 협업 앱으로 웹 사이트, 모바일 앱, 음성 인터페이스, 게임 등의 디자인 제작 및 공유 프로그램 새로운 기능 소개 XD는 정기적으로 추가되는 새로운 기능을 통해 지속적으로 향상되고 있습니다. 업데이트된 최신 기능 중 일부를 소개합니다. 새로운 기능 모두 보기 공동 편집(베타) 동일한 문서를 동시에 여러 팀원과 작업하여 보다 신속하게 디자인할 수 있습니다. 디자인 토큰 색상과 문자 스타일에 사용자 정의 이름을 추가하여 최신 파일로 디자이너와 개발자 간의 협업을 원활하게 진행할 수 있습니다. 스택 오브젝트 간의 간격을 설정해 두면 그룹의 오브젝트 크기가 바뀌거나 새로운 오브젝트가 그룹에 추가되더라도 일.. 2020. 7. 20.
(펌) 워드프레스 테마에서 원페이지 레이아웃으로 사이트 구성하기 https://avada.co.kr/wordpress/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%85%8C%EB%A7%88%EC%97%90%EC%84%9C-%EC%9B%90%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9C%BC%EB%A1%9C-%EC%82%AC%EC%9D%B4/ 원페이지 구성은 SEO적인 관점에서 별로 바람직하지 않습니다만, 우리나라에서는 아직 원페이지 형식으로 사이트를 제작하는 경우가 많은 것 같습니다. 이 글에서는 원페이지로 구성하는 방법과 워드프레스 테마 중 하나인 The7에서 원페이지를 설정하는 방법에 대해 간단히 설명합니다. 섹션에 ID 지정하기 먼저 한 페.. 2020. 6. 26.
(펌) 커스텀 페이지를 만드는 3+1가지 방법 https://wpguide.usefulparadigm.com/posts/668 커스텀 페이지를 만드는 3+1가지 방법 - WordPress 가이드 워드프레스 커스텀 페이지 만들기. 페이지 템플릿을 이용하면 워드프레스에서 커스템 페이지를 쉽게 만들 수 있습니다. 페이지 빌더 플러그인을 써도 되죠. 워드프레스에서 커스텀 페이지를 만 wpguide.usefulparadigm.com 워드프레스를 사용하다보면 페이지(page)를 추가할 일들이 많습니다. 컨택 페이지나 회사소개 페이지, 제품 소개 페이지 등등. 그래서 워드프레스는 포스트(글)와는 별개로 페이지 만드는 공간을 제공하고 있죠. 페이지는 날짜별 카테고리별로 쌓아 나가는 포스트(글)와 달리 하나하나가 독립된 용도를 갖는 경우가 많습니다. 예를 들면 랜딩.. 2020. 6. 26.