분류 전체보기 검색 결과
425 개의 검색 결과가 있습니다.
웹언어/PHP

[PHP] $_POST, $_GET 데이터 받기

[PHP] $_POST, $_GET 데이터 받기 php에서는 $_POST, $_GET으로 데이터를 받을 수 있습니다. 데이터의 전송은 form을 이용하여 보낸 데이터를 받을수 있습니다. 선행되는 기술들은 form의 사용법과 input에 관한글로 이전에 포스팅을 참고하면 도움이 될 것 같습니다. 2021.05.04 - [웹언어/HTML] - [HTML] form 사용법 [HTML] form 사용법 HTML form form태그를 이용하면 문서를 서버로 전송합니다. form 안에 있는 데이터를 다른 문서로 보낼 때 사용합니다. 게시글을 작성하거나, 회원가입, 설문조사 등을 사용할 때 주로 이용되지요 form jh91.tistory.com 2021.05.05 - [웹언어/HTML] - [HTML] input ..

2021. 5. 23. 09:00
웹언어/JavaScript

[JS] 반응형 코드 만들기

JS 반응형 코드 만들기 요즘은 반응형으로 홈페이지를 만든다. 반응형 페이지란 페이지 하나로 화면 사이즈에 따라 다르게 보여주는 표현해주는 기술입니다. 사용자가 보기 편리하게 만드는 페이지입니다. 사용법 //기준 설정 var windowWidth = window.matchMedia("screen and (max-width: 768px)"); if (windowWidth.matches) { //screen and (max-width: 768px)에 해당한다. alert('모바일 사이즈 입니다.') } else { //screen and (max-width: 768px)에 해당하지 않는다. alert('모바일 사이즈가 아닙니다.') } 변수하나를 설정하여 기준을 저장해 놓는다. 변수를 기준으로 기준 사이즈에..

2021. 5. 22. 09:00
블로그

[블로그 A to Z] 티스토리 스킨을 설정하세요

서론 티스토리는 HTML, CSS, JS의 수정을 통해서 블로그를 홈페이지처럼 만들 수 있다. 티스토리를 사용하시는 분들의 대부분은 웹쪽 전공이 아니기에 내가 원하는대로 직접 수정하여 만들기가 쉽지 않다. 스킨을 이용하면 나도 손쉽게 블로그를 홈페이지처럼 만들 수 있다. 스킨 티스토리에서 제공하는 기본스킨을 이용하여 꾸며도 좋고 유로스킨을 구매하여 적용하는것도 방법이다. 손쉽게 블로그를 꾸밀수 있는 스킨들에 대해서 포스팅 하려 한다. 1) 로그 스킨 김나영님의 블로그에 들어가면 로그 스킨을 받을 수 있다. 제가 예전에 사용하던 스킨으로 적용시 깔끔한 느낌을 준다 반응형으로 제작되어 있기에 모바일 페이지를 따로 둘 필요가 없다. 손쉽게 적용하기 편한 무료 스킨이어서 추천을 하려 한다. https://nyk..

2021. 5. 21. 11:40
웹언어/PHP

[PHP] date() 날짜가져오기

[PHP] date() 함수를 이용하여 날짜 가져오기 php의 date함수를 이용하면 해당하는 시간과 날짜를 가져올수 있습니다. 사용 예시 자주 사용하는 date()문자들 다음은 date함수에 들어갈수 있는 문자열 이다. 주로 자주 사용하는 것들만 적어 놓았다. 일(date) d 01~31 / 일, 10미만의 숫자앞에 0이 붙는다. j 1~31 / 일, 10미만의 숫자앞에 0이 붙지 않는다. w 0(일요일)~6(토요일) / 요일을 숫자로 표현한다. D Sun,Mon ... 등등 요일을 글자로 표현한다. z 0 ~ 365 / 해당 연도의 일자 월(month) F 해당 월을 영어로 표기 (June, May, January 등등) M 해당월의 축약 글자 3글자 (Jun, Dec, Jan 등등) m 01~12 ..

