티스토리

꿈꾸는 개발자
검색하기

블로그 홈

꿈꾸는 개발자

b.redinfo.co.kr/m

webmaster@redinfo.co.kr

구독자
0
방명록 방문하기
공지 YMusic 플러그인 개발중단 안내 모두보기

주요 글 목록

  • Uncaught SyntaxError: Unexpected token : Uncaught SyntaxError: Unexpected token : 스크립트 구문 오류로 대부분 새미콜론(;) 을찍다가 콜론(:) 찍는 오타로 발생될때가 많다.검색을 해서 찾아서 수정; 공감수 11 댓글수 0 2018. 9. 4.
  • fdsfdsfsf 보호되어 있는 글입니다. 공감수 0 댓글수 0 2016. 11. 15.
  • 추억은 스며든다 추억은 계속 스며든다. 오랜 시간이 지나도, 더욱 선명하게 떠오른다. 추억에 물들어 있을때쯤 희미하게 떠오르는게 있다.그건 바로 아쉬움이다. 추억과 함께 아쉬움이 존재하기도 하고, 아련했던 추억에다시 돌아오지 않는 그 시절을 떠올려 보기도 한다. 하지만 결국 스며들기만 할뿐 돌아갈 수 없고 아쉬움만 생각하다어느세, 검게 물들어 버린다. 그때쯤이면 누군가를 미워할 수 도 있다.하지만 이미 스며든 추억은 쉴틈없이 움직인다. 추억은 짧은 순간을 찍었던 한장의 사진과 도 같고, 길게만 느껴졌던 과거를 압축시킨 영상과도 같다. 추억속으로 가다보면, 그시절 그향기 또한 느낄 수 있다.비록 잠깐 뿐이지만, 그 향기는 너무 좋다. 어릴 적 땅이 하얗게 포장된 집 앞마당을 은색 코트를 입고한손에는 과자봉지를 들고 들어 .. 공감수 16 댓글수 1 2016. 7. 13.
  • [instaget.net]인스타그램의 사진을 가져올 수 있는 사이트 요즘 사람들에게 SNS는 일상생활에 없어서는 안될 필수 항목이 되었다. 최근에는 페북스타 또는 좋아요가 많이 눌리는 페북페이지들이 비싸게 거래되고 하는경우도 종종 발견되고 한다. 이런 현상때문에 SNS가 그리 좋게는 보이지 않는다. 나또한 SNS를 즐겨 하지만 글을 자주 올리거나 하는건 아니다. 오늘은 인스타그램에 있는 사진들을 쉽고 편리하게 가져올 수 있는 사이트를 하나 소개할려고한다. 인사타그램 같은경우 정말 가져오고 싶은 사진이 있어도, 일반적인 방법으로는 사진을 다운로드 할 수 없게 되어있다. 물론 캡쳐를 통해 가져올 수 있지만, 이방법은 원본사진이 아니기 때문에 사진의 화질이 좋지 않다. 하지만 오늘 소개할 InstaGet.net 사이트를 이용하면 쉽고 편리하게 해당 사진을 가져올 수 있다. 물.. 공감수 6 댓글수 0 2016. 6. 11.
  • AJAX 를 이용한 JSON 통신 AJAX 통신은 없어서는 안될 웹기술 중 하나로 페이지의 이동이없이 서버로부터 데이터를 읽어 들어와 해당되는 레이아웃이 출력하여, 데이터를 실시간으로 주고 받을 수 있다. 간단한 예를 몇가지 든다면, 첫번째로 대표적인 페이스북을 들 수 있는데 페이스북은 스크롤을 내릴 때마다 스크롤이 끝에 도달 하기전 페이스북의 글들이 계속 해서 추가되는걸 볼 수 있다. 요즘은 이런 형태의 웹들이 많이 늘어나고 있다. 불필요하게 전체적인 데이터들을 계속해서 가져오는것보단, 갱신된 부분만 가져오는 이 기술은 정말 유용하다. 또다른 예를 하나더 든다면 회원가입을 들 수 있다. 사용자가 회원가입 을 할때 아이디, 닉네임 을 입력하면, 중복 검사를 하게 되는데 과거에는 팝업창을 이용하여 많이 사용하였지만, 지금은 AJAX 통신을.. 공감수 9 댓글수 1 2015. 11. 15.
  • 티스토리 초대장 배포 1 차 티스토리 초대장 배포 1 차 이번에 처음으로 티스토리 초대장을 배포할려고 합니다. 뭐 활동량이 적어서 그렇게 많은 초대장은 보유하고 있지는 않지만, 초대장을 아는 지인을 제외하고는 배포한적이 없다보니 남는게 있어서 이렇게 배포할려고 합니다. 초대장 신청 같은 경우 이곳에 댓글로 티스토리 아이디로 사용될 정확한 이메일만 적어주시면 될듯합니다. 만약 이메일주소가 정확하지 않을경우 초대장은 전송되지 않기 때문에, 주의하시기 바랍니다. 또한 댓글을 비공개로 작성할 시 티스토리 댓글 시스템상 비회원은 자신의 댓글을 확인할 수 없는점을 알아주었으면 합니다. 혹시나 메일주소 유출로 인한 스팸메일 공격이 불안하신 분은 webmaster@redinfo.co.kr 로 보내주시면 될 듯합니다. 초대장은 공평하게 선착순으로 .. 공감수 22 댓글수 13 2015. 10. 2.
  • 티서치를 사용한 간단한 데이터값 조작 티서치란? 티서치란 실행되는 프로그램의 메모리에서 데이터값들을 찾아내어 임의적으로 데이터값들을 수정할 수 있는 프로그램이다. 티서치는 주로 암호화 되지 않는 데이터값들로 된 프로그램이나 서버로 부터 중요 데이터값들을 읽어들이지 않고 사용자 컴퓨터에서 중요 데이터값들을 읽어들이는 프로그램에서 많이 사용한다. 하지만 사용용도에 따라 불법프로그램으로 분류될 수 있으니, 온라인으로 된 프로그램에서는 사용하지 않는게 좋다. 티서치 다운로드 예제로 사용될 똥피하기 게임 다운로드 간단한 사용예제1. 티서치를 실행하여 아래와같이 Open Process 를 클릭한다. (이미지 1-1)2. Select process 창에서 타겟이 될 프로그램을 선택한 후 열기를 클릭한다. (※ 여기서는 예제로 똥피하기라는 게임을 선택 -.. 공감수 15 댓글수 0 2015. 10. 1.
  • 웹싸이트의 가장 기본적인 레이아웃 구성 웹싸이트의 틀은 기본적으로 header, sidebar, content, footer 로 이루어져 있다. 이건 꼭 구성되어야할 틀의 구성이 아닌, 오랫동안 구성되어온 하나의 습관처럼 되어 만들어진 규칙이기도 하다. HTML5로 넘어오면서 이런 틀의 규칙을 적용하여 좀더 의미있는 요소들이 많이 생겨나게 되었다. 오늘 설명할 레이아웃 구성을 이미지로 표현하면 바로 아래의 기본적인 레이아웃 구성 이미지와 같다. 기본적인 레이아웃 구성 이미지(이미지1-1)+ 위의 이미지에서는 표시되지 않았지만, 가장 바깥쪽 테두리는 wrap 요소 이며 sidebar 와 content 를 감싸는 요소는 container 이다. 기본적인 레이아웃 구성요소 설명wrap : 모든 레이아웃을 감싸고 있는 레이아웃header : 기본적으.. 공감수 3 댓글수 0 2015. 10. 1.
  • 웹캠을 CCTV 처럼이용해 보자 - 제노스캠 제노스캠은 웹캠 과 웹캠이 설치된 컴퓨터만 있다면, 제노스캠 프로그램을 이용하여, 언제 어디서든 웹캠이 설치된 곳의 화면을 스마트폰으로 볼 수 있다. 물론 스마트폰으로 영상을 볼려면 스마트폰 어플을 추가로 설치해 주어야한다. 한가지 주의할점은 스마트폰을 이용하여, 영상을 확인할 시 데이터 이용료가 나가기 때문에, 이점을 잘 확인하고 사용해야 한다. 제노스캠 프로그램 메인(제노스캠 프로그램 메인화면) Auto login : 자동로그인 Auto run : 자동 실행Remember ID : 아이디 저장Hidden mode : 숨김모드 (실행시 작업표시줄로 표시될지 설정) 제노스캠 프로그램 로그인된 화면(제노스캠 프로그램 로그인된 화면) Record Folder : 녹화된 영상이 저장된 폴더Settings : .. 공감수 2 댓글수 0 2015. 9. 30.
  • 구글 검색시 클릭되는 싸이트 링크를 새탭에서 띄우기 원래 있었던건지는 모르겠으나 얼마전부터 구글의 내부적인 시스템이 변경된듯 했다. 그 이유중 하나가 바로 검색시 클릭되는 싸이트링크가 현재창에서 넘어가는 것이였다. 다른 사람은 모르겠으나 나같은 경우 필요한 정보를 찾기 위해선 현재창에서 넘어가는건 불편함을 가져오게 될 뿐이였다. 처음엔 내가 사용하는 크롬설정이 변경된듯 하여 크롬의 설정에서 찾아보았지만 여전히 검색링크를 클릭시 현재창에서 실행되었다. 그래서 혹시나하는 마음에 익스플로러를 실행시켜서 테스트해보았는데 역시나 검색링크가 현재창에서 넘어갔었다. 결국 원인은 구글에 있다는걸 깨닫고 구글메인 화면에서 쉽게 해결 할 수 있었다. 아래는 구글 검색시 클릭되는 싸이트링크를 현재창이 아닌 새탭에서 보이게 설정하는 방법이다. 1. 아래와 같이 구글 메인화면으.. 공감수 4 댓글수 0 2015. 9. 29.
  • 코드이그나이터 - 데이터베이스 쿼리의 값을 이스케이프 시키기 ☞ 이스케이프 문자와 인젝션 우리가 알고 있는 이스케이프 문자는 \(백슬래시) 로 시작되는 문자이며, 이스케이프는 PHP 나 기타 프로그래밍시 문자열에 대한 제어를 할 수 있는데 이러한 이스케이프 문자열중 자주 쓰이는 문자열은 \n(줄바꿈), \s(띄어쓰기), \t(들여쓰기-Tab), \\(백슬래시) 등이 있다. 프로그래밍시 데이터베이스에서 쿼리의 값을 이스케이프시키는건 보안의 좋은 예 중 하나이다. 그 이유는 어렵게 생각할 필요는 없다. 만약 데이터베이스를 잘 모른다면 어렵게 다가올 수 있으나, 데이터베이스를 좀 다루어 본 사람이라면, 금방 알 수 있을것이다. 데이터데이스에서 쿼리를 통하여 검색, 삽입, 삭제, 업데이트 가 이루어지는데 이러한 데이터들을 PHP에서 처리한다면 기본적으로 큰 따옴표(") .. 공감수 4 댓글수 2 2015. 9. 29.
  • 코드이그나이터 - Encryption (암호화) 클래스 ☞ 암호화 클래스란? 암호화 클래스란, PHP 에서 처리되는 데이터를 암호화시켜주는 클래스이다. PHP 에서 제공되는 MD5 또는 SHA1 처럼 생각할 수 있으나, CI에서 암호화클래스는 이런 암호화 뿐만 아니라 이보다 더 높은 기술을 가진 암호화 기술들이 제공되기 때문에 상당히 유용한 클래스로 볼 수 있다. 또한 데이터 암호화 뿐만 아니라 복호화도 지원이 되기 때문에, 사용자들에게 보여지는 민감한 데이터를 암호화시켜 보안을 높일 수 있다. 암호화 클래스에서는 기본적으로 2가지의 방법이 제공된다고 메뉴얼에 기재되어있는데 이는 Mcrypt 라이브러리 와 랜덤해쉬 XOR 인코딩 방법들이다. 하지만 Mxrypt 라이브러리 같은 경우 서버에서 사용이 불가능하다면, 암호화된 메세지는 암호화세션 또는 적절한 수준의.. 공감수 5 댓글수 0 2015. 9. 23.
  • 코드이그나이터 - Email 클래스의 이해와 환경설정 ☞ Email 클래스란? CI 에서 Email 클래스란 말그대로 이메일을 보낼 수 있도록 이메일에 대한 함수들이 담긴 클래스 이다. 여기서 중요한점은 CI 에서는 정말 간단한 설정과 코딩으로 보낼 수 있다는 점이다. 나같은 경우 처음 CI 를 이용해 이메일 기능을 만들때 복잡할 줄 알았지만, CI 메뉴얼데로 해보니 정말 간편하고 쉽게 기능을 만들 수 있어서 좋았다. 우선적으로 CI의 메뉴얼을 보면 이메일 클래스는 아래와 같은 기능들이 제공된다고 나와있다. 아래의 기능은 CI 3.0 을 기준으로 작성되었다. CI 3.0 에서 추가된 부분은 굵은 글씨로 표시해 두었기때문에 CI의 버전별 메뉴얼을 참고하여 보면 도움이 될것이다. Multiple Protocols: Mail, Sendmail, and SMTP .. 공감수 2 댓글수 1 2015. 9. 23.
  • 코드이그나이터 - 코어(Core) 시스템 클래스 대체와 확장 ☞ 코어(Core) 시스템 클래스 란? 코어 시스템 클래스는 코드이그나이터에서 CI 가 작동될때마다, 자동으로 초기화 되어, 사용자가 로드하지 않아도, 작동되는 클래스를 뜻한다. 한가지 쉬운 예를 들면, URI 클래스를 들 수 있다. 이 클래스는 환경설정파일인 autoload 에서 자동로드 를 설정하거나 사용자가 임의로 로드해 주지 않아도 CI에서 작동될때마다 자동으로 초기화가 이루이지게 되는데 이러한 클래스를 코어 시스템 클래스라고 한다. 코어 시스템 클래스 같은 경우 CI의 메뉴얼을 보면 사용자가 수정하기엔 여러가지 위험이 따른다고 설명이 되어있다. 하지만 멋데로 수정하지 않는 이상 위험까지 따르지는 않으니, 안심해도 된다. 물론 나의 개인적인 생각일 뿐이다. ☞ 코어(Core) 시스템 클래스 목록 .. 공감수 3 댓글수 0 2015. 9. 17.
  • HTML 의 FORM 요소로 지정할 수 있는 속성과 속성값 FORM 요소는 일반적으로 사용자가 데이터를 입력할 수 있는 입력폼 요소들의 범위를 설정하거나, 서버로 전송할 데이터들을 설정할 때 사용한다. 이때 서버란 데이터를 처리할 수 있는 프로그램을 뜻하며 PHP 나 CGI 를 예로 들 수 있다. 이러한 서버는 FORM으로 넘겨진 값들을 가져오기 위해선 꼭 필요하다. 이렇듯 FORM 요소는 데이터를 전송하기 위해 꼭 필요한 요소기이도 하나 요즘은 AJAX를 사용하여, 요소에 구애 받지 않고, 전체페이지의 로드없이 서버로 데이터를 보내고 받고 하는게 추세이다. 물론 AJAX를 사용한다해서 FORM 요소를 사용하지 않는건 아니다. 그 이유는 FORM 은 입력폼이라는 또하나의 자식과 같은 요소들을 컨트롤 할 수 있기때문에 FORM 요소 범위 안에 작성된 값들을 쉽게 .. 공감수 9 댓글수 2 2015. 7. 20.
  • 코드이그나이터 - 오류표시 설정 일반적으로 웹싸이트를 제작한뒤 운영할때 간혹 오류표시 기능을 끄지 않아, PHP 오류들이 그대로 노출되는 경우가 많다. 오류표시 노출의 경우, 웹서버의 경로나, 공개되어선 안되는 PHP 관련 변수들이 노출되어, 해커같은 악성사용자들의 좋은 먹잇감이 되기도 한다. 물론, URL로 특정 경로접근이 막아져 있는 경우는 경로에 대해 크게 걱정할 필요는 없겠지만, DB 오류와 관련된 부분들은 상당히 위험할 수 있다. 또한 웹싸이트의 오류를 일반 사용자들이 본다면, 그다지 좋아하지는 않을것이다. 이와 같이 오류에 대한 설정은 웹싸이트 운영을 할 시 상당히 중요하다. CI 에서는 index.php 파일에서 오류표시 기능을 설정할 수 있다. 물론, 일반적으로 ini_set() 함수 또는 php.ini 설정파일에서 에러.. 공감수 9 댓글수 2 2015. 7. 19.
  • IE8 이하의 하위 브라우저에 대한 생각 과거에 웹싸이트 제작하다 보면 IE8 이하의 브라우저 때문에 스트레스를 많이 받았었다. CSS 부분은 그렇다 쳐도 JS/JQUERY 같은경우, 복잡한 기능은만들기도 힘들고, 크로스브라우징을 위해, 노가다를 해야만했다. 거기다가 IE 이녀석은 일반 사용자들이 많이 사용하기도 하고 , XP같은 경우 버전8까지밖에 지원이 안되기 때문에, 상당히 골치거리였다. 그래서 난 그당시 깔끔하게 IE8 이하는 버렸다. 시대와 기술들은 날이 갈수록 발전해 나가는데, 뒤쳐진 기술들을 보완할 필요는 없다고 생각했기 때문이다. (JQUERY 2.X 버전부터는 IE 6, 7, 8 을 지원하지 않는다) JQUERY 같은 경우도 버전이 업그레이드 되면서 현재 최신 버전은 IE8을 지원하지 않는다. 단순히 IE8에서 사용할 수 없는 .. 공감수 8 댓글수 0 2015. 7. 8.
  • CSS 의 word-wrap, word-break : 텍스트의 줄바꿈 형식을 지정하고 싶을때 사실 word-wrap 프로퍼티와 word-break 프로퍼티는 같은 목적으로 사용된다. 하지만, 브라우저별로 지원하는 방식이 달라서, 쓰기가 애매모호 할때가 많다. 물론 해결방법이 있긴 있지만, 앞으로 꼭 개선되어야 할 부분중 하나이다. 예제를 보여주고 싶지만, 브라우저 마다 전부 달라서, 사용가능한 방법만 소개할까 한다. 우선 word-wrap 프로퍼티 와 word-break 프로퍼티 의값으로 올 수 있는 것들을 살펴보도록 하자. 아래는 각각 프로퍼티 값으로 올 수 있는 값들과 설명이다. word-wrap 프로퍼티normal 브라우저에 설정된 기본값이다, 이값으로 설정하여도 한글같은 경우 줄바꿈이 자동으로 되는것같지만, 영문일경우는 스페이스바 나 탭 또는 엔터로 띄운 공간이 없을경우 줄바꿈이 되지 않.. 공감수 23 댓글수 2 2015. 6. 23.
  • PHP 의 smtp 전송을 이용한 메일 보내기 소스파일 2022-02-06 본 라이브러리는 2022-02-06일 https://blog.redinfo.co.kr/post/view?pid=74 에서 새롭게 구현되었습니다. PHP 를 이용해서 메일을 보내야하는 경우, 평소 잘 쓰지 않는 메일기능은 머리속에서 구현한 기억만 남아있지, 다시 구현하기란 정말 어려운일이다. 일반적으로 PHP 에서는 메일을 보내는 방법으로 두가지를 쓰고있다. 첫번째 방법으로는 mail 함수를 이용하는 방법이 있고, 두번째 방법은 smtp 로 보내는 기능을 직접 구축하여 사용하는 방법이 있다. mail 함수의 경우 바로 쓸 수 있는게 아니라 sendmail 이라는 별도의 데몬이 필요하다. sendmail 은 유닉스 계열 시스템에서 사용되는 메일서버중 하나이다. sendmail 같은 경우 .. 공감수 57 댓글수 23 2015. 6. 23.
  • 코드이그나이터 - index.php 죽이기 ☞ CI 에서 index.php 죽이기란? 사실 index.php 를 죽인다는 말은 rewrite 모듈을 접해보지 않은 사람이라면 이해가 안갈 수 있다. 나도 처음 날코딩을 하다가 코드이그나이터를 접했을 때, 이 말을 알게 되었다. 그때 당시 index.php 죽이기라는 말을 이해하는것 보다는 공유되어있는 파일을 그냥 가져다가 썻던걸로 기억한다. 본론으로 들어가서 index.php 죽이기 라는 말은 코드이그나이터의 규칙을 생각하면서 보면 이해하기 쉽다. 일반적으로 코드이그나이터의 URL 형식은 아래와 같다. http://호스트주소/index.php/컨트롤러/함수/파라미터 위와 같이 코드이그나이터에서는 기본적으로 index.php 를 거쳐야만 application 과 system 파일들을 로드하여 CI의 .. 공감수 16 댓글수 1 2015. 6. 12.
  • 코드이그나이터 환경설정 - routes.php ☞ routes.php (CI 3.0) routes.php 에서는 컨트롤러의 기본 설정과 URI 라우팅 설정을 추가 할 수 있다. URI 라우팅 설정 같은 경우 옵션이므로, 아래의 메뉴얼을 참고하여 설정하면 될것이다. 3.0 메뉴얼 2.1.0 한글 메뉴얼 아래는 routes.php 파일의 내용에 대한 설명이다. 설명 같은 경우 주석으로 되어있으니 주석을 참고하면 된다. config/routes.php 공감수 4 댓글수 0 2015. 6. 3.
  • PHP 조건문 switch case ☞ switch case 문 swicth case 문은 else if 문처럼 다중 선택이 많을 경우 사용하게 된다. 하지만 else if 문과는 차이가 있다. switch case 문은 다중 선택시 else if 문처럼 조건식에 의해 명령문이 실행되는게 아니라, 수식값에 해당되는 값을 찾아낸다. 이러한 점을 빼면 else if 문과 차이가 없는것 같지만 그렇지만은 않다. 그 이유는 else if 문같은경우 조건식이 여러개로 되어있을 시 최악의 경우 맨 마지막 조건인 else 까지 실행되는 경우가 있다. 이럴경우 프로그램 수행시간이 늘어날 수 있는 단점을 가지고 있다. switch case 문은 else if 의 이러한 단점을 보안해 준다. 아래는 switch case 문의 기본형식과 예제이다. 기본형식을.. 공감수 14 댓글수 0 2015. 6. 2.
  • PHP 조건문 if 과 삼항 연산자 ☞ 조건문이란? 조건문이란 말 그대로 조건이 있는 문장이란 뜻이다. 간단한 예로 우리가 커피를 마실때 여러종류의 커피중 한가지를 선택하게 되는데, 이를 프로그램으로 만든다고 생각해보자. 그렇다면 제일먼저 사용자가 커피를 선택하는 부분을 만들것이고, 그다음으로 선택된 커피에 따라서 커피가 나오는 부분을 만들것이다. 이때 선택된 커피를 구분하는 부분은 조건문을 이용하여 만들것이다. (버튼, 아이콘, 선택) 이처럼 조건문은 프로그래밍을 하는데 있어서 없어서는 안될 중요한 문법이다. 또한 어렵지 않게 배울 수 있기때문에, 기본적인 방법만 배운다면 앞으로 프로그래밍하는데 있어서 조건문을 많이 활용할 수 있다. 그렇다면 조건문에서 많이 쓰이는 것들은 무엇이 있는지 알아보도록하자. 일반적으로 조건문에서 많이 쓰이는건.. 공감수 14 댓글수 0 2015. 6. 2.
  • 웹제작시 정말 유용한 CSS CSS는 문서의 스타일을 따로 정의한다는 뜻을 가졌다. 이렇게 따로 정의하는것을 스타일시트라고 하며, 문서내에서 사용되는 방법을 CSS라고 한다. 사실 이러한 설명들은 CSS 책이나 인터넷에 CSS 만 검색해도 나오는것들이다. 그렇다면, "스타일시트와 CSS는 다른것일까?" 라는 의문이 생기기도 한다. 하지만 의문을 가질필요는 없다. 둘다 같은 의미를 가졌다. 일반적으로 문서에 적용되는 스타일은 CSS 방식을 사용한다. 또한 CSS 방식으로 된 스타일들을 묶어놓은것을 스타일시트라고 한다. 암튼 HTML5 에선 CSS가 문서 스타일 타입의 표준이 되었기때문에, 스타일시트와 CSS의 의미를 두고 고민할 필요는 없다. 일단 아래의 예제를 살펴보도록 하자. CSS파일 로드 HTML 문서에 적용 body{ bac.. 공감수 6 댓글수 0 2015. 6. 2.
  • iframe 을 이용하여 페이지 전체 이동없이 원하는 페이지만 로드해보자. 이건 너무나 간단해서 길게 설명을 않해도 될것같다. 일반적으로 iframe 은 아래와 같은 방법으로 사용한다. 대충 감이 올 수 있겠지만, iframe 의 src 속성값을 변경할 수 있다면, 클릭하나로 계속 싸이트의 주소를 변경하여, 페이지의 전체적인 이동없이, iframe 안에 원하는 페이지만 변경시킬 수 있다. 예제와 관련된 소스는 아래와 같다. 전체페이지 이동없이 iframe 안의 페이지만 이동하는 예제 $(document).ready(function(e) { /* a요소를 클릭 했을 시 */ $('a').click(function(){ /* iframe 요소의 src 속성값을 a 요소의 data-url 속성값으로 변경 */ $('#iframe').attr('src',$(this).attr('dat.. 공감수 11 댓글수 0 2015. 6. 2.
  • pre 요소 : 입력한 HTML 소스코드의 내용을 그대로 보여주고 싶을때 이 요소는 HTML 의 태그의 특성도 적용이 되면서 입력한 내용 그대로 화면에 출력을 해준다. 이태그는 형식은 아래와 같다. 내용(태그포함) pre 태그의 본래 목적은 형태 그대로 노출시켜야될 텍스트 등을 쉽게 나타내기 위해서 사용한다. 사용 목적에 속하는 예로 아래와 같은 경우를 들 수 있다. 아래는 code 요소를 사용하여 C언어의 소스코드를 나타내었다. #include #include void main() { printf("Hello World\n"); } 실행결과 위의 예제 코드를 보면 알겠지만, pre 요소안에서는 다른 요소들도 사용할 수 있다. 위의 예제에서는 code 요소를 사용하여 나타내었다. 중요한점은 pre요소 안에서 다른요소를 사용시, 처음시작부분과.. 공감수 4 댓글수 0 2015. 6. 2.
  • noscript 요소를 사용하여 스크립트가 무효한 브라우저를 대처해보자 요즘같은 시대에 스크립트가 지원 안되는 브라우저는 없을것이다. 그렇다면, 이말은 무슨 뜻인가?? 스크립트가 무효하다는 말은 사용자가 특정 싸이트 또는 모든 싸이트에 대한 스크립트 기능을 차단해 놓은 경우이다. 스크립트 차단기능은 스마트폰 기준으로 보면, 메뉴->설정->자바스크립트 를 들어가서 허용/차단 설정을 할 수 있다. 일반 PC 에서 스크립트를 차단 하는방법은 아래의 포스터 링크를 클릭하면 된다. 2015/02/04 - [정보바다/사용팁/다운로드] - IE(익스) 와 Chrome(크롬)에서 특정 싸이트의 스크립트기능을 차단해 보자 아래의 그림은 스마트폰에서 크롬브라우저를 사용하여 자바스크립트를 차단하는 모습이다. (스마트폰 크롬 브라우저 기준) 위의 그림을 보면 붉은색으로 칠해진 부분이 스크립트를 .. 공감수 8 댓글수 0 2015. 6. 2.
  • 하위 브라우저 에서 placeholder 사용하는 방법 placeholder 란 아래 그림과같이 input 태그나 textarea 에 적용 할 수 있는 속성 중 하나이다. 하지만 익스플로러 같은경우 하위 브라우저 에서는 지원이 안되고있기 때문에, Javascript 또는 JQuery를 이용하여 따로 적용시켜주어야한다. (placeholder 속성이 적용된 모습) 이 속성은 위의 그림과 같이 input 요소나 textarea 요소에 적용시킬 수 있으며, 마우스나 포커스가 들어올 시 자동으로 사라진다. 또한, 글이 입력되지 않고 포커스를 빠져나가면, 자동으로 placeholder 속성값이 위의 그림과 같이 다시 생기게 된다. 아래는 placeholder 의 기본적인 사용 예제이다. placeholder 기본 사용 예제 placeholder 속성값에는 사용자에게 .. 공감수 8 댓글수 0 2015. 6. 2.
  • og 개체를 이용하여 웹싸이트의 정보를 넣어보자 og 개체는 왜사용하는가? og 개체를 이용하는 이유는 sns 를 통해 웹페이지를 공유할 시 사용자들에게 정확한 웹페이지의 정보를 알려주기 위해서 이다. 물론 og 개체를 사용하지 않아도, sns 공유하기 시스템에서 자동으로 설정이 된다. 하지만, 웹페이지의 정보가 엉뚱하게 들어 갈 수 있기때문에, og 개체를 사용하여, 웹페이지의 정보를 확실히 해주는게 좋다. 아래의 예제는 og 개체를 이용 한 예제와 sns 에 og 개체가 적용된 이미지이다. og 개체를 이용하여 값을 설정하는 예제 위의 og 개체가 적용된 예제 위의 예제를 보면 알겠지만, og 개체를 등록하면, sns 내보내기(공유하기)시 정확한 정보를 알려줄 수 있다. 또한 이러한 og 개체를 사용하는 방법은 정말 쉽다. 위의 property 값.. 공감수 8 댓글수 0 2015. 6. 2.
  • HTML 에서 data- 속성을 이용하여 태그를 데이터로 사용해보자 과거에 태그의 속성을 사용해 데이터정보를 넣기위해 웹표준이 아닌 비표준 사용자정의 속성을 이용하여 웹을 제작하곤 했엇다. 물론 내가 그렇게 사용하였다. 하지만 HTML이 발전되어 지금은 웹표준 속성인 data- 속성을 사용하여 데이터정보를 넣을 수 있게되었다. 언제부터 나왔는지는 모르겟지만, 이속성은 정말 유용하게 사용할 수 있다. 사용 예제는 아래와같다. 위의 사용 예제를 보면 data- 속성으로 name, info, value 가 설정되었다. 이 3개의 값들은 사용자 정의이기 때문에, 데이터의 정보를 알기 쉽게 이름을 정의하여 사용하는게 좋다. 이렇게 정의된 data- 속성은, 웹 개발 용도에 따라 여러가지로 사용될 수 있다. 또한 자바스크립트 또는 제이쿼리등을 이용하여,좀더 폭넓게 사용할 수 있다... 공감수 12 댓글수 0 2015. 6. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.