본문 바로가기

IT와 생활/홈피와 블로그63

화면크기에 따라 달라지는 CSS의 @media [화면크기에 따라 달라지는 CSS의 @media] 반응형 홈페이지, 반응형 웹페이지 등의 용어가 대세입니다. 여러가지 설명할 것들은 많지만, @media에 대해 간단하게 알아 볼까 합니다. 왜 반응형인가? 과거에는 방문자들이 PC에서 홈페이지나 블로그를 찾아 왔지만, 스마트폰 열기가 시작된 이후로는 모바일을 통한 방문 비중에 매우 높아졌기 때문입니다. 문제는 PC의 모니터 크기와 모바일의 화면 크기(해상도)가 다른 것에 있습니다. 모바일 방문자가 늘어나면서 웹마스터들은 고민을 하기 시작했습니다. 홈페이지를 PC용과 모바일용으로 따로따로 만들어야 하는가? 물론 처음에는 각각 만들었었습니다. 하지만 같은 것을 두고 두번의 작업을 다시 해야 한다는 비효율 문제가 대두되었습니다. 더구나, 4인치 대 부터 5.5.. 2014. 12. 17.
화려한 HTML5 효과의 소스를 얻자 - tympanus.net [화려한 HTML5 효과의 소스를 얻자 - tympanus.net] tympanus.net HTML5가 대세입니다.HTML5의 효과들을 참고하고, 코드소스를 얻어가 보세요. 이 사이트에서 원하는 효과의 이미지를 클릭하면 데모를 볼 수도 있고 Markup, CSS, Javascript 별로 공개된 소스를 복사해 갈 수도 있습니다.따로 소스다운을 지원해 주기도 합니다. 영문으로 되어 있지만 코딩에 대한 지식이 있는 사람이라면 어려움 없이 활용을 할 수 있을 것입니다. ★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^ (로그인 필요없음) 2014. 12. 17.
"글쓰기에는 $wr_id 값을 사용하지 않습니다" 에러의 임시대처 방법 ["글쓰기에는 $wr_id 값을 사용하지 않습니다" 임시대처 방법] 그누보드, 특히 그누보드4를 사용하여 홈페이지 제작시에 특히 스킨을 적용한 다음에 글쓰기를 할때 아래와 같은 경고가 나오는 경우가 있습니다."글쓰기에는 $wr_id 값을 사용하지 않습니다."정확히는 자바스크립트에 변수가 도달되지 않아서 발생하는 것으로 여러 원인이 있습니다. 여기서는 그 중에서 운영자 금지어로 인한 에러를 해결하는 방법을 적습니다.※ 주의 : 그러나 이 방법은 해킹시도를 막아 놓는 코드를 건드리는 것이므로 주의를 요하니 잘 생각해서 결정하길 바랍니다. 문제의 코드 부분 스킨 파일 중 write.skin.php을 열어서 아래 내용으로 수정해 보길 바랍니다.아래 쪽의 코드 중에서 아래의 부분을 찾습니다. function fw.. 2014. 12. 15.
블로그 운영자 여러분 알고 계신가요? [광고 로딩 때문에 컨텐츠가 안 보인다] 블로그를 운영하면서 약간의 수익이 되도록 하기 위해 광고 넣으시는 분 많이 계시죠? 그런데 이런 상황이 일어나는지 알고들 있을까..해서 이 글을 써 봅니다. 아래 캡쳐는 블로그를 방문했을 때 나타나는 화면입니다. 모바일에서 접속한 상태입니다. 광고가 화면을 모두 차지한 상태에서 아주 느린 로딩을 하고 있습니다. 그런데 이것은 양반입니다. 이게 뜨기 전에 짧으면 1초, 길면 3~4초간 화면에 검은 블라인드가 생긴 상태로 광고 로딩을 합니다. 이렇게 화면이 생기고도 바로 광고가 나타나는 것이 아니라 1~2초간 또 로딩을 합니다. 결국은 짜증나서 그 블로그를 나와버렸습니다. 이런 블로그가 한두곳이 아닙니다. 이 광고가 어디의 광고인지 확인해 보지는 않았습니다. 요즘 애.. 2014. 12. 10.
메타태그를 이용한 검색엔진 로봇 차단 일반적으로 검색로봇의 접근을 제어설정하기 위해서는 robots.txt를 만들어서 사용합니다. 키스세븐에서는 이 robots.txt파일을 만드는 방법도 따로 포스팅할 생각이지만, 자기 홈페이지 웹호스팅을 받는 것이 아니면 robots.txt파일을 업로드 해 놓을 수 없기 때문에 그에 대한 방법도 소개합니다. 이 방법은 메타태그를 이용하는 방법으로서, 계정에 가입하여 사용하는 블로그 등을 이용하여 운영하는 운영자에게 쓸모 있습니다. 물론 웹호스팅을 사용하는 운영자도 사용이 가능합니다. 1. 검색엔진 로봇은 좋은가? 나쁜가? 검색엔진 로봇이 많이 온다는 것은 일단 좋은 것입니다. 사이트 내의 글들을 인식해 가서 색인을 만들어 놓는다면 검색으로 방문자가 찾아 올 있게 됩니다. 운영자가 일일이 찾아 다니며 홍보를.. 2014. 11. 26.
간단히 써 먹을 수 있는 버튼 소스 4가지 뒤로가기, 앞으로가기, 새로고침, 소스보기를 할 수 있는 스크립트 소스들 입니다. 정적 홈페이지를 만들 때 자주 사용하게 되는 소스들입니다. form태그를 이용한 스크립트를 삽입하여 작동을 시킵니다. 버튼을 누르는 방식입니다. 물론 버튼 디자인은 CSS를 이용하여 바꿀 수 있습니다. 1. 새로고침 버튼 onClick="history.go(0)" 부분이 핵심입니다. 2. 뒤로가기 버튼 onClick="history.go(-1)" 부분이 핵심입니다.​ 3. 앞으로가기 버튼 onClick="history.go(1)" 부분이 핵심입니다.​ 4. 소스보기 버튼 onClick='window.location="view-source:"+window.location.href' 부분이 핵심입니다. wondow라는 명령을 .. 2014. 11. 26.
웹표준 table구조 - 표 만들기 웹2.0시대를 시작할 때 즈음....지나치게 표로 레이아웃을 잡는 것 때문에 깨짐, 속도저하 등을 이유로 표를 쓰지 말라는 충고들이 넘쳐 났습니다. 그래서 Div구조로 홈페이지들이 변모를 하게 되는데... 하지만 무조건 표 table 구조는 나쁜 것이고 Div만 정석은 아닙니다. 필요에 따라 적재적소에 이용하는 것이 가장 좋은 것이며, 다만 웹표준을 지킬 줄 아는 코딩만이 정석인 것입니다. 1. 테이블의 큰 구조 웹에서 표를 만들기 위해서는 아래와 같은 기본구조를 가집니다.표에 대한 설명​셀의 이름내용이렇게 처음과 끝을 ​와 ​로 정해주면 됩니다. 2. 테이블의 내부 이 구조는 3가지 요소를 가지는데 설명하자면 이렇습니다. 은 ​표에 대한 설명일 뿐이므로 화면에 표시되지는 않습니다. 그러나 여러가지 이유.. 2014. 11. 26.
무조건 PC버전으로 보이게 하기 일반적으로는 PC로 접속하면 PC버전 홈페이지를, 모바일로 접속하면 모바일버전 홈페이지를 볼 수 있도록 자동으로 세팅이 되어 있는 것이 그누보드입니다. 그러나 필요에 따라 모바일버전이 필요없거나 PC버전이 필요없을 수도 있습니다. 그 중에서 모바일버전이 필요 없어서 무조건 PC버전 홈페이지로 접속되도록 하는 방법을 확인해 봅니다. ※ 이 설명은 그누보드를 기준으로 작성되었습니다. 1. 환경설정 바꾸기 그누보드의 루트폴더에는 config.php가 있습니다.에디터로 불러와서 Ctrl+F로 "모바일 홈페이지"를 찾습니다. G5_USE_MOBILE부분의 true를 false로 바꿔 줍니다. 즉 모바일 환경을 중단하는 것입니다. define('G5_USE_MOBILE', false); 2. 자동 로드파일 중단하기.. 2014. 11. 26.
애드센스를 달면 안 되는 페이지? 일반 설정이라면 구글은 음란물, 도박, 마약 등 사회적 물의를 빚을 수 있는 글이 있는 사이트에는 애드센스 수익을 일방적으로 몰수 합니다.특히 사이트를 운영하는 입장에서 조심할 것은 TV방송이나 영화장면 등의 저작권 때문에 일방적으로 강제 제재를 당하는 부분입니다. 원칙적으로 구글은 단순 링크가 많아도 정책위반이라며 강제 제재를 합니다. 이럴 때 어떻해야 할까요? 1. 어쩔수 없는 상황 물론 사회적 문제가 있는 내용을 운영하는 것은 공공도의상 나쁜 것이며 저작권은 지켜야 합니다.하지만 운영을 하다 보면 방송의 재밌는 부분이나 좋은 노래들이 게시판을 채우는 경우가 많습니다. 그러나 이미 유튜브에 올라와 있는 가수의 신곡을 자기 홈페이지에서 공유한다거나 단순 링크를 많이 거는 것만이라도 정책위반이라고 애드센.. 2014. 11. 26.
그누보드4와 그누보드5의 경로 차이 대부분의 프로그래밍은 반복된 입력의 효율성을 꾀하기 위하여 자주 사용되는 것들을 변수에 넣어서 지정해 놓습니다.일반적으로 php 프로그래밍 등은 $를 사용하여 변수를 저장합니다.그누보드5가 그누보드4에서 업그레이드 되면서 경로 변수에 대한 조정이 있었습니다. 이에 대한 것들을 정리해 보려고 합니다. 1. 변수를 사용하는 법 특히 php는 $라는 기호로 변수를 표시합니다.$data = "안녕하세요.";라고 하면 그 이후에는 $data를 입력해 놓으면 자동으로 안녕하세요라는 문자가 표시되는 원리입니다. 아래와 같이 표시하게 합니다. 2. 그누보드5의 경로 사용법 기존에 $g4['bbs_path']처럼 사용하던 경로 변수는 그누보드5에서는 G5_BBS_PATH처럼 표시합니다. 그러므로 아래와 같이 입력하면 경.. 2014. 11. 26.
그누보드에서 많이 사용되는 php 코드 아래 내용들은 G4가 기준이니 G5의 경우엔 경로와 변수를 바꿔서 사용해야 합니다. - 게시판의 제목들로 목록을 만듭니다. ​ - 본문 내용을 일정한 숫자만큼 보여 줍니다. (모양은 유지)만약 여기서 cut_str를 빼 버리면 자르지 않고 다 출력합니다. '...'는 옵션입니다.또, nl2br​와 stripslashes​가 없이 바로 만 있으면 글자만 그대로 다 출력해 줍니다.​​는 html이 적용된 상태 그대로라는 뜻입니다. - 글 입력 시에 링크주소를 입력했다면 링크주소를 불러 옵니다. ​ - 게시판의 카테고리를 표시할 때 사용하는 것 2014. 11. 26.
제목 타이틀을 변경하는 여러 방법 홈페이지에 접속하면 브라우저 상단에는 그 사이트의 이름과 설명이 나타납니다. 사이트명만 덜렁 나타나는 홈페이지는 이름도 기억하기 나쁠 뿐더러 검색엔진에서 검색할 때도 여러모로 불리합니다. 그러므로 사이트 상단에 쓰이는 제목 title의 표시는 중요합니다. 1. 전체적인 사이트명 정하기 먼저 관리자로 로그인을 한 후에 admin 사이트관리 페이지로 들어갑니다."환경설정" 탭에서 보면 상단에 "홈페이지 제목"이라는 옵션이 있는데, 여기에 원하는 홈페이지 명을 써 넣습니다. 이렇게 하면 초기 페이지에 접속했을 때 상단에 홈페이지의 이름이 나타납니다. 2. 모든 페이지에서 같은 사이트명이 보이도록 하기 admin 관리자 페이지의 "환경설정"탭에서 조금 아래쪽으로 내려가면 "추가 메타태그"라는 항목이 있습니다. .. 2014. 11. 26.

티스토리툴바