2021. 5. 20. 15:20
알아두면 쓸만한 자료집

[PSD] 썸네일은 꼭 만들어 주세요

[PSD] 썸네일 만들어 포스팅하세요 포스팅을 올릴 때 썸네일 만들어서 올려주세요 썸네일이 얼마나 중요한지는 유튜브, 인스타그램만 봐도 알 수 있습니다. 진짜 중요해요!! 모르시겠다면 이전글을 참고하시면 알게 될 거예요 ↓↓↓↓↓↓↓ 2021.05.15 - [블로그] - [블로그 A to Z] 썸네일은 꼭 만들어요 [블로그 A to Z] 썸네일은 꼭 만들어요 서론 블로그의 글을 작성할 때 대표 이미지를 설정하는가? 아무 이미지나 사용하며 대표 이미지로 설정하지는 않는가? 같은 값이면 다홍치마라고 조금 더 꾸며 페이지 유입을 늘리고 페이지의 jh91.tistory.com 썸네일 만들어 보기 5분만 투자해도 깔끔하게 만들수 있는 썸네일들을 타입별로 가져왔습니다. 블로그로 수익을 내며 운영할 생각이라면 귀찮더..

2021. 5. 19. 09:00
웹언어/JavaScript

[JS] 페이지 이동

[JS] 페이지 이동 HTML에서는 a링크를 통하여 다른 페이지로 이동을 할 수 있다. 자바스크립트에서도 a링크의 기능을 하는 기능들이 있다. 1. location.href 이동 페이지 이동 합니다 네이버 a링크의 이동과 자바스크립트 location.href는 값이 페이지로 이동하는 기능을 가지고 있다. 2. window.open() 새 탭으로 열기 페이지 이동 합니다 네이버 window.open은 타깃에 있는 페이지를 새로운 탭에 열게 합니다. HTML a태그의 target="_blank"와 같은 기능을 수행합니다. 3.window.open() 새 창으로 열기 페이지 이동 합니다 window.open에 _blank를 붙이면 팝업창(새 창) 열기를 할 수 있습니다. HTML a태그로는 새 창열기는 불가능..

2021. 5. 18. 09:00
웹언어/JavaScript

[JS] 배열 섞는 함수

[JS] 배열 섞어주는 함수 배열이란 자료 구조의 종류 중 하나이다. 배열을 섞어주는 함수에 대해서 알아보도록 하자 코드 // 배열 섞기 함수 const shuffleArray = array => { for (var i = 0; i < array.length; i++) { var j = Math.floor(Math.random() * (i + 1)); const temp = array[i]; //빈 곳에 배열i를 저장 array[i] = array[j]; //배열 j를 배열 i에 저장 array[j] = temp; //상수 x를 배열 j에 저장 } return array; }; temp라는 변수, array[i] (array배열 i번째), array[j](array배열 j번째) temp에 array[i]..

2021. 5. 17. 09:40
블로그/광고 이야기

카카오 에드핏 이야기 // 운영정책 파악하기

0. 카카오 애드핏 이야기 운영정책 파악하기 애드센스가 정지 된 이후로 애드핏을 좀 더 중점적으로 노출시키기 시작하였습니다. 애드핏을 유지하면서 주변 지인들에게 블로그를 운영해보라 권하고 디지털 노마드를 홍보하면서 애드핏 관련된 것들을 알려주고 블로그 운영에 관해서 컨설팅 해주며 지냈습니다 애드핏을 주의해야 될 점들이 어떤 것이 있을지 운영정책을 읽어가며 공부하고 내가 알게 된 점 몇가지를 포스팅해보려 합니다. 1. 카카오 애드핏 운영정책 카카오 애드핏의 운영정책은 아래의 링크에서 확인이 가능하다. 직접 찾아보고 읽어 보는 것도 추천이지만 간략하게 중요한 점만 보고 싶다면 나머지 포스팅을 참고하여 확인하면 된다. (세부 내용을 알고 싶으시면 링크에 들어가셔서 확인하면 됩니다.) https://adfit...

