블로그 & 프로그래밍 (9) 썸네일형 리스트형 블로그 통계를 위한 구글 애널리틱스 설치 블로그나 웹사이트를 좀더 효율적으로 운영하기 위해서는 통계가 필요합니다. 어떤 사람들이 무엇을 검색해서 어느 경로로 유입 되는지 파악한다면 그에 대응해서 주제선정이나 키워드 선별을 할 때 유용할 것이고 이는 자연스레 방문자 수 증가로 이어질 것입니다. 블로거들이 가장 많이 사용하는 통계 도구는 구글 애널리틱스 그리고 그 다음으로 네이버 애널리틱스가 있습니다. 이 중에서 오늘은 실제로 제가 사용중인 구글 애널리틱스를 블로그에 설치하는 방법을 살펴보도록 하겠습니다. 먼저 구글 애널리틱스 사이트로 접속합니다. http://www.google.co.kr/intl/ko/analytics/ 일단은 로그인 부터 해야겠죠?? 구글 아이디가 있으면 바로 로그인을 하고 아니라면 계정 만들기를 눌러 아이디를 만듭니다. 3단.. 티스토리 블로그 메인화면을 전체글보기(category)로 바꾸기 내 블로그 주소로 처음 들어온 방문자가 최근 게시물이 아니라 전체글보기 카테고리로 들어 오게끔 하면 좋지 않을까?라는 생각을 대부분의 블로거가 갖고 있을 것입니다. 저 또한 그렇구요.. 그래서 오늘은 주소를 치거나 검색을 통해 블로그 메인으로 접속한 사람을 자동으로 전체글보기(카테고리) 페이지에 이동시키는 방법을 알려드리겠습니다. 방법은 정말 간단합니다. 위의 코드를 복사해 블로그 관리 > HTML/CSS 편집으로 들어가 태그 사이에 입력하면 끝입니다. 코드에 주석으로 표기된 것처럼 Readiz 님(http://blog.readiz.com/229)께서 작성해주신 코드인만큼 주석을 지우지 말고 사용하시길 바랍니다!! 그리고 주의할 것!! 이 코드를 잘못 사용하게 되면 무한으로 순환하면서 에러가 발생할 수 .. HTML/CSS 자간(글자간격)조절하는 방법 HTML로 문서를 작성하다보면 이래저래 불편한 경우가 참 많죠?? 저도 웹페이지 개발할 때 정말 많이 느끼지만 HTML이랑 CSS가 간단하고 쉬우면서도 은근히 짜증나게 하는 구석이 있습니다. ㅎㅎ 오늘은 HTML로 만든 문서가 사용자에게 좀 더 '가독성' 있는 정보를 전달하기 위해 자간(글자간격)을 조절하는 방법을 알려드리도록 하겠습니다. 간격 조절 시 단어별로 간격을 조절하는 방법이 있고 글자 하나하나의 간격을 조절하는 방법이 있고, 그 방법은 아래와 같습니다. letter-spacing : 글자간의 간격 조절 word-spacing : 단어간의 간격 조절 둘다 모든 단위로 사용 가능합니다. (%, em, px 등) body 전체 글자 간격을 10px로 조절 이 칸의 단어별 간격을 10em로 조절 이런.. HTML 특수문자 코드표(HTML5 기준) HTML 특수문자 코드는 표로 만들어 놨음 스크롤을 내려서 확인하면 됨! HTML로 특수문자를 입력할 땐 특수한 코드가 필요하다. 왜냐하면 HTML에서는 안의 태그를 제외하고는 전부 문자로 인식하기 때문이다. 즉, 별도의 특수문자를 텍스트로 표현하기 위해서는 아래와 같은 코드가 필요하다. HTML 특수문자 코드에는 숫자로 표현하는 방법과 문자로 표현하는 방법 2가지가 있다. 문자표현 코드는 외우기 쉬운 장점이 있는 반면에 모든 특수문자를 표시할 수 없고, 숫자로 표현하는 방법은 외우기 어려운 반면에 모든 특수문자를 표현할 수 있다. 자세한 내용은 아래의 코드표에서 확인! 표현문자숫자표현문자표현설명-�--사용하지 않음space -수평탭space -줄 삽입- - -사용하지 않음.. 검색엔진 최적화를 위한 구글 웹마스터 등록하기 오늘은 검색엔진 최적화를 위해 티스토리를 네이버와 구글 웹마스터에 등록해보도록 하겠습니다. 들어가기에 앞서 웹마스터란?? 사람들이 검색엔진(구글, 네이버)에서 검색을 할 때 웹페이지가 효율적으로 검색되게끔 지원하는 시스템을 뜻합니다.(뭐 꼭 알 필요는 없습니다!!!) 자 그럼 일단 구글 웹마스터에 등록을 해보도록 하겠습니다. 아래의 링크를 통해 웹마스터에 접속 후 로그인(구글 아이디)을 하시면 이미지와 같은 화면이 뜹니다. https://www.google.com/webmasters/tools/home?hl=ko 여기서 우측상단에 '속성추가' 버튼을 누릅니다. 그러면 아래 이미지와 같이 팝업창이 뜹니다!! 이제 여기에 자신의 티스토리 블로그 주소를 입력하고 '계속'버튼을 누릅니다. 그러면 이제 입력한 페.. HTML 한글이 깨짐 문제 해결하는 법!!<META> 태그!!! HTML 한글이 깨짐 문제 해결하는 법!! , HTML을 사용하다 보면 아래처럼 한글이 깨져서 나타나는 경우가 있다!! 그 때는 당황하지말고 태그의 Charset 속성을 이용하면 아주 쉽게 해결할 수 있다. 웹페이지를 구성하는 HTML은 기본적으로 영어만을 지원한다. 그래서 우리는 웹페이지 내 한글을 사용하기 위해 한글을 지원하는 문자세트(?)를 사용한다고 태그를 입력해야 한다. 그 방법은 아래와 같다 ?123 태그 사이에 를 입력해주면 끝이다. 이처럼 HTML에서 한글이 깨지는 문제를 해결하는 방법은 정말 간단하다. A태그 속성과 A태그 사용법 HTML에 있어서 어쩌면 가장 중요하고 가장 많이 쓰는(?) 태그 중에 하나인 A태그 기본적인 사용법은 아래와 같다. ?123456 스타트코딩 바로가기 열리는 태그와 닫히는 태그 사이에 글 혹은 이미지 등을 삽입한 후 태그의 href 속성에 주소를 입력하면 화면에 출력했을때 안에 있는 내용을 클릭하면 href속성으로 지정한 주소로 이동하게 된다. href 말고 a태그의 속성은 target이 있고, 아래와 같이 지정해줄 수 있다. ?123456 스타트코딩 바로가기 target 속성에 지정할 수 있는 값은 _blank, _parent, _self, _top, [name]이 있다. target 속성은 기본적으로 _self로 지정되어 있기 때문에 별도의 속성을 지정하지 않으면, 자동으로 현재의 창에서 페이지를 .. CSS 기본 선택자(태그, ID, Class) 정리 게시글 HTML 그리고 CSS를 보면 CSS는 HTML을 꾸며주는 언어라는 것을 알 수 있다. 그런데 여기서 HTML로 작성한 웹페이지에서 원하는 부분을 꾸며주기 위해서는 원하는 부분을 지정하는 선택자가 필요하게 된다. 가장 기본적인 선택자는 태그(전체)선택자, ID선택자, Class선택자로 분류 할 수 있다. 태그(선택자) 선택자 ?123form{ color:red;}└ 태그 선택자를 사용하는 문법은 위와 같고, 이 문법이 의미하는 것은 'form'이라는 모든 태그에 color:red; 라는 속성을 부여하는 것을 뜻한다. ID선택자와 Class 선택자도 문법은 똑같다 다만 ID선택자는 선택자 이름 앞에 '#'을 붙이고 Class선택자는 '.'을 붙인다. ?123#apple{ color:red;}└ ap.. 이전 1 2 다음 티타임, 커뮤니티 플랫폼 홈페이지 제작 전문 사회자 섭외 : 행사 MC 아나운서
