본문 바로가기

HTML/CSS

검색엔진 최적화(SEO)를 이해하고 반영하는 방법 - 이론편 열심히 만들어도 보는 사람이 없으면 의미가 없다. 즉, SEO의 중요성은 내가 만든 블로그 또는 홈페이지를 검색엔진에서 잘 검색되게 만드는 방법이 SEO이다. 이점은 투자 대비 수익이 증가한다. (SEO : Search Engine Optimization)검색엔진이란? 필요한 사람에게 정확한 정보전달을 목적으로 한다. ( 대부분 구글, 네이버, 다음, 네이트, Bing 으로 검색할 것이다. )"검색엔진이 읽을 수 있는 방식으로 만들지 않으면 검색엔진은 여러분의 글도 읽지 못한다고 생각한다" - 미국의 검색엔진전문가 Bruce Clay “검색엔진을 무시하거나 신경을 쓰지 않는 건 마치 광고를 찍어두고 어디에도 보여주지 않는 행동과 비슷하다” - 검색품질 전문가 석인혁검색엔진을 최적화하는 방법로봇 : 검색엔..
티스토리 블로그 구글 웹마스터 도구 연동 / 사이트 맵 / RSS / meta tag 5분이면 할 수 있습니다.워드프레스 같은 경우는 따로 등록안하더라도 구글 검색이 잘되는데 티스토리는 그렇지 않네요. 네이버의 경우는 등록해도 거의 검색 될 확률이 낮아서 그렇게 중요한지 모르겠는데 구글 웹마스터는 반드시 하는게 좋을 것 같습니다. 티스토리가 구글 검색에 노출이 잘안되네요. 구글 웹마스터에 접속합니다.다음과 같은 화면이 뜨면 SEARCH CONSOLE 을 눌러줍니다. 구글 아이디와 비번을 입력합니다. 티스토리 주소를 입력해줍니다. 대체 방법 탭을 클릭합니다. 메타태그를 제공합니다. 해당 코드를 복사합니다. 티스토리 관리자 '메뉴 > 꾸미기 > HTML/CSS편집' 으로 진입하여 아래의 이미지와 같이 복사했던 메타태그를 붙여넣기 해줍니다. 정상적으로 메타태그가 붙여넣기 됐다면 6.번에서 확인..
자동(Auto) 벤더 프리픽스(Vendor Prefix) https://autoprefixer.github.io/해당 사이트의 경우 버전별로 지원한다.좌측 하단에 필터가 있고 last * version 을 원하는대로 조정가능하다.여타 사이트보다 제일 편리한 것 같다. 또한 신뢰가 간다. 가장 추천 https://codepen.io/새로운 PEN을 생성우측 상단에 세팅이 있다. 세팅 > CSS > Vendor Prefixing > AUTOPREFIXER 로 설정한 후 CSS에 코드를 붙여넣기 CSS우측 화살표 클릭 > View Compiled CSS 클릭 CSS옆에 Compiled가 빨간색으로 적히고 아래 표시해둔 "{" 를 보면 정상적으로 프리픽스가 완료된다. 다만, 원하는 버전을 체그할 수가 없다. 장점은 CODEPEN에서 작업한 코드의 경우 View Com..
Flex 정보 정리 (ie10 ~ ) MS 개발자가이드 (IE 버전별)Internet Explorer 10 개발자 가이드유연한 상자("플렉스박스") 플렉스 레이아웃간단하게 이해해보자- 해당 링크는 어느정도 숙지가 된 후에 보면 나름대로 정리가 된다.모질라 WEBDOCS 제공flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrap 180201 Flex에 대해 잘 정리해준 사이트180313 A Complete Guide to Flexbox
웹 브라우저, 운영체제 이용률 1.Korea HTML 웹 브라우저, 운영체제 이용률등 다양한 정보를 확인 할 수 있다. 2. Statcounter