2021. 5. 16. 09:00
블로그

[블로그 A to Z] 썸네일은 꼭 만들어요

서론 블로그의 글을 작성할 때 대표 이미지를 설정하는가? 아무 이미지나 사용하며 대표 이미지로 설정하지는 않는가? 같은 값이면 다홍치마라고 조금 더 꾸며 페이지 유입을 늘리고 페이지의 제일 머리에 오는 썸네일에 대해서 알아보자 썸네일 썸네일 "Thumbnail" 블로그 나 동영상 스트리밍 사이트 등에 유용히 쓰이며, 메신저 기능 프로그램(예: 카카오톡, 페이스북 메신저)에서 사진을 첨부할 시 볼 수 있다. 이를 이용하여 속임 당하는 것을 막아준다. 대표적으로 구글에서는 사이트를 검색할 시 사이트 내부를 썸네일로 미리 볼 수 있어 쇼크 사이트 검색을 막을 수 있고 유튜브에서는 썸네일 이미지를 통해 끌리는 영상을 직접 골라 들어갈 수가 있다. -나무위키- 썸네일을 설정해서 문서를 깔끔히 정리하고 아름답게 보..

2021. 5. 15. 09:00
웹언어/코드공유

[코드공유] 필터 갤러리(반응형) 만들기

[코드공유] 필터 갤러리(반응형) 만들기 필터 갤러리를 만드는 코드를 공유하고자 한다. 필터는 내가 원하는 부분만을 찾기 위한 장치이기에 필터에 해당되는 이미지를 보게 해주는 코드를 만들 예정이다. 도움이 되었다면 공감 혹은 덧글 남겨주면 좋겠다. 첨부파일 참고자료 ↓↓↓↓ 결과물 새로 고침 할 때마다 배열을 섞기 때문에 매번 다르게 정렬된다 각 필터에 들어가면 각 필터에 해당되는 자료들만 나타나게 된다. HTML 코드 All Action Animation Comedy Drama Thriller Horror Romance HTML 관전 포인트 1)제이쿼리 사용 2)li에 data-filter을 이용하여 필터 만들어주기 3).poster의 자식인 .itemBox들 주석처리 1) 좀더 편한 접근을 위하여 제..

2021. 5. 14. 09:00
알아두면 쓸만한 자료집

[Mockup] 듀얼 포스터 목업

0.목업 Mock-up 실제품을 만들어 보기 전, 디자인의 검토를 위해 실물과 비슷하게 시제품을 제작하는 작업의 프로세스, 결과물을 통칭한다. 산업 디자인, 출판, UI / UX 디자인에서 주로 사용한다. 1. 파일 다운로드 아래의 링크에 들어가서 첨부파일을 다운로드한다. 바이러스가 의심이 되면 하단에 있는 출처 사이트에서 다운로드한다. ↓↓↓↓다운로드 링크↓↓↓↓ https://drive.google.com/file/d/120fVDe-woIMzJm51zEGmfdtOFyeNoqq2/view?usp=sharing dual-poster-mockup.psd drive.google.com 2. 파일 열기 다운로드한 파일을 실행한다. 다운로드 받은 파일을 실행을 하고 나면 위에처럼 셋팅이 된다. 3. 작업 영역 ..

2021. 5. 13. 09:00
웹언어/HTML

[HTML] 파비콘 설정하기

HTML 파비콘? 파비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 사이트를 대표하는 아이콘이다. 아이콘 크기는 16X16, 32X32, 48X48, 64X64 픽셀로 구성해야 된다. 사이트를 대표하는 이미지를 브라우저 창에서 확인가능하다. 항상 제일 앞부분에 파비콘으로 설정한 아이콘이 등장하며 그 뒤에 에 설정한 것들이 탭창에 나타난다. 파비콘의 확장자는 ico이다. ico 파일 구하기 내가 가진 이미지를 파비콘으로 변환해주는 사이트를 이용하여 ico파일을 얻을수 있다. 아래의 사이트를 통해서 이미지를 ico파일로 변환할 수 있다. icoconvert.com/ ICO Convert - Create Icons From PNG & JPG Images Online ICO Convert is a free on..

