다음 웹마스터 도구 베타에 사이트 등록하는 방법
카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고...
그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다.
우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, 다음은 특이하게도 robots.txt를 사용합니다. 따라서 robots.txt를 추가/수정을 할 수 없는 티스토리 블로그, 네이버 블로그 등은 등록이 불가능합니다. 뭐, 티스토리 블로그는 등록할 필요가 없기는 하지만요...
로그인은 사이트 URL과 PIN 코드로 하는데, 사이트마다 따로 만들어야 합니다. 하나의 계정으로 여러 사이트를 관리하는 시스템이 아닙니다.
아직도 다음 검색 등록이 있는 상태에서, 다음 웹마스터 도구 등록만으로 사이트 검색이 되는지는 잘 모르겠지만, 일단 등록하고 살펴보기로 했습니다.
- 다음 웹마스터 도구 사이트에 접속합니다.
- [PIN코드 발급받기]를 클릭합니다.
- [이용동의 확인]에 체크하면 약관이 나오는데...
- [확인]을 클릭합니다.
- URL을 입력하고 핀코드를 입력한 후 [확인]을 클릭합니다.
- 기다란 코드를 복사한 다음, 사이트의 robots.txt에 추가합니다. 보통 사이트 루트 폴더에 있고, 만약 없다면 만들어야 합니다.
- [로봇룰 테스트]를 클릭하여 이상 없는지 확인합니다.
- 이상이 없다면...
- [인증 시작하기]를 클릭합니다.
- URL과 PIN 코드를 입력하고 [인증하기]를 클릭합니다.
- 이제 다음 웹마스터도구를 사용할 수 있습니다.
Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { content: "\f105"; } 기본 마커 없애기 순서 ...
MySQL Workbench / Windows 10에 설치하는 방법
MySQL Workbench는 MySQL 데이터베이스를 관리하고 분석할 때 유용한 도구입니다. 호환성 문제가 있다고 하지만, MariaDB로 관리 가능합니다. MySQL Workbench를 Windows 10에 다운로드하고 설치하는 방법을 정리합니다. 다운로드 https://www.mysql.com/products/workbench/에서 다운로드 합니다. 는 MySQL을 다운로드 하는 것이니, 혼동하지 마세요. 로그인하라고 하는데, 굳이 그러고 싶지 않다면 를 클릭합니다. 바로 ...
코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...
크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법
웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다. 이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데... 원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다. 해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 ...
Mixin 정의하기 Mixin은 다음과 같은 형식으로 정의합니다. @mixin mixin-name { // code } 인자를 포함하여 다음과 같이 정의할 수도 있습니다. @mixin mixin-name( $arg1, $arg2, ... ) { // code } Mixin 사용하기 Mixin을 사용할 때는 다음과 같이 합니다. @include mixin-name; 인자가 있는 mixin이라면 다음과 같이 합니다. @include mixin-name( value1, value2, ... ); 예제 1 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SCSS @mixin jb ...
Font Awesome 5 / 아이콘으로 체크박스 디자인하기
체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...
아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법
아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...
SASS / 변환 스타일 - nested, expanded, compact, compressed
변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...
SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...
대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...