니노's 잡학로그 :: 알아두면 쏠쏠한 지식

Web Publisher → (9)건

jQuery 를 이용한 반응형 FullPage (resize) 만들기

사용 코드 jQuery 구현기능 좌우 버튼 클릭시 페이지 이동 Dot 버튼 으로 index 를 UI 확인 가능 Dot 버튼 클릭 시 페이지 이동 html에 page 추가 시 동적으로 dot 버튼 변경 HTML 각 페이지를 담는 wrap 페이지를 만든다. 페이지를 원하는 만큼 100% 크기로 만든다. 가로로 만들 경우, 각 페이지를 가로로 배치하자. wrap 은 overflow:hidden, display: absoulte 하고, left 를 이동하면서 다음페이지를 보여주자. 페이지를 이동할 버튼을 만들자. JS( + resize) 페이지 개수를 구한다. page.length 각 페이지의 위치값을 배열에 넣는다. pagePos = [] ← for문 $(window).width() 현재 페이지 인덱스를 저장..
Web Publisher/jQuery 2021. 4. 2. 09:03

css의 hover 를 JavaScript 로 구현해보자!

CSS 의 가상 선택자 :hover를 사용하면 쉽게 할 수 있는 부분이지만, JavaScript 로도 구현할 수 있다. 연습을 위해서 마우스오버를 자바스크립트로 구현해 보자. 아래의 예시는 태그에 src 값을 바꾸면서 hover 를 처리해야 하는 경우이다. 상세 내용 먼저, 태그의 src 에 접근하여 off_str 에 저장한다. off_str 과 replace 를 이용하여 src 의 value를 일부 바꾸고 on_str 에 저장한다. 마우스 이벤트에 따라 태그의 src 를 off_str 또는 on_str 로 변경해 준다. JS const rollover = document.querySelectorAll('.rollover'); rollover.forEach((aTag, index) => { let off..
Web Publisher/JavaScript 2021. 4. 2. 01:27

[프로그램세팅]서브라임 텍스트 헥사 코드에 컬러 효과 넣기

안녕하세요 잡학로그입니다. 이번엔 제가 주로 사용하는 프로그램 서브라임 텍스트(sublime text3)에서 컬러 값을 표기하는 헥사코드에 실제로 컬러를 알 수 있는 패키지를 소개하려 합니다. Package Control을 여시고 Color Highlight를 설치하세요! Ctrl + Shift + p 를 누르셔서 Package Control을 여시고 PCI를 입력하여, Package Control : install package 를 여세요 다음으로는 Color 를 쳐서 Color Highlight를 클릭하시고 잠시 기다리면 자동으로 설치가 완료됩니다. 설치는 아주 간단하죠? 설치가 완료되면 이런 식으로 color 헥사 코드에 색상이 표시됩니다. 어떤 색을 넣었는지 바로 확인이 가능해서 꼭 필요한 패키지..
Web Publisher/프로그램 세팅 2020. 4. 24. 10:46

css로 모바일 아래 스크롤 시 새로고침 막기

풀 페이지 반응형 포트폴리오를 만들면서 모바일에서 자꾸 위로 올릴때마다 새로고침 되는 것이 불편했다. 여러가지 새로고침을 막는 방법 중 가장 간단한 방법을 찾게 되었다. 그 방법을 포스팅으로 남겨봅니다. 아래로 당겨서 새로고침 막는 방법 css에서 태그에 overscroll-behavior: contain; 을 넣으면 된다. 끝이다. 정말 간단하지 않은가?! 이 속성은 원래 페이지에 여러 스크롤바가 있을 경우 한 스크롤에서 다음 스크롤로 넘어가는 현상(스크롤 체이닝)을 막는 속성이다. 내 경우엔 모바일에서 최상단에서 새로고침 되는 것을 막기위해서 이 css 속성을 사용하였다. 모든 곳에서 이 속성을 사용할 수는 없으니 아래 사진을 참조하기 바란다. 브라우저 지원여부에 따라 모바일에서 당겨서 새로고침 되는..
Web Publisher/HTML - CSS 2020. 3. 11. 07:47

css로 제목 한줄에 쓰기 / 끝에 ... (말줄임표) 넣는 방법

안녕하세요 니노의 잡학로그 입니다. 오늘은 텍스트가 넘치면 말줄임표가 자동으로 붙게 해주는 css 코드를 포스팅해 볼게요. 아주 간단히 몇개의 코드만 넣어주면 됩니다. 하지만 자주 쓰지 않으면 자꾸 까먹어서 이렇게 적어둬야 할 코드입니다. 위의 사진에서 표시한것 같이 글이 칸을 넘어 갔을때 말줄임표로 자동으로 나오게 하는 코드입니다. 선택자는 알맞게 적어주시고, 필요한 요소들은 아래와 같으니 너비 부분만 원하시는 크기에 맞게 적절히 수정해서 사용하시면 돼요. ^^ ul > li > a > .title { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } white-space : nowr..
Web Publisher/HTML - CSS 2020. 2. 17. 03:21

[jQuery] 자바스크립트에서 랜덤 수 만드는 방법

Math.random() * max; 0 ~ max 사이의 소수점 아래 16자리의 실수 값을 생성한다. (max 값 포함 안됨) Math.floor(Math.random() * max); 0 ~ (max - 1) 까지의 정수 값을 생성 var rand = Math.random() * max; // 0 ~ max 사이의 랜덤 값을 생성, max는 포함하지 않음 var randInt = Math.floor(Math.random() * max); // 0 ~ (max - 1) 사이 정수 값 생성 예를 들어 새로고침 때마다 배경을 바꿔 주기 위해선 Math.floor(Math.random() * max); 에서 max 부분 대신에 .length 를 이용하여 이미지 총 개수를 넣으면 된다. // 배경 총 개수 v..
Web Publisher/jQuery 2020. 2. 4. 11:39

간단하게 파비콘 다운로드 하는 방법!

안녕하세요! 잡학로그 니노입니다. ^^ 이번에는 퍼블리셔의 꿀팁 중 아주 쉬운 방법으로 파비콘을 다운로드하는 방법을 알려드리겠습니다. 아래의 주소를 복사하셔서 마지막 부분에 주소를 바꾸시면 아주 간단히 파비콘을 다운받으실 수 있습니다. http://www.google.com/s2/favicons?domain=다운받을사이트 주소 (복사 후 주소창에 붙여넣기!) 예를 들어 구글 파비콘을 다운로드 받으시려면 http://www.google.com/s2/favicons?domain=www.google.co.kr 이렇게 주소창에 적으시면 파비콘을 쉽게 다운로드 받으실 수 있습니다. 이렇게 16 x 16 사이즈의 파비콘 png 이미지를 보실 수 있습니다. 마우스 우클릭 > 다른 이름으로 저장 을 클릭 후 다운로드 ..
Web Publisher/퍼블리셔 꿀팁 2020. 2. 4. 03:04

Sublime Text 3 자동 줄바꿈, Word Wrap 끄기 / 켜기

코딩을 할때, 가로줄이 창 크기보다 길어지게 되면 옆으로 이동되어 가로 스크롤이 생성되곤 합니다. 이 가로 스크롤이 생기는게 불편한 사람들도 있고, 오히려 줄이 바껴서 불편한 사람들도 있지요. 우리가 자주쓰는 메모장의 경우 서식 > 자동 줄 바꿈(W) 을 누르시면 메모장 크기에 맞게 자동으로 줄이 바뀌는 것을 보실 수 있습니다. 이 기능은 장 단점이 있습니다. 그러므로 사용자에 성향에 맞게 켜거나 끄시는 것이 좋습니다. 저의 경우에 코딩할때 이 자동 줄바꿈 기능을 끄고 사용하는 편입니다. 코딩을 하게 되면 열고 닫는 명령어들이 있는데, 그 구조들을 쉽게 보기위해선 자동 줄바꿈을 꺼두는게 좋더라구요. 전체적인 구조들을 보기 위해선 끄시는게 좋고, 모니터 환경이 작은 경우에는 기능을 켜두는게 편하더라구요. ..
Web Publisher/서브라임텍스트 (sublime text 3) 2020. 1. 3. 21:35

코딩 프로그램 설치 및 설정(Sublime Text 3)

웹퍼블리셔를 하기 위해서는 웹 관련 코딩을 할 수 있어야 합니다. 그러기 위해선 기본적으로 HTML, CSS, JavaScript를 코딩할 수 있는 에디터가 필요한데, 기본적으로 메모장에서 하드코딩을 하며 코딩을 할 수 있지만, 쉽고 편하게 하기 위해서 코딩 에디터를 설치하여 사용하죠! 여러가지 편리한 에디터들이 많지만, 그중에서 서브라임 텍스트(Sublime Text 3)를 설치 방법과 설정법을 소개합니다. 서브라임 텍스트는 기본적으로 무료로 다운 받으실 수 있으며, 설치 후 사용하시면 됩니다. 사용중에 가끔씩 구매를 요청하는 문구들이 나오지만 전혀 거슬리지 않을 정도라서 무시하시고 계속 사용하시면 되죠! 서브라임 텍스트를 설치하기 전에 먼저해주어야 할 것이 있습니다. 바로 node.js 설치이죠! 코..
Web Publisher/프로그램 세팅 2020. 1. 2. 04:22
◀ 1 ▶

티스토리툴바