2021. 5. 12. 10:30
웹언어/jQuery

[jQuery] 제이쿼리 children / find

jquery .children() .children()은 요소의 바로 아래 자식 요소에게 접근합니다. 간단한 예로는 아래와 같다 1 2 자식 찾기 예전에 올렸던 예제와 같이 보면 도움이 된다. 2021.04.30 - [웹언어/jQuery] - [jQuery] 제이쿼리 parent / parents [jQuery] 제이쿼리 parent / parents jquery .parent() .parent()는 요소의 바로 위의 부모 요소에게 접근합니다. 간단한 예로는 아래와 같다 1 2 부모찾기 2021.04.21 - [웹언어/jQuery] - [jQuery] 제이쿼리 eq [jQuery] 제이쿼리 eq jquery .eq().. jh91.tistory.com .children()은 ()안에 검색해야 되는 요소를..

2021. 5. 11. 09:15
블로그/광고 이야기

구글 애드센스 이야기 // 무효 트래픽 방어 하기

구글 애드센스 이야기 무효 트래픽 방어 하기 5월 8일 아침 9시 주말이어서 평소보다 늦게 일어났다. 평소의 습관대로 일어나자마자 티스토리 앱을 켜서 티스토리를 확인했다. 아침에 일어나서 확인을 해보니 이상하게 엄청 많은 수의 직접 유입이 있었다. 이렇게 내 블로그에 많은 사람들이 지금 시간에 들어올 리가 없기 때문에 PC를 켜서 내 블로그 점검을 하였다. 혹시 하는 생각에 메일을 확인해보니 새벽 대 시간에 구글에서 메일을 하나 보냈다. 어떤 사용자가 내 애드센스 광고를 반복적으로 클릭한 것으로 확인되어 30일 동안 애드센스 계정을 정지하겠습니다. 혹시 방문자수가 증가한 것과 연관이 되어 있을 거라 생각이 되어 어떤 사람이 악의를 가지고 내 광고를 연속으로 클릭한뒤 광고를 막아 버렸나 생각이 되었다. 애..

2021. 5. 10. 09:00
웹언어/HTML

[HTML] meta 설정하기 open graph

HTML meta meta태그는 html문서의 사이에 적는다. meta태그는 문서의 정보나 소유주, 검색엔진 노출 등 화면에 영향을 주지는 않지만 다양한 정보를 함축하게 하는 태그이다. 웹페이지 디자인에 영향을 주지 않는다. meta태그는 여러가지 종류를 가지고 있다 그 중 opengraph 라는것에 대해 다뤄볼 예정이다. opengraph url링크를 보내게 될때 뜨는 정보들을 본적 있는가?? 위의 이미지를 보면 url링크를 보냈을 때 url링크 밑으로 박스가 하나 생성되면서 이미지와 글, 내용, 주소의 정보가 나타난다. 위의 것이 meta태그 중에서 opengraph 라고 할수 있다. 그러면 opengraph에는 어떤 속성들이 있고 설정해야 되는지 알아보자 opengraph의 속성들 og:title ..

2021. 5. 9. 09:00
웹언어/코드공유

[코드공유] 아날로그 시계 만들기

[코드 공유] 아날로그시계 만들기 아날로그시계에 대한 자료가 많이 없어 코드를 공유하고자 한다. 대부분 디지털 시계만 구현하던데.... 아날로그시계를 직접 만들어 보려 한다. 첨부파일을 올릴 테니 코드가 필요하면 다운로드 하면 된다. 제이쿼리 없이 코딩 한것이다. 도움이 되었다면 공감 혹은 덧글 부탁드려요 첨부 파일 참고 자료 ↓↓↓↓ 코드 리뷰 HTML 문서 셋팅 *{ margin:0; padding:0; box-sizing:border-box; } body{ display:flex; justify-content: center; align-items: center; min-height:100vh; background-color: #091921; } .clock{ width:350px; height:35..

2021. 5. 8. 09:00
디자인/PANTONE

[PANTONE] 2015년 팬톤 컬러 마르살라

2015년 팬톤 컬러 PANTONE이라는 회사에서는 매년 올해의 컬러를 발표합니다. 2015년 팬톤 컬러는 마르살라(Marsala)입니다. 안정감을 주면서도 우아하고 매혹적인 레드 와인 빛의 마르살라, 일상에 지친 사람들에게 보다 포근하고 안정감 있는 내일과 긍정의 에너지를 담은 색상이다. 2015년 팬톤 컬러의 핵심 키워드는 '포근함과 풍성함'입니다 마르살라 RGB(150,79,77) #964F4D 마르살라는 RGB(150,79,77) 혹은 #964F4D 로 표현 가능합니다 마르살라는 버건디계열의 찾은 채도를 가지고 있어 차분한 느낌을 주며 따뜻하고 마음에 안정을 주는 색상입니다. 색조합 예시

2021. 5. 7. 09:00
블로그/광고 이야기

구글 애드센스 이야기 // 핀 번호 받을 준비하기

구글 애드센스 이야기 핀 번호 받을 준비 하기 광고를 달고 다른 분들의 글을 보며 광고료를 받으려면 pin번호를 받고 pin을 등록해야 된다는 포스팅을 보았다 애드센스 광고 승인이 난 후 며칠이 되지 않아 내 구글 계정으로 메일이 하나 왔다. 오!! 드디어 나도 지급금을 받을 수 있는 건가 구글에서 보낸 메일은 내 집 주소로 pin번호가 담긴 우편물을 보내주겠다는 것이다. 중요사항으로 PIN 번호를 발송한 날로 4개월 동안 인증을 하지 않으면 광고를 내려 버리겠다는 말을 보내왔다. 따라서 주소를 인증하고 우편물을 받을 준비를 해야 된다. 우편물을 받는 방법은 간단하다 주소 인증을 하여 우편 받을 곳을 설정해 주면 된다. 방법은 2가지 중에 원하는 것을 선택하여 실행하면 된다. 방법 1 구글 계정에서 설정..

2021. 5. 6. 09:00
웹언어/HTML

[HTML] input 사용법

HTML input input태그는 문서에서 사용자가 입력을 할 수 있게 해주는 역할을 합니다, 여러가지 다양한 input이 존재하고 그 input으로 여러가지를 할 수 있습니다. input의 유형 유형 type 설명 text 문자를 적을수 있다 checkbox 체크 박스를 만든다 button 버튼으로 입력을 할 수 없지만 form을 전송할 수 있다 date 날짜 달력을 생성에 고를수 있다 (HTML5 이상) color 원하는 색상을 고를수 있게 해준다. (HTML5 이상) file 파일을 첨부 할 수 있게 해준다 hidden 보이지 않게 한다.(영역도 존재 하지 않는다) number 숫자만 적을 수 있다 (HTML5 이상) range 범위를 지정하여 선택 할 수 있게 해준다 (HTML5 이상) subm..

2021. 5. 5. 09:00
웹언어/HTML

[HTML] form 사용법

HTML form form태그를 이용하면 문서를 서버로 전송합니다. form 안에 있는 데이터를 다른 문서로 보낼 때 사용합니다. 게시글을 작성하거나, 회원가입, 설문조사 등을 사용할 때 주로 이용되지요 form의 속성 action: form에서 데이터를 보낼 문서를 지정한다. (전송 시 action에 적힌 문서가 열림) name: 폼을 식별하기 위해서 이름을 지정합니다. target: action에서 설정한 문서를 파일이 아닌 다른 곳에 action으로 설정한 것을 열도록 합니다. (iframe을 주로 target으로 사용합니다.) target에 관한 정보는 아래의 글에서 참고하면 좋다. https://jh91.tistory.com/10 [HTML] iframe 사용법 / 문서에 youtube영상 넣기..

2021. 5. 4. 